利用filter属性实现黑暗模式
本帖最后由 马黑黑 于 2025-4-17 12:26 编辑 <br /><br /><p>当下，很多阅读品类的APP都提供有黑暗模式，或自动进入，或手动进入，对黑暗环境下的阅读体验有积极作用。Web页可以轻松制作此类功能，方法繁多，这里谈谈如何通过CSS的filter属性来简单实现。</p><p>CSS filter属性拥有诸多函数可用，其中，invert() 用于反转输入图像，取值范围 0%~100%（或0~1），值越大反转反转效果越大；hue-rotate() 应用于色相旋转，取色环角度值，0deg~360deg，值为0时表示无变化，值为360deg时表示变回原本原色。那么，假如在filter属性中同时使用这两个函数，设为 filter(1) hue-rotate(180deg)，情况会如何？来实验一下，方法是：</p>
<p>打开任意一个真实有效的Web页，按 F12 进入 DevTools 开发环境，确保已经切换到了控制台（Console），输入以下代码：</p>
<div id="hEdiv1" data-name="JS代码"><pre id="hEpre1">
const body = document.querySelector('body');
body.style.filter = 'invert(1) hue-rotate(180deg)';
</pre></div>
<p>（注意，在控制台输入代码，需要换行时按 Ctrl键 + 回车键，不要直接按回车键，按回车键时直接运行已输入的代码。默认情况下，DevTools控制台会禁止粘贴代码，这是为了安全起见，但如果在尝试粘贴失败后它有提示，可以按照它的提示操作，这样就可以粘贴了）</p>
<p>上述两行代码以 JS 方式操作CSS，第一行获得web页的body标签操作标识，第二行设置body的style属性（HTML属性）的filter属性（CSS属性），输入或粘贴完毕敲回车键，如果代码没有错误，该页面立即进入黑暗模式，退出DevTools工具（再按F12）黑暗模式依然保存。</p>
<p>这样的话，可以在CSS中设置一个暗夜模式的类（class）标签，然后在JS中给特定元素（比如HTML、body或其它子元素）动态地添加或移除这个类标签，我们就可以令网页在二维开关的模式中自如切换。</p>
<p>下面提供的代码依然通过JS操纵CSS，可以在DevTools控制台下运行。代码创建了一个按钮，点击该按钮可以在两种模式中切换：</p>
<div id="hEdiv2" data-name="JS代码"><pre id="hEpre2">
const body = document.querySelector('body');
const btn = document.createElement('button');
btn.textContent = '切换模式';
btn.style.cssText = `
position: absolute;
left: 20px;
top: 200px;
color: white;
background: blue;
padding: 10px;
`;
btn.onclick = () => {
if (body.style.filter === 'invert(1) hue-rotate(180deg)') {
body.style.filter = 'none';
} else {
body.style.filter = 'invert(1) hue-rotate(180deg)'
}
}
body.appendChild(btn);
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv1, hEpre1);
hlight.hl(hEdiv2, hEpre2);
</script> 那几个乖徒儿呢。@花飞飞 @朵拉 @。。。@。。。。。。{:4_189:} 樵歌 发表于 2025-4-17 14:42
那几个乖徒儿呢。@花飞飞 @朵拉 @。。。@。。。。。。
在的。来了。。。{:4_170:} https://pic1.imgdb.cn/item/680b6c3658cb8da5c8cc63be.png
这个两种方式完成暗黑模式，第一种复制一下粘进去就完美变暗了。。{:4_173:}
第二种更有意思了，还出现一个小按纽，按一下可以切换。{:4_173:}
按纽的位置在左边，位置是固定的好象。
白老师给的代码完美强悍，第一次可以手工操作把页面变暗黑，这个体验也是前所未有的。{:4_170:}新奇的很 创意巧妙，代码简洁，原理清晰。。。小白服 个{:4_170:} 花飞飞 发表于 2025-4-17 19:16
第二种更有意思了，还出现一个小按纽，按一下可以切换。
按纽的位置在左边，位置是固定的好象。
位置可以永远在一个地方，需要酱紫：
一、那个div设置 position 为 fixed;
二、操作对象是 html 标签 而不是 body : 在web页里，html 才是老大，相当于董事长，body 是总经理。这个效果在我的博客里刚做了尝试。 花飞飞 发表于 2025-4-17 19:20
创意巧妙，代码简洁，原理清晰。。。小白服 个
老特说，中国你服了吧{:4_170:} 花飞飞 发表于 2025-4-17 19:19
白老师给的代码完美强悍，第一次可以手工操作把页面变暗黑，这个体验也是前所未有的。新奇的很
主要是没人问，俺一直忍啊忍，最后还是像挤牙膏式的一点一点弄出来吧 花飞飞 发表于 2025-4-17 19:16
第二种更有意思了，还出现一个小按纽，按一下可以切换。
按纽的位置在左边，位置是固定的好象。
文章里有简单说明的：创建了一个按钮。按钮还可以做的漂亮一些 樵歌 发表于 2025-4-17 14:42
那几个乖徒儿呢。@花飞飞 @朵拉 @。。。@。。。。。。
这个你也可以 马黑黑 发表于 2025-4-17 19:42
位置可以永远在一个地方，需要酱紫：
一、那个div设置 position 为 fixed;
去博客里晃了一 圈，黑的白的随意切换更好看，是因为它的背景是渐变的。。
还是有切换的好用。。。
就是PS里的反相呗。。{:4_173:} 马黑黑 发表于 2025-4-17 19:43
老特说，中国你服了吧
小白不用说自己服，不仅口服还心服。。
中国服老特，还是算了吧{:4_170:}我都不服他 花飞飞 发表于 2025-4-17 20:05
去博客里晃了一 圈，黑的白的随意切换更好看，是因为它的背景是渐变的。。
还是有切换的好用。。。
就 ...
差不多是一个原理。还可以细细琢磨，弄出效果更理想的暗夜模式 花飞飞 发表于 2025-4-17 20:06
小白不用说自己服，不仅口服还心服。。
中国服老特，还是算了吧我都不服他
其实他的子女也都不服他，只是出于对未来遗产的追求，都屁颠屁颠地支持而已 马黑黑 发表于 2025-4-17 19:44
主要是没人问，俺一直忍啊忍，最后还是像挤牙膏式的一点一点弄出来吧
我常用手机看小说啊，它是有暗黑模式切换，晚上看的时候护眼。。但也少用。。
谁能想到这个网页可以自己切啊。。。{:4_170:}还以为它根本不存在这个功能。
这样晚上也不用开亮亮的灯来看了。 马黑黑 发表于 2025-4-17 19:44
文章里有简单说明的：创建了一个按钮。按钮还可以做的漂亮一些
看到了，跟贴子里按纽一样啊，这个按纽可以各种设计。。{:4_173:}
现在是不够圆滑。。。好方正。跟个标签似的 花飞飞 发表于 2025-4-17 20:09
我常用手机看小说啊，它是有暗黑模式切换，晚上看的时候护眼。。但也少用。。
谁能想到这个网页可以自己 ...
其实上个世纪就已经实现了。那时，有重要人物去追随老马了，都会临时将网页弄成黑白的，那个就是黑暗模式的。