听书人

在鸡零狗碎操蛋的生活中找到闪闪发光的太阳

网页浅深颜色模式切换

听书人 · 沦陷于 · 2021/10/01 · 阅:114

自认为原理特简单,给html添加个class之类就欧克了

第一个方法

这里直接引入js

<script type='text/javascript'src='https://cdn.jsdelivr.net/gh/wanfengba/tuping/main.js'></script>
  1. css文件需要预设正常模式的深色模式的字体和背景颜色。
  2. 切换按钮需要添加“dark-light”类名。

css代码

/* 正常模式 */
:root{
    --color-whiteblock:#ffffff; /*正常模式下颜色为白色*/
    --color-blockwhite:#000000;
    --color-one:#efeefd;
    --color-two:#fafafa;
    --color-three:#ffffff;
}
/* 深色模式 */
[data-theme='dark']{
    --color-whiteblock:#161B2A;/*开启深色模式颜色为黑色*/
    --color-blockwhite:#ffffff;
    --color-one:#070615;
    --color-two:#161b2a;
    --color-three:#070615;
}

解释一下这个意思

如果现在你的背景颜色是background-color:#fff;也就是正常颜色白色那么你就应该把#fff改成background-color: var(--color-whiteblock:#ffffff) 这样子当你点击dark-light类名后html就会添加个[data-theme='dark']这时变会自动转到第二个css里的--color-whiteblock:#161B2A;/开启深色模式颜色为黑色/

第二个方法

html代码

<footer id="dark-mode-toggle">
  <i class="fas fa-adjust"></i>
  <small>点击切换</small>
</footer>

js代码

let darkMode = localStorage.getItem("darkMode");

function enableDarkMode() {
  document.body.classList.add("darkmode");
  localStorage.setItem("darkMode", "enabled");
}

function disableDarkMode() {
  document.body.classList.remove("darkmode");
  localStorage.setItem("darkMode", null);
}

if (darkMode === "enabled") {
  enableDarkMode();
}

// Listeners

const darkModeToggle = document.querySelector("#dark-mode-toggle");
darkModeToggle.addEventListener("click", () => {
  darkMode = localStorage.getItem("darkMode");
  darkMode !== "enabled" ? enableDarkMode() : disableDarkMode();
});

css代码

.darkmode {
  color: #dcdcdc;
  background-color: #222831;
}

点击切换是body会出现一个darkmode值。
darkmode背景代码颜色为黑色就会变成暗黑模式

好了!就这么简单。

最后更新:2021-10-05
黑暗模式
文章分享
折叠评论
评论 (11)
  1. Yalois
    Yalois

    突然发现你用的一直是同一个主题...我在微机室的时候我记得主题不是这样的啊(估计是微机室电脑加载不完整)

    10月2日 回复
    1. 枯木逢春
      @Yalois

      没有的,近几个星期已经换了很多主题了

      10月2日 回复
  2. Yalois

    感觉现在的博客主题看起来不是很舒服,qwq不好找按钮,交互体验不大好

    10月2日 回复
    1. 枯木逢春
      @Yalois

      🤣提醒到我了,到时候给底部也添加个页面导航

      10月2日 回复
    2. Yalois
      @Yalois

      这么巧,你刚才也在看我的主题hhhh

      10月2日 回复
      1. 枯木逢春
        @Yalois

        原主题在你那都变好看了😂

        10月2日 回复
        1. Yalois
          @枯木逢春

          我打算换主题了

          10月2日 回复
          1. 枯木逢春
            @Yalois

            很是期待

            10月2日
  3. 枯木逢春

    测试测试

    10月1日 回复
  4. 枯木逢春

    测试评论

    10月1日 回复
  5. 枯木逢春

    测试评论

    10月1日 回复