A GNOME👣 theme for Firefox🔥

  • By Rafael Mardojai CM
  • Last update: Dec 2, 2022
  • Comments: 14

Firefox GNOME theme
Firefox GNOME theme

GitHub Donate Liberapay

A GNOME theme for Firefox

This theme follows lastest GNOME Adwaita style.

Screenshot of the theme

Description

This is a bunch of CSS code to make Firefox look closer to GNOME's native apps.

Firefox versions support

The master branch of this repo supports the current Firefox stable release 95.

Theme versions complatible with older Firefox releases are preserved as git tags. Use the v78.1 tag for Firefox 78 ESR support.

We also have the beta branch for fixes only aplicable to the current Firefox beta version.

Installation

Installation script

  1. Clone this repo and enter folder:

    git clone https://github.com/rafaelmardojai/firefox-gnome-theme && cd firefox-gnome-theme
  2. Checkout a git branch or tag if needed, otherwise use master and ignore this step.

    git checkout beta # Set beta branch 
    git checkout v78.1 # Set v78.1 tag 
  3. Run installation script

    Auto install script

    This script will lookup Firefox profiles location and enable a theme variant for your GTK theme if it exists.

    ./scripts/auto-install.sh

    Install script

    ./scripts/install.sh # Standard
    ./scripts/install.sh -f ~/.var/app/org.mozilla.firefox/.mozilla/firefox # Flatpak
    Script options
    • -f <firefox_folder_path> optional

      • Set custom Firefox folder path, for example ~/.mozilla/icecat/.
      • Default: ~/.mozilla/firefox/
    • -p <profile_name> optional

      • Set custom profile name, for example e0j6yb0p.default-nightly.
      • Default: All the profiles found in the firefox folder
    • -t <theme_name> optional

      • Set the colors used in the theme.
      • Default: Adwaita.
      • Options: adwaita, maia, yaru.

One command curled script

You can also install this theme with one command:

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

It will download the latest version of the theme and run the auto installation script for you.

Manual installation

  1. Go to about:support in Firefox.

  2. Application Basics > Profile Directory > Open Directory.

  3. Open directory in a terminal.

  4. Create a chrome directory if it doesn't exist:

    mkdir -p chrome
    cd chrome
  5. Clone this repo to a subdirectory:

    git clone https://github.com/rafaelmardojai/firefox-gnome-theme.git
  6. Create single-line user CSS files if non-existent or empty (at least one line is needed for sed):

    [[ -s userChrome.css ]] || echo >> userChrome.css
  7. Import this theme at the beginning of the CSS files (all @imports must come before any existing @namespace declarations):

    sed -i '1s/^/@import "firefox-gnome-theme\/userChrome.css";\n/' userChrome.css
  8. Symlink preferences file:

    cd .. # Go back to the profile directory
    ln -fs chrome/firefox-gnome-theme/configuration/user.js user.js
  9. Restart Firefox.

  10. Open Firefox customization panel and move the new tab button to headerbar.

  11. Be happy with your new gnomish Firefox.

Required Firefox preferences

We provide a user.js configuration file in configuration/user.js that enable some preferences required by this theme to work.

You should already have this file installed if you followed one of the installation methods, but in any case be sure this preferences are enabled under about:config:

  • toolkit.legacyUserProfileCustomizations.stylesheets

    This preference is required to load the custom CSS in Firefox, otherwise the theme wouldn't work.

  • svg.context-properties.content.enabled

    This preference is required to recolor the icons, otherwise you will get black icons everywhere.

For other non essential preferences checkout configuration/user.js.

Updating

Both manual and script installation methods should create a git clone in your-profile-folder-path/chrome/firefox-gnome-theme, so the easiet way to update the theme is to open this folder in terminal and perform a git pull.

git pull origin master

Note: You can also run the installation script again to update (after cloning again the repo).

Uninstalling

  1. Go to your profile folder. (Go to about:support in Firefox > Application Basics > Profile Directory > Open Directory)
  2. Remove chrome folder.

Enabling optional features

Optional features can be enabled by creating new boolean preferences in about:config.

  1. Go to the about:config page
  2. Type the key of the feature you want to enable
  3. Set it as a boolean and click on the add button
  4. Restart Firefox

Features

  • Hide single tab gnomeTheme.hideSingleTab

    Hide the tab bar when only one tab is open.

    Note: You should move the new tab button somewhere else for this to work, because by default it is on the tab bar too. See #54.

  • Spinner gnomeTheme.spinner

    Use the GNOME spinner for tabs loading.

    Note: This is optional because Firefox has issues rendering the spinner SVG:

    GTK Spinner
  • Normal width tabs gnomeTheme.normalWidthTabs

    Use normal width tabs as default Firefox.

  • Bookmarks toolbar under tabs gnomeTheme.bookmarksToolbarUnderTabs

    Move Bookmarks toolbar under tabs.

  • Active tab contrast gnomeTheme.activeTabContrast

    Add more contrast to the active tab.

  • System icons gnomeTheme.systemIcons

    Use system theme icons instead of Adwaita icons included by theme.

    Note: This feature has a known color bug.

  • Symbolic tab icons gnomeTheme.symbolicTabIcons

    Make all tab icons look kinda like symbolic icons.

  • Hide WebRTC indicator gnomeTheme.hideWebrtcIndicator

    Hide redundant WebRTC indicator since GNOME provides their own privacy icons in the top right.

  • Drag window from headerbar buttons gnomeTheme.dragWindowHeaderbarButtons

    Allow draging the window from headerbar buttons.

    Note: This feature is BUGGED. It can activate the button with unpleasant behavior.

Known bugs

CSD have sharp corners

See upstream bug.

Wayland fix:

  1. Go to the about:config page
  2. Search for the layers.acceleration.force-enabled preference and set it to true.
  3. Now restart Firefox, and it should look good!

X11 fix:

  1. Go to the about:config page
  2. Type mozilla.widget.use-argb-visuals
  3. Set it as a boolean and click on the add button
  4. Now restart Firefox, and it should look good!

Icons color broken with System icons

Icons might appear black where they should be white on some systems. I have no idea why, but you can adjust them directly in the system-icons.css file, look for --gnome-icons-hack-filter & --gnome-window-icons-hack-filter vars and play with css filters.

Development

If you wanna mess around the styles and change something, you might find these things useful.

To use the Inspector to debug the UI, open the developer tools (F12) on any page, go to options, check both of those:

  • Enable browser chrome and add-on debugging toolboxes
  • Enable remote debugging

Now you can close those tools and press Ctrl+Alt+Shift+I to Inspect the browser UI.

Also you can inspect any GTK3 application, for example type this into a terminal and it will run Epiphany with the GTK Inspector, so you can check the CSS styles of its elements too.

GTK_DEBUG=interactive epiphany

Feel free to use any parts of my code to develop your own themes, I don't force any specific license on your code.

Credits

Developed by Rafael Mardojai CM and contributors. Based on Sai Kurogetsu original work.

Donate

If you want to support development, consider donating via PayPal. Also consider donating upstream, Firefox & GNOME.

Github

https://github.com/rafaelmardojai/firefox-gnome-theme

Comments(14)

  • 1

    Customisation help wanted

    I have edited dark.css and enabled system icons and like it so far : Screenshot from 2020-05-09 10-40-29 ~~1) How do I change colours and disable borders only for headerbar CSD buttons?~~ 2) How do I use the maximise/minimise/close buttons from my system GTK theme (and possibly use all assets from the theme)? 3) How do I use a separate file for my edited dark.css (name it dracula.css or something and add it to gitignore?) for easy updates w/o conflicts?

  • 2

    Improvements/Issues dump

    Broken :

    • [x] Add Bookmark buttons look broken
    • [x] Add Search engine option from address bar looks broken
    • [ ] ~Extensions like feeds use dark font on dark backgrounds~
    • [x] Volume button too close to X button
    • [x] Bookmark animation is broken
    • [x] Dropdown selected tab with blue line gets obscured when hovering

    Improvements :

    • [ ] ~Scrollbar theming (it's not dark on dark mode and doesn't act like GTK programs)~
    • [x] Find view could be changed to be more similar to Epiphany's and other gnome programs
    • [x] Results Not connected to URL bar and no limit to height like Epiphany has
    • [x] Certificate information theming
    • [x] Permission request buttons theming
    • [x] Download overview theming

    I didn't create an issue for each since I thought it'd be be too much

  • 3

    Close, Minimize, & Maximize buttons

    Hi I noticed that in some of the pictures there are the system icons for closing, minimizing, and maximizing (without using a titlebar). How do I enable that (I am not using the default Adwaita theme, am using system icons).

  • 4

    Dropping gnome-icons.css

    Soon GNOME icons will be included in theme as SVG to fix #8. And Adwaita icon theme will be "hardcoded".

    So gnome-icons.css main functionality will be included by default.

    But I'm considering create system-icons.css, with similar functionality, for the ones not using Adwaita icons and want to use their system icon theme. But facing moz-icon://stock/ issues.

  • 5

    Theme variants behavior

    I have discover the @media (prefers-color-scheme: dark/light) media query. So now we have a way to detect if host theme is light or dark when default theme is selected in Firefox.

    Should we keep support for Firefox light/dark theme selector? (:-moz-lwtheme and :-moz-lwtheme-brighttext pseudo classes)

  • 6

    Libadwaita

    Sidebar compared to Files: Skärmbild från 2022-01-14 11-24-23 Skärmbild från 2022-01-14 11-24-40

    Tab border compared to Text Editor: Skärmbild från 2022-01-14 11-22-18 Skärmbild från 2022-01-14 11-27-29 (Its inactive color differs, but I didn't manage to change that.)

    Acitve/inactive headerbar and entrybar compared to Files: Skärmbild från 2022-01-14 10-36-11 Skärmbild från 2022-01-14 10-56-15 Skärmbild från 2022-01-14 11-07-52 Skärmbild från 2022-01-14 10-56-19

    I don't know how to the remove the stripes from the development build of Files. I sampled colors from the light striped areas. I took Files to be the best place to sample colors from as it has sort of an entry bar.

  • 7

    A few weird issues with menus

    Hi!

    I'm terribly sorry if this is because I'm running firefox nightly, or perhaps one of my addons, but there's a few issues with menus that I'd like to present for your consideration.

    In the application menu itself there seems to be a lot of padding/margin missing; appmenu

    And in the context menu there appears to be two "frames" around it, and also the colors are slightly different but that might be intended; contextmenu

    Thank you for the excellent work. I love it, and I've been using it since the first release :-)

  • 8

    Error entering profile folder?

    Hi!

    This is what I get when I try to run the install.sh script for my firefox 68.0 on Fedora:

    "./install.sh: line 26: cd: too many arguments Error entering profile folder."

    How to fix this? I would love to use this "theme"... :(

  • 9

    libadwaita coloring

    Hi, libadwaita supports changing the colors of stuff using the @define-color at-rule in XDG-CONFIG/gtk-4.0/gtk.css, I was thinking if there was a way for this theme to also match that. Here is an example of what I have:

    @define-color window_bg_color #1e1f29;
    @define-color window_fg_color #f8f8f2;
    @define-color view_bg_color #282a36;
    @define-color view_fg_color @window_fg_color;
    @define-color accent_bg_color #bd93f9;
    @define-color accent_color @accent_bg_color;
    @define-color headerbar_bg_color @window_bg_color;
    @define-color headerbar_fg_color @window_fg_color;
    @define-color popover_bg_color #44475a;
    @define-color popover_fg_color @view_fg_color;
    @define-color card_bg_color rgba(255, 255, 255, 0.08);
    @define-color card_fg_color @window_fg_color;
    

    Thanks for this great theme!

  • 10

    Tabs bar above everything

    Small feature request,

    I am loving the theme and although it follows the gnome hid by placing the tab bar below the other bars, I think there should be an option to leave the tabs up top.

    It's been years of muscle memory to just slam my mouse to the top of the screen and pan in the X axis exclusively to pick a tab. The first row of pixels on the screen should be occupied by tabs (mozilla devs actually broke this few times in firefox over the years in the big toolkit/theme rewrites, but it lives on)

  • 11

    [wayland] Drop-down sections in address bar don't display

    Most of the buttons in the address bar don't display anything when clicked. This includes the shield and padlock buttons on the left, plus Firefox recommendations and other extensions on the right (but, the bookmark button does work).

    I'm running on Ubuntu 20.04 with Wayland.

  • 12

    Private windows in Firefox 106

    Private windows in Firefox 106 are now supposed to always be dark. With this theme, the page remains light, which is a visual issue. You can fix this by restoring the behaviour to the previous version through setting browser.theme.dark-private-windows to false in about:config, but it would be nice if the theme supported the new behaviour

  • 13

    Arrows next to tree items are inverted

    Arrows next to directories in tree view are inverted: opened directories have an arrow pointing towards them, unopened directories have an arrow pointing downwards.

    The arrows in this picture should point downwards: Screenshot from 2022-11-08 21-18-43

    The arrows in this picture should point rightwards: Screenshot from 2022-11-08 21-26-37

  • 14

    auto-install.sh replaces user.js if it already exists

    I use a custom user.js to disable telemetry and other stuff like that and when I install the Firefox Gnome theme, it replaces user.js (it asks for this before replacing). I think the script's strategy should be like this: create a new one if it doesn't exist, or append own data to the end of an existing file without erasing user data.