网页点击切换黑白昼夜模式

WP猫

已于 2022-09-28 13:35:07 修改

阅读量503

点赞数

分类专栏： wordpress 文章标签：前端 javascript html

于 2022-09-10 00:48:46 首次发布

本文链接：https://blog.csdn.net/qq_15369533/article/details/126791869

版权

wordpress 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

网页点击切换黑白昼夜模式并且刷新也不会恢复到初始模式

点击后会在body加一个class属性自己写css代码就行了

HTML

<input id="darkButton" type="checkbox" class="checkbox">

js代码

$('#darkButton').change(function () {
  if ($(this).is(":checked")) {
    $('body').addClass('dark');
    localStorage.setItem('body', 'dark');
  } else {
    $('body').removeClass('dark');
    localStorage.setItem('body', '');
  }
});

$("body").attr("class", localStorage.getItem('body'));
localStorage.getItem('body') ? $('#darkButton').attr('checked', true) : '';

第二种

<div class="theme-switch-wrapper">
    <label class="theme-switch" for="checkbox">
        <input type="checkbox" id="checkbox">
        <div class="slider round"></div>
    </label>
</div>

js代码

 /* -----------------------------------
           dark-mode
    ----------------------------------- */
    const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
    const logoDark = document.querySelector('.logo-dark');
    const logoWhite = document.querySelector('.logo-white');
    const currentTheme = localStorage.getItem('theme');

    if (currentTheme) {
        document.documentElement.setAttribute('data-theme', currentTheme);

        if (currentTheme === 'dark') {
            toggleSwitch.checked = true;
            document.body.classList.toggle("dark");
            logoDark.classList.add('display-none');
            logoWhite.classList.add('display-block'); 
        }
    }

    function switchTheme(e) {
        if (e.target.checked) {
            document.documentElement.setAttribute('data-theme', 'dark');
            localStorage.setItem('theme', 'dark');
            document.body.classList.add('dark');
            logoDark.classList.add('display-none');
            logoWhite.classList.add('display-block');  
        }
        else {
            document.documentElement.setAttribute('data-theme', 'light');
            localStorage.setItem('theme', 'light');
            document.body.classList.remove('dark');
            logoDark.classList.remove('display-none');
            logoWhite.classList.remove('display-block');
        }
    }

    toggleSwitch.addEventListener('change', switchTheme, false);