CustomCSSforFx 项目：Firefox 侧边栏图标样式优化指南

Firefox 浏览器允许用户通过自定义 CSS 来修改界面样式，而 CustomCSSforFx 项目提供了丰富的样式模板。本文将重点介绍如何优化 Firefox 侧边栏图标样式，解决图标显示问题并实现颜色定制。

问题背景

在 Firefox 129 及更高版本中，原有的侧边栏图标样式文件 generalui/sidebar_header_icons.css 已不再有效。这是由于 Firefox 底层实现的变更导致原有 CSS 选择器失效。

解决方案

基础图标修复

要使侧边栏图标重新显示，需要使用 !important 规则覆盖默认样式：

#sidebar-switcher-bookmarks::before {
  content: url("chrome://browser/skin/bookmark.svg") !important;
}
#sidebar-switcher-history::before {
  content: url("chrome://browser/skin/history.svg") !important;
}
#sidebar-switcher-tabs::before {
  content: url("chrome://browser/skin/tab.svg") !important;
}
#sidebar-reverse-position::before {
  content: url("chrome://devtools/skin/images/tool-network.svg") !important;
  transform: rotate(90deg) !important;
}
#sidebarMenu-popup menuitem[data-l10n-id="sidebar-menu-close"]::before,
#sidebar-menu-close::before {
  content: url("chrome://global/skin/icons/close.svg") !important;
}

图标颜色定制

由于直接使用 color 或 fill 属性对 ::before 伪元素无效，我们需要使用 CSS 滤镜实现颜色定制。以下是针对不同侧边栏项目的颜色方案：

1. 书签图标（蓝色系）：

#sidebar-switcher-bookmarks::before {
  filter: invert(32%) sepia(75%) saturate(439%) hue-rotate(169deg) brightness(98%) contrast(91%);
}

2. 历史记录图标（紫色系）：

#sidebar-switcher-history::before {
  filter: invert(16%) sepia(34%) saturate(5061%) hue-rotate(282deg) brightness(99%) contrast(129%);
}

3. 标签页图标（蓝色系）：

#sidebar-switcher-tabs::before,
#sidebar-reverse-position::before {
  filter: invert(40%) sepia(88%) saturate(629%) hue-rotate(193deg) brightness(86%) contrast(107%);
}

4. 关闭按钮（红色系）：

#sidebarMenu-popup menuitem[data-l10n-id="sidebar-menu-close"]::before,
#sidebar-menu-close::before {
  filter: invert(17%) sepia(99%) saturate(7264%) hue-rotate(360deg) brightness(100%) contrast(112%);
}

进阶技巧

暗黑模式适配

为了使图标在不同主题下都能正常显示，需要添加针对暗黑模式的特殊样式：

@media (-moz-content-prefers-color-scheme: dark) {
  :root[lwtheme]:not([style*='--lwt-header-image']) #sidebar-switcher-bookmarks::before {
    filter: invert(57%) sepia(34%) saturate(633%) hue-rotate(169deg) brightness(101%) contrast(93%);
  }
}

图标旋转处理

对于需要特殊方向的图标（如位置反转按钮），需要添加旋转变换：

#sidebar-reverse-position::before {
  transform: rotate(90deg);
}

注意事项

1. 使用 CSS 滤镜转换颜色时，建议使用专业的颜色转换工具确保准确性
2. 不同 Firefox 版本可能需要微调选择器
3. 添加 !important 声明可以确保样式优先级
4. 测试时注意检查是否意外禁用了其他相关样式

通过以上方法，用户可以轻松实现 Firefox 侧边栏图标的个性化定制，打造独特的浏览器界面体验。