听书人

在鸡零狗碎操蛋的生活中找到闪闪发光的太阳
网页浅深颜色模式切换117

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

好了!就这么简单。

文章数

67篇

评论数

170

分类数

6

页面数

6

标签


笔记 typecho 日常 小说 pjax 温柔文案 字体 故事 生活文字 ajax lazyload jsDelivr 自适应 分页样式 主题 功能 以德服人 郭德纲 相声 扁食 表情 源码 英语 流光按钮 主题设置

网页浅深颜色模式切换


2021 年