CSS filter 滤镜 - 快速设置页面深色主题模式

网站主题设置 - 有切换模板样式的，有专门定制样式的，这里不进行复杂讨论，只是看看如何通过CSS快速为网站设置深色主题样式。

我们知道prefers-color-scheme CSS 媒体特性用于检测用户是否有将系统的主题色设置为亮色或者暗色。通过它我们可以为其定义不同的样式。

prefers-color-scheme 示例

// ...引用示例代码
.day   { background: #eee; color: black; }
.night { background: #333; color: white; }

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}
// ...

今天讨论的不是它，而是CSS filter(滤镜) 属性。如何通过CSS滤镜快速设置网站暗黑主题样式（白天/夜间模式切换）。

CSS filter(滤镜) 属性

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
// 提示: 使用空格分隔多个滤镜。
// 滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

着重看看关于invert()与hue-rotate()，通过它两设置网站页面的深色样式。

invert(%)反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。

invert(0)     /* No effect */
invert(.6)    /* 60% inversion */
invert(100%)  /* Completely inverted */

hue-rotate(deg)给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

hue-rotate(-90deg)  /* Same as 270deg rotation */
hue-rotate(0deg)    /* No effect */
hue-rotate(90deg)   /* 90deg rotation */
hue-rotate(.5turn)  /* 180deg rotation */
hue-rotate(405deg)  /* Same as 45deg rotation */

下面借用我的后台NG（Angular）项目演示。

样式（SCSS）定义

.darkTheme{
    filter: invert(0.9) hue-rotate(.5turn);
    // 避免菜单栏样式被设置
    .sideMenu{
        filter: invert(1) hue-rotate(.5turn);
    }
    .ant-card-hoverable:hover{box-shadow: none;}
    // 避免页面图片被设置
    img {
        filter: invert(1) hue-rotate(.5turn);
    }
}

TS中增加切换方法

将其通过localStorage本地存储下来，页面销毁时若存在清空本地存储，记得将其darkTheme排除掉，让用户自主选择。

在页面放置切换主题按钮（Dark Theme / Light Theme）对其添加点击事件。

switchTheme() {
  this.darkTheme = !this.darkTheme;
  if (this.darkTheme) {
    document.getElementsByTagName('html')[0].classList.add('darkTheme');
    localStorage.setItem('darkTheme', '1');
  } else {
    document.getElementsByTagName('html')[0].classList.remove('darkTheme');
    localStorage.removeItem('darkTheme');
  }
}

for (const item of Object.keys(localStorage)) {
  // 排除黑夜模式
  if (item !== 'darkTheme') {
    localStorage.removeItem(item);
  }
}

最后在页面统一头部文件head中添加js代码即可。

if (localStorage.getItem('darkTheme')) {
  document.getElementsByTagName('html')[0].classList.add('darkTheme');
}

所以通过 CSS filter 滤镜，两行代码即可快速简单设置Web网站深色主题模式的切换。