[护眼模式] 刷新网页会先闪一下原来的主题颜色后脚本才会生效

[langoyb]

问题描述

暗色模式下，比方说油管，谷歌等网站刚打开或者是刷新网页会先短暂闪一下原主题森（也就是亮色），然后再变黑。这种闪烁有点伤眼，不知道有没有办法解决。该问题在Safari和edge均存在。
该脚本算是我用过的不管是扩展还是脚本中算最理想的一个了，感谢作者的付出。

附加截图

No response

[XIU2]

因为油猴脚本的局限性，该问题没什么好的解决方法，因为油猴脚本必须要等网页加载后才能运行，无法第一时间修改网页样式。
建议用 Stylus 扩展来插入自定义的网页样式，如模式 3：

html {filter: invert(0.9) !important; text-shadow: 0 0 0 !important;}
img, .img, video, [style*="background"][style*="url"], svg {filter: invert(1) !important;}

第一行是将整个网页反色，其中 0.9 就是反色比例，可以自行修改（改为 1 就是全黑）。
第二行则是将个别元素（如图片、视频）反转反色，这样就能正常显示了，但因为网页差异，需要反转的元素各不相同，因此需要根据需求添加修改，而且还有部分元素无法反转反色（比如一些元素写在样式里的背景图片），以及一些需要根据情况来判断是否需要反转反色（比如 B 站视频、全屏视频）。模式 3 的兼容性也就来源于此，无法完美解决，通用性不足，因此我主用模式 2 。

[langoyb]

多谢指点，有日子没玩css了，正好重新复习一下

[hqhbaby]

请教 大神 如何将护眼模式3 移值到 Stylus加载的CSS里面呢

[XIU2]

@hqhbaby 我上面不都写了吗？

[hqhbaby]

感谢大神css代码 经测试 发现有不一样 图片反而变成反色 底色黑色过浓烈 请问 应该如何修改呢 能否像脚本那样 排除一些 指定网站呢

[XIU2]

@hqhbaby 前面的忘记写了，还要额外给一些元素加一个反转反色的样式：

img, .img, video, [style*="background"][style*="url"], svg {filter: invert(1) !important;}

因为网页差异，需要反转的元素各不相同，因此需要根据需求添加修改，而且还有部分元素无法反转反色（比如一些元素写在样式里的背景图片），以及一些需要根据情况来判断是否需要反转反色（比如 B 站视频、全屏视频）。模式 3 的兼容性也就来源于此，无法完美解决，通用性不足，因此我主用模式 2 。

[hqhbaby]

用了 Dark Reader 与 Stylus加载的CSS的代码测试 结果 还是你的脚本比较好用 发现脚本以下两个问题 咨询一下 1个是B站 暗黑模式下 播放键如图中不能正常显示 第二个问题就是 脚本能否增加网站记录 如图2 那样 反而是，模式1是黑暗模式 但切换其他网站后 又反而是亮模式

播放按键 能否使脚本在黑暗模式下做到如youtube的效果呢

[XIU2]

@hqhbaby
问题一，这就需要你自己去将视频控制条元素加到我前面给你说的那个样式里了，这需要一些 CSS 基础知识，像这种需要特殊处理的网页元素你以后会遇到很多的，不可能每次都找我解决，这也是我为什么自己都不用模式 3（反色）的原因。

img, .img, video, [style*="background"][style*="url"], svg,
.bpx-player-control-wrap, .bpx-player-ctrl-prev, .bpx-player-ctrl-play, .bpx-player-ctrl-volume,.bpx-player-ctrl-setting,.bpx-player-ctrl-pip,.bpx-player-ctrl-wide,.bpx-player-ctrl-web,.bpx-player-ctrl-full, .bpx-player-state-wrap, #bilibili-player [data-screen="full"]
{filter: invert(1) !important;}

问题二，没看懂你想要表达的意思。