PWAsForFirefox项目：Windows 11工具栏颜色自定义方案解析

背景介绍

PWAsForFirefox是一款让Firefox浏览器支持渐进式Web应用(PWA)的扩展工具。该工具默认不会使用Windows系统原生标题栏，而是采用自定义的工具栏样式。在Windows 11系统下，用户发现工具栏颜色默认为白色，无法自动适配系统的深色模式或强调色设置。

颜色定制原理

PWAsForFirefox的工具栏颜色行为实际上由两个关键因素决定：

1. PWA应用自身设置：通过manifest文件中的theme_color属性或HTML中的theme-color元标签定义
2. 扩展配置选项：用户可以通过"Allow web apps to override a theme (titlebar) color"设置控制是否允许PWA覆盖主题颜色

解决方案详解

方法一：禁用PWA颜色覆盖

1. 在PWAsForFirefox应用浏览器设置中
2. 找到并禁用"Allow web apps to override a theme (titlebar) color"选项
3. 使用标准Firefox主题来自定义工具栏样式

方法二：使用UserChrome CSS实现系统强调色适配

对于希望工具栏匹配Windows 11系统强调色的用户，可以通过自定义CSS实现：

#navigator-toolbox:not(:-moz-window-inactive),
#scrollbutton-up:not(:hover):not(:active):not(:-moz-window-inactive),
#scrollbutton-down:not(:hover):not(:active):not(:-moz-window-inactive),
.tabbrowser-tab:not(:-moz-window-inactive) {
  background: AccentColor !important;
  color: AccentColorText !important;
  fill: AccentColorText !important;
}

#firefox-view-button[open] > .toolbarbutton-icon,
.tab-background:is([selected], [multiselected]) {
  background-color: color-mix(in srgb, currentColor 18%, transparent) !important;
  background-image: none !important;
}

实现原理说明：

• AccentColor和AccentColorText是Firefox提供的CSS变量，分别对应系统强调色及其文本颜色
• :-moz-window-inactive伪类确保非活动窗口显示不同样式
• color-mix()函数用于创建半透明效果，增强视觉层次感

技术展望

未来版本可能会将此功能作为内置选项提供，但需要考虑跨平台兼容性问题。目前CSS方案在Windows 11上表现良好，但在其他操作系统上的效果仍需进一步测试验证。

使用建议

对于普通用户，建议先尝试禁用PWA颜色覆盖选项并使用Firefox主题。对于高级用户，CSS方案提供了更精细的控制能力，但需要了解UserChrome.css的使用方法。无论采用哪种方案，都能有效改善PWAsForFirefox在Windows 11上的视觉一致性体验。