Project Icon

firefox-gnome-theme

Firefox现代GNOME风格主题

Firefox-GNOME-theme是一款遵循最新GNOME Adwaita风格的Firefox主题。通过CSS代码,使Firefox外观更贴近GNOME原生应用。主题提供自动安装脚本,支持多种安装方式,可在about:config中启用额外功能。同时兼容部分Firefox扩展,如Tab Center Reborn。项目由Rafael Mardojai CM基于Luna Kurame的工作开发而成。

Firefox GNOME 主题

Firefox GNOME 主题

GitHub 捐赠 Liberapay


一个适用于 Firefox 的 GNOME 主题

该主题遵循最新的 GNOME Adwaita 风格。

[!警告]

免责声明:

请注意,此主题可能会执行一些 Firefox 上游不支持的操作。如果您在使用此主题时遇到问题,请先在此处报告,或测试是否可以在原版 Firefox 中重现。

如果您是软件发行版的维护者,请不要默认为您的用户提供这些更改,除非您明确说明他们正在使用修改过的 Firefox 用户界面版本。

主题截图

描述

这是一组 CSS 代码,用于使 Firefox 看起来更接近 GNOME 的原生应用程序。

联系我们

Matrix 聊天室:#firefox-gnome-theme:matrix.org

Firefox 版本支持

本仓库的 master 分支支持当前 Firefox 稳定版本 129

与旧版 Firefox 兼容的主题版本被保留为 git 标签。

我们还有 betanightly 分支,用于仅适用于当前 Firefox beta 和 nightly 版本的修复。

安装

包管理器

Arch Linux

  1. 安装 AUR 包 firefox-gnome-theme
  2. 按照 cat /usr/share/doc/firefox-gnome-theme/INSTALL.md 中的说明操作

使用 curl 的一键安装

要安装此主题,您可以运行以下命令,该命令使用 curl 下载一个脚本,该脚本将下载主题的最新发布版本(非 master 版本)并为您运行自动安装脚本。

警告:从互联网运行脚本时务必小心。

curl -s -o- https://raw.githubusercontent.com/rafaelmardojai/firefox-gnome-theme/master/scripts/install-by-curl.sh | bash

安装脚本

如果您想使用稳定版以外的其他版本主题,可以手动下载主题并运行其安装脚本。

首先,您需要通过 git 克隆获取主题仓库的最新副本。

  1. 克隆此仓库并进入文件夹:

    git clone https://github.com/rafaelmardojai/firefox-gnome-theme.git
    cd firefox-gnome-theme
    
  2. 如果需要,切换到 git 分支或标签,否则使用 master 并忽略此步骤。

    git checkout beta # 设置 beta 分支
    git checkout v78.1 # 设置 v78.1 标签
    

除了 curl 安装外,此主题还提供了两个安装脚本。

自动安装脚本

此脚本将查找来自各个已知位置(~/.mozilla/firefox/、Flatpak、Snap 等)的 Firefox 配置文件,并在每个配置文件中安装主题。 如果存在 GTK 主题的颜色变体,它还会启用该变体。

您可以通过运行以下命令执行它:

./scripts/auto-install.sh

手动安装脚本

此脚本仅会将主题安装到默认 Firefox 文件夹 ~/.mozilla/firefox/ 中找到的配置文件中。该脚本接受各种标志来更改其行为。

以下是一些使用示例:

./scripts/install.sh # 标准
./scripts/install.sh -p pc8577yz.default-release # 仅安装到名为 pc8577yz.default-release 的配置文件
./scripts/install.sh -f ~/.var/app/org.mozilla.firefox/.mozilla/firefox # Flatpak
./scripts/install.sh -f ~/snap/firefox/common/.mozilla/firefox #Snap

脚本选项

  • -f <firefox_folder_path> 可选

    • 设置自定义 Firefox 文件夹路径,例如 ~/.mozilla/icecat/
    • 默认:~/.mozilla/firefox/
  • -p <profile_name> 可选

    • 设置自定义配置文件名称,例如 e0j6yb0p.default-nightly
    • 默认:Firefox 文件夹中找到的所有配置文件
  • -t <theme_name> 可选

    • 设置主题中使用的颜色。
    • 默认:Adwaita。
    • 选项:adwaitamaia
高级说明

高级说明

如果您想检出与您的 Firefox 版本匹配的主题版本标签,可以运行:

git checkout v$(firefox --version | cut -d ' ' -f 3 | cut -d '.' -f 1) # 使用 Firefox 版本
手动安装

手动安装

  1. 在 Firefox 中转到 about:support

  2. 应用程序基础 > 配置文件目录 > 打开目录。

  3. 在终端中打开目录。

  4. 如果不存在,创建 chrome 目录:

    mkdir -p chrome
    cd chrome
    
  5. 将此仓库克隆到子目录:

    git clone https://github.com/rafaelmardojai/firefox-gnome-theme.git
    
  6. 如果不存在或为空,创建单行用户 CSS 文件(至少需要一行用于 sed):

    [[ -s userChrome.css ]] || echo >> userChrome.css
    [[ -s userContent.css ]] || echo >> userContent.css
    
  7. 在 CSS 文件开头导入此主题(所有 @import 必须位于任何现有 @namespace 声明之前):

    sed -i '1s/^/@import "firefox-gnome-theme\/userChrome.css";\n/' userChrome.css
    sed -i '1s/^/@import "firefox-gnome-theme\/userContent.css";\n/' userContent.css
    
  8. 创建首选项文件的符号链接:

    cd .. # 返回到配置文件目录
    ln -fs chrome/firefox-gnome-theme/configuration/user.js user.js
    
  9. 重启 Firefox。

  10. 打开 Firefox 自定义面板,将新标签按钮移动到标题栏。

  11. 享受您崭新的 GNOME 风格 Firefox。

所需的 Firefox 首选项

我们在 configuration/user.js 中提供了一个 user.js 配置文件,该文件启用了此主题工作所需的一些首选项。

如果您按照上述安装方法之一进行操作,应该已经安装了此文件,但无论如何,请确保在 about:config 中启用了以下首选项:

  • toolkit.legacyUserProfileCustomizations.stylesheets

    此首选项用于在 Firefox 中加载自定义 CSS,否则主题将无法工作。

  • svg.context-properties.content.enabled

    此首选项用于重新着色图标,否则您将看到到处都是黑色图标。

对于其他非必需的首选项,请查看 configuration/user.js

更新

您可以再次按照安装脚本步骤更新主题。

卸载

  1. 转到您的配置文件文件夹。(在 Firefox 中转到 about:support > 应用程序基础 > 配置文件目录 > 打开目录)
  2. 删除 chrome 文件夹。
  3. 从配置文件文件夹中的 user.js 中删除不需要的首选项。安装脚本会在该文件中附加所需的首选项,您可以通过查看本仓库中的 configuration/user.js 来检查它附加了哪些首选项。

启用可选功能

可以通过在 about:config 中创建新的 boolean 首选项来启用可选功能。

  1. 转到 about:config 页面
  2. 输入您想要启用的功能的键
  3. 将其设置为 boolean 并点击添加按钮
  4. 重启 Firefox

功能

  • 隐藏单个标签 gnomeTheme.hideSingleTab

    当只打开一个标签时隐藏标签栏。

    注意: 您应该将新标签按钮移出标签栏,否则当只有一个标签时它将被隐藏。您可以通过右键单击任何工具栏并选择"自定义工具栏…"来重新排列工具栏。

    注意 2: 当使用 Simple Tab Groups 扩展等隐藏标签时,此功能不起作用。在这种情况下,CSS 无法判断只有一个可见标签。

  • 正常宽度标签 gnomeTheme.normalWidthTabs

    使用默认 Firefox 的正常宽度标签。

  • 交换标签页关闭按钮位置 gnomeTheme.swapTabClose

默认情况下,标签页关闭按钮跟随窗口控件的位置,此选项可以恢复原有行为。

  • 书签工具栏置于标签页下方 gnomeTheme.bookmarksToolbarUnderTabs

将书签工具栏移至标签页下方。

  • 活动标签页对比度 gnomeTheme.activeTabContrast

为活动标签页增加更多对比度。

  • 仅关闭选中的标签页 gnomeTheme.closeOnlySelectedTabs

仅在选中的标签页上显示关闭按钮。

  • 系统图标 gnomeTheme.systemIcons

使用系统主题图标而非主题自带的 Adwaita 图标。

注意: 此功能存在一个已知的颜色问题

  • 不使用主题图标 gnomeTheme.noThemedIcons

使用默认 Firefox 图标而非主题自带图标。

  • 符号化标签页图标 gnomeTheme.symbolicTabIcons

使所有标签页图标看起来像符号图标。

  • 隐藏 WebRTC 指示器 gnomeTheme.hideWebrtcIndicator

隐藏多余的 WebRTC 指示器,因为 GNOME 在右上角提供了自己的隐私图标。

  • 隐藏统一扩展按钮 gnomeTheme.hideUnifiedExtensions

从导航栏隐藏统一扩展按钮,您也可以使用 extensions.unifiedExtensions.enabled 代替,但这仅适用于 Firefox 111 之前的版本。

  • 从标题栏按钮拖动窗口 gnomeTheme.dragWindowHeaderbarButtons

允许从标题栏按钮拖动窗口。

注意: 此功能存在 BUG。它可能会意外激活按钮,导致不愉快的行为。

  • 将标签页作为标题栏 gnomeTheme.tabsAsHeaderbar

将标签页置于窗口顶部,并使用标签栏容纳窗口控件,类似 Firefox 的标准标签栏。

注意:gnomeTheme.hideSingleTab 一起启用时,将用标题栏替换单个标签页。

  • OLED 黑色主题 gnomeTheme.oledBlack

将深色主题改为黑色变体。

扩展支持

我们还提供了一些可选功能来支持某些 Firefox 扩展。

请注意,扩展支持由社区维护,因此不接受支持新扩展的请求,且现有支持可能会失效,直到有人修复。

  • Tab Center Reborn 支持 gnomeTheme.extensions.tabCenterReborn

通过扩展启用垂直标签页:Tab Center Reborn

注意: 您还需要将 configuration/extensions/tab-center-reborn.css 文件的内容复制到 Tab Center Reborn 的设置页面。
注意2: 您可以通过 gnomeTheme.extensions.tabCenterReborn.alwaysOpen 保持垂直标签页始终打开。
注意3: 您可以通过禁用扩展中的动画并添加 gnomeTheme.extensions.tabCenterReborn.animationDisabled 标志来禁用动画。

已知问题

CSD 有锐利的边角

参见上游Bug

Wayland 修复:

  1. 转到 about:config 页面
  2. 搜索 layers.acceleration.force-enabled 首选项并将其设置为 true。
  3. 重启 Firefox,问题应该解决了!

X11 修复:

  1. 转到 about:config 页面
  2. 输入 mozilla.widget.use-argb-visuals
  3. 将其设置为 boolean 并点击添加按钮
  4. 重启 Firefox,问题应该解决了!

使用系统图标时图标颜色错误

在某些系统上,原本应该是白色的图标可能会显示为黑色。我不清楚原因,但您可以直接在 system-icons.css 文件中调整它们,查找 --gnome-icons-hack-filter--gnome-window-icons-hack-filter 变量,并尝试调整 CSS 滤镜。

开发

如果您想修改样式并做些改变,以下信息可能会有用。

要使用检查器调试 UI,请在任意页面打开开发者工具(F12),转到选项,勾选以下两项:

  • 启用浏览器 chrome 和附加组件调试工具箱
  • 启用远程调试

现在您可以关闭这些工具,然后按 Ctrl+Alt+Shift+I 来检查浏览器 UI。

您还可以检查任何 GTK3 应用程序,例如在终端中输入以下命令,它将运行带有 GTK 检查器的 Epiphany,这样您也可以检查其元素的 CSS 样式。

GTK_DEBUG=interactive epiphany

欢迎使用我的代码的任何部分来开发您自己的主题,我不会对您的代码强加任何特定的许可证。

致谢

Rafael Mardojai CM贡献者开发。基于 Luna Kurame 的原始工作。

捐赠

如果您想支持开发,请考虑通过 PayPal 捐赠。也请考虑向上游项目 FirefoxGNOME 捐赠。

项目侧边栏1项目侧边栏2
推荐项目
Project Cover

豆包MarsCode

豆包 MarsCode 是一款革命性的编程助手,通过AI技术提供代码补全、单测生成、代码解释和智能问答等功能,支持100+编程语言,与主流编辑器无缝集成,显著提升开发效率和代码质量。

Project Cover

AI写歌

Suno AI是一个革命性的AI音乐创作平台,能在短短30秒内帮助用户创作出一首完整的歌曲。无论是寻找创作灵感还是需要快速制作音乐,Suno AI都是音乐爱好者和专业人士的理想选择。

Project Cover

有言AI

有言平台提供一站式AIGC视频创作解决方案,通过智能技术简化视频制作流程。无论是企业宣传还是个人分享,有言都能帮助用户快速、轻松地制作出专业级别的视频内容。

Project Cover

Kimi

Kimi AI助手提供多语言对话支持,能够阅读和理解用户上传的文件内容,解析网页信息,并结合搜索结果为用户提供详尽的答案。无论是日常咨询还是专业问题,Kimi都能以友好、专业的方式提供帮助。

Project Cover

阿里绘蛙

绘蛙是阿里巴巴集团推出的革命性AI电商营销平台。利用尖端人工智能技术,为商家提供一键生成商品图和营销文案的服务,显著提升内容创作效率和营销效果。适用于淘宝、天猫等电商平台,让商品第一时间被种草。

Project Cover

吐司

探索Tensor.Art平台的独特AI模型,免费访问各种图像生成与AI训练工具,从Stable Diffusion等基础模型开始,轻松实现创新图像生成。体验前沿的AI技术,推动个人和企业的创新发展。

Project Cover

SubCat字幕猫

SubCat字幕猫APP是一款创新的视频播放器,它将改变您观看视频的方式!SubCat结合了先进的人工智能技术,为您提供即时视频字幕翻译,无论是本地视频还是网络流媒体,让您轻松享受各种语言的内容。

Project Cover

美间AI

美间AI创意设计平台,利用前沿AI技术,为设计师和营销人员提供一站式设计解决方案。从智能海报到3D效果图,再到文案生成,美间让创意设计更简单、更高效。

Project Cover

AIWritePaper论文写作

AIWritePaper论文写作是一站式AI论文写作辅助工具,简化了选题、文献检索至论文撰写的整个过程。通过简单设定,平台可快速生成高质量论文大纲和全文,配合图表、参考文献等一应俱全,同时提供开题报告和答辩PPT等增值服务,保障数据安全,有效提升写作效率和论文质量。

投诉举报邮箱: service@vectorlightyear.com
@2024 懂AI·鲁ICP备2024100362号-6·鲁公网安备37021002001498号