Chrome 扩展如何保持覆盖层与亮暗模式同步？
YuzuLingo · 2026年11月1日
Chrome 扩展通过将主题颜色视为实时令牌并在亮暗模式变化时通知每个注入的表面来保持覆盖层的同步。工具栏、字典弹出窗口、遮罩轮廓和 CSS 高亮随后在原地重绘，而不是等待页面刷新。
为什么内容脚本 UI 在主题化时很尴尬
覆盖层生活在扩展不拥有的页面内。样式可能位于影子根、浮动工具栏或 CSS 高亮注册表中。如果学习者在后期切换浏览器或网站主题，注入时的一次性绘制会锁定错误的调色板。
集中令牌而不是分散的十六进制值
单个 UI 颜色对象包含当前主题的强调色、表面色、弱化文本和柔和填充。应用主题时，这些令牌只会被一次性变更。调用站点在绘制时从该对象读取，因此它们不会在深色模式弹出窗口中硬编码过时的亮色黑。
订阅者驱动的重绘
每个长期存在的覆盖层都会注册主题变化。当通知时，工具栏重新应用根 Chrome，字典弹出窗口重绘其最后一张卡片，悬停高亮 CSS 重新生成，空的或加载中的 OCR Chrome 更新。遮罩轮廓刷新以使区域边界与新的对比度匹配。
将 Chrome 颜色与字幕文本颜色分开
UI Chrome 应该遵循亮暗模式。被识别的字幕文本通常位于深色遮罩上，需要固定的亮色墨水，以便学习者可以在任一主题中阅读。将 OCR 文本颜色绑定到主题令牌是一个常见的错误，会使新区域在黑底上看起来是黑色，直到有人手动覆盖颜色。
在实践中“完全主题化”的含义
完整的处理包括活动芯片状态、柔和的强调填充、弹出窗口中的句子上下文高亮，以及状态行（如加载识别）。如果其中任何一个仍然需要刷新，则主题订阅错过了该表面。
