阻止/解除网站变灰的方法｜remove grayscale from website

起因

网站会在一些特定的日子里变灰，但是长时间观看灰色的内容会导致眼睛的损害（bushi

所以建议这段时间减少娱乐活动

那么就有小伙伴问了，如果我真的要看，但是害怕伤害眼睛怎么办？

这里以B站为例（其实每家都一样）

原理

原理是因为网站使用了如下的CSS导致的：

html.gray {
    filter: grayscale(85%) saturate(80%);
    -webkit-filter: grayscale(85%) saturate(80%);
    -moz-filter: grayscale(85%) saturate(80%);
    -ms-filter: grayscale(85%) saturate(80%);
    -o-filter: grayscale(85%) saturate(80%);
    filter: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=.85);
    -webkit-filter: grayscale(.85) saturate(.8);
}
           

使用这个特性可以通过一行css直接让整个网页变灰，目前是各家网站的经典落地方案

那么有没有什么办法可以简单的直接清除grayscale呢？

清除网页变灰的方法：

How to remove gray or grayscale from website:

清除grayscale的方法：

1.首先下载ublock：

因为我习惯使用edge，所以直接在微软商店中下载即可：

https://microsoftedge.microsoft.com/addons/detail/odfafepnkmbhccpbejgmiehpchacaeak

2.安装后点击进入设定：

3.进入设置界面，选择“自定义静态规则”

4.将如下内容复制进入规则中：

*##html:style(filter: none!important;-webkit-filter:none!important)           

5.按ctrl+(windows系统)或者command+s(Mac系统),或点击应用更改

6.重新打开B站或者淘宝等网站，你就会发现灰色遮罩被清除了

最后备注：

只能使用ublock，因为我试验过adblock和apb，他们的规则只能做简单的清除，不支持css内容替换，所以无法使用

这个方法理论上对其他的浏览是没有任何影响的，至少我测试后并未发现导致其他的问题