写了一个让浏览器始终保持浅色模式的 Chrome 插件

[chen90902]

背景

本人平时喜欢将系统设为深色模式，但在浏览器中阅读文字时更偏好浅色模式，视觉上更轻松不容易疲劳。但 Chrome 设置为深色主题后，网页也默认变成了深色，这让我用起来很不习惯。故手动写了一个插件来解决这个问题。

安装

Chrome 商店链接

使用

安装后自动激活，无需任何设置。需要关闭时，再次点击插件图标即可。

实现原理

主要从几方面来让网页判断为浅色模式：

1. 覆写 window.matchMedia("(prefers-color-scheme: dark)")，始终返回 false
2. 根据 CSSStyleSheet 对象，移除包含 (prefers-color-scheme: dark) 的样式表定义
3. 移除部分已知的全局深色类名，比如 Tailwind 在 html 标签上的 dark类名等

希望能帮助到有需要的人。

---

广告位

分享一下本人开发的其他浏览器插件：

• Quick QRCode - 二维码生成插件，可以使用快捷键 option + Q 启动，简单快速。Chrome 商店链接

• Cambridge Pronunciation Downloader - Cambridge 发音下载。Chrome 商店链接

[Ocyss]

没明白用途，如果系统喜欢用深色，浏览器也喜欢深色的外观，但内容想要浅色。选择浅色模式，颜色全黑达到的效果应该差不多吧

[chen90902]

@Ocyss 因为 Chrome 没有这个设置 ，亮色模式只能使用亮色的外观，深色模式只能用深色外观，不能在亮色模式下使用深色外观。所以设置成深色外观 + 插件实现亮色模式了

[Ocyss]

@chen90902 chrome 商店应该能有这种主题，真没有写一个也不难，都比插件 hooks 优雅简洁的多

[chen90902]

@Ocyss #3 也是个好办法😂

[Chicagoake]

@chen90902 #2 Chrome 有呀，设置-外观-主题，就可以切换“浅色/深色/设备”，macOS 系统最新版本，Chrome 也是最新版本。

[chen90902]

@Chicagoake 改了 Chrome 为深色外观网页也就变成了深色模式，想用 Chrome 的深色外观 （酷炫些）+ 网页的亮色模式（护眼些）。。。需求是有些奇葩 😂😂😂