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

这篇文章发布于

DeathGhost 编辑, 归类于css » 当前评论0条。

手机设置中的深色模式、后台管理系统中的主题切换以及有些网站中的明暗主题样式切换等都是一种视觉上的处理。作用也就是让用户可以在不同的光线环境下自主选择,同时也是对眼睛的一种放松。

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

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

我们知道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网站深色主题模式的切换。


CSS 暗黑模式 深色 filter滤镜 invert