Skip to content

smithfred/firefox-gnome-theme-3.26-layer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Firefox GNOME Theme 3.26 layer

Description

An add-on to https://github.com/kurogetsusai/firefox-gnome-theme with light and dark themes for GNOME 3.26, with additional, optional styling additions/ improvements:

  • Make the auto-complete dropdown width match the URL bar width.
  • GNOME-style auto-hiding scrollbars.
  • Use some additional stock icons.
  • Hide the tab bar when only one tab is open.
  • Use a white background for blank new tabs/windows.
  • CSD and number of window controls auto-detected (just need to select the Firefox version).
  • Hover styling for bookmark items on the CSD headerbar.

This add-on is designed to sit alongside firefox-gnome-theme, and add to/ override it as necessary.

Tested on Fedora 27/Firefox 59/GNOME 3.26.

As of 2018-02-15, using this add-on layer still gives a more accurate GNOME appearance than firefox-gnome-theme on its own.

Prep.

  • Set your theme via GNOME Tweaks to either Adwaita, or Adwaita-dark. "Global Dark Theme" doesn't work, and is being removed in GNOME 3.28. Alternatively, you can run Firefox with a specific variant without changing the global theme by supplying the GTK_THEME variable like this:

    # For the dark theme
    GTK_THEME=Adwaita:dark firefox
    # For the light theme
    GTK_THEME=Adwaita:light firefox
    
  • If using the default set of enabled features, you will need to:

    • Move Firefox's "new tab" button to the nav. bar first (since it's hidden when only one tab is open by the default-enabled "hide-single-tab.css".
    • Set browser.stopReloadAnimation.enabled to false in about:config (since the stop/reload buttons are replaced with the stock GNOME icons by the default-enabled "stock-icons.css".

Installation

  • In a terminal, go to the chrome directory inside your Firefox profile directory. IMPORTANT: this is NOT the same approach as firefox-gnome-theme. Instead this approach doesn't "take over" your primary userChrome/userContent files.

  • Clone the firefox-gnome-theme and firefox-gnome-theme-3.26-layer repos to their own subdirectories inside the chrome directory. and check out the correct reference commit of firefox-gnome-theme:

    git clone 'https://github.com/kurogetsusai/firefox-gnome-theme.git'
    git -C firefox-gnome-theme checkout ffafaff
    git clone 'https://github.com/smithfred/firefox-gnome-theme-3.26-layer.git'
  • If you don't have userChrome.css and userContent.css files, create them in the chrome directory. These can be used for any other arbitrary style changes you want to add later as well.

  • You will now have the following in the chrome directory:

    firefox-gnome-theme/
    firefox-gnome-theme-3.26-layer/
    userChrome.css
    userContent.css
    
  • At the very top of your userChrome.css, add:

    @import "firefox-gnome-theme-3.26-layer/userChrome.css";
  • At the very top of your userChrome.css, add:

    @import "firefox-gnome-theme/userContent.css";
  • Open firefox-gnome-theme-3.26-layer/userChrome.css with your favourite text editor and follow the instructions there to enable one of the theme variants. You can also enable extra features there.

  • You can also edit firefox-gnome-theme/userContent.css as needed.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published