V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
chen90902
V2EX  ›  分享创造

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

  •  1
     
  •   chen90902 · 2 天前 · 528 次点击

    背景

    本人平时喜欢将系统设为深色模式,但在浏览器中阅读文字时更偏好浅色模式,视觉上更轻松不容易疲劳。但 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 商店链接

    4 条回复    2025-04-25 18:26:15 +08:00
    Ocyss
        1
    Ocyss  
       1 天前
    没明白用途,如果系统喜欢用深色,浏览器也喜欢深色的外观,但内容想要浅色。选择浅色模式,颜色全黑达到的效果应该差不多吧

    chen90902
        2
    chen90902  
    OP
       1 天前
    @Ocyss 因为 Chrome 没有这个设置 ,亮色模式只能使用亮色的外观,深色模式只能用深色外观,不能在亮色模式下使用深色外观。所以设置成深色外观 + 插件实现亮色模式了
    Ocyss
        3
    Ocyss  
       12 小时 11 分钟前
    @chen90902 chrome 商店应该能有这种主题,真没有写一个也不难,都比插件 hooks 优雅简洁的多
    chen90902
        4
    chen90902  
    OP
       4 小时 37 分钟前
    @Ocyss #3 也是个好办法😂
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2642 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 15:03 · PVG 23:03 · LAX 08:03 · JFK 11:03
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.