听书人

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

网页浅深颜色模式切换

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

自认为原理特简单,给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背景代码颜色为黑色就会变成暗黑模式

好了!就这么简单。

最后更新:8小时前
文章分享
黑暗模式
折叠评论
评论 (11)

评论列表共 11 条评论

  1. 评论者头像
    07:40 pm

    测试评论

  2. 评论者头像
    07:41 pm

    测试评论

  3. 评论者头像
    07:41 pm

    测试测试

  4. 评论者头像
    12:35 pm

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

    1. 评论者头像
      12:37 pm
      @Yalois

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

      1. 评论者头像
        12:39 pm
        @Yalois

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

        1. 评论者头像
          12:42 pm
          @枯木逢春

          我打算换主题了

          1. 评论者头像
            12:43 pm
            @Yalois

            很是期待

    2. 评论者头像
      12:38 pm
      @Yalois

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

  5. 评论者头像
    Yalois
    01:18 pm

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

    1. 评论者头像
      02:43 pm
      @Yalois

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