CSS 实现夜间模式和CSS自定义属性(变量)

方法一,基本方法

为每一份主题写一份 CSS 文件,批量替换颜色,例如 style.css、style.dark.css。如果需要切换模式的花,只需要 改变 link 指向的 CSS 文件路径。



方法二,使用 SCSS 等工具引入颜色变量

在方法一的基础上,生成多个 CSS 文件路径。



方法三,使用CSS自定义属性(变量)

CSS 原生变量支持,同样一个颜色值可能在成千上百个地方被使用到,如果这个值发生了变化,需要全局搜索并且一个一个替换(很麻烦哎~)。自定义属性在某个地方存储一个值,然后在其他许多地方引用它。


属性名需要以两个减号(--)开始,大小写敏感,属性值可以是任何有效的CSS值。和其他属性一样,自定义属性也是写在规则集之内的,一般定义在根伪类 :root 下:

element {
 --main-bg-color: brown;
}
:root {
 --main-bg-color: brown;
}

# 使用局部变量时用 var() 函数包裹
element {
 background-color: var(--main-bg-color);
}


自定义属性备用值:

.one {
    color: var(--my-var, red); /* Red if --my-var is not defined */
    background-color: var(--my-var, var(--my-background, pink)); /* pink if --my-var and --my-background are not defined */
    background-color: var(--my-var, --my-background, pink); /* Invalid: "--my-background, pink" */
}


在 JavaScript 中获取或者修改 CSS 变量和操作普通 CSS 属性是一样的:

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");
// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");
// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", jsVar + 4);



方法四,只使用JavaScript

这种方法太敷衍了


/* -------------------------------------------------------------------------- *
 * 夜间模式
 */
function setDark() {
  var dark = [
    'img',
    'video',
    'iframe',
    'embed',
    'object',
    '[style*="background:url"]',
    '[style*="background-image:url"]',
    '[style*="background: url"]',
    '[style*="background-image: url"]',
    '[style*="background-image"][style*="image-set"]'
  ];
  dark = 'body,' + dark.join(',') + '{filter:invert(100%);}'
    + dark.map(function (p) { return dark.map(function (p2) { return p + ' ' + p2 }).join(',') }).join(',') + '{filter:invert(0%);}'
    + 'body{background-color:rgba(0,0,0,0.9382)!important;}:root,html{background-color:rgba(0,0,0,0)!important;}';


  var css = document.createElement('style');
  css.classList.add('dark-style');
  css.innerHTML = dark;
  document.body.appendChild(css);
  setCookie("isDark", "yes");
}


// 判断是否已经设置过暗黑模式
var isDark = getCookie("isDark");
if (isDark == "yes") {
  setDark();
  document.querySelector('.dark-switch-button').classList.add("dark");
}


document.querySelector('.dark-switch-button').addEventListener("click", function () {
  if (this.classList.contains("dark")) {
    document.querySelector(".dark-style") && document.querySelector(".dark-style").remove();
    setCookie("isDark", "no");
  } else {
    setDark();
  }
  this.classList.toggle("dark");
});



备注:图片可以使用CSS 滤镜 CSS3 filter brightness()降低暗度,https://javascript.net.cn/article?id=682



参考:

https://developer.mozilla.org/zh-CN/docs/Web/API/CSSRule

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_proerties

修改时间 2021-07-16

真诚赞赏,手留余香
赞赏
随机推荐
一份代码构建移动、桌面、Web全平台应用
微信上传图片
FTP over TLS加密传输 Filezilla
CSS实现图片模糊
织梦DedeCMS任意位置调用自定义字段的方法
前端生成验证码
20170313 夜晚停电
JS模仿《无限梦魇》中的精灵控制和场景滚动
Android Studio打开新项目卡在Gradle的问题
MySQL 管理用户