Code Monkey home page Code Monkey logo

firefox-gnome-theme's Introduction

Firefox GNOME theme

Firefox GNOME theme

GitHub Donate Liberapay


A GNOME theme for Firefox

This theme follows latest GNOME Adwaita style.

Warning

Disclaimer:

Be aware that this theme might do things that are not supported by upstream Firefox. If you face an issue while using this theme, report it here first or test if it is reproducible in vanilla Firefox.

If you are a software distribution maintainer, please do not ship these changes by default to your users unless you make it extremely clear that they are using a modified version of the Firefox UI.

Screenshot of the theme

Description

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

Getting in Touch

Matrix room: #firefox-gnome-theme:matrix.org

Firefox versions support

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

Theme versions compatible with older Firefox releases are preserved as git tags.

We also have the beta and nightly branches for fixes only applicable to the current Firefox beta and nightly versions.

Installation

Package managers

Arch Linux

  1. Install the AUR package firefox-gnome-theme
  2. Follow the instructions at cat /usr/share/doc/firefox-gnome-theme/INSTALL.md

One command install with curl

To install this theme, you can run this command, which uses curl to download a script that will also download the latest released version of the theme (not the master version) and run the auto-install script for you.

Warning: Always be careful when running scripts from the Internet.

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

Installation scripts

If you want to use other version of the theme than the stable one you can manually download the theme and run its install scripts.

First you need to grab a fresh copy of the theme repository by cloning it with git.

  1. Clone this repo and enter folder:

    git clone https://github.com/rafaelmardojai/firefox-gnome-theme.git
    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

This theme provides two installation scripts in addition to the curled one.

Auto install script

This script will look for Firefox profiles from various known locations (~/.mozilla/firefox/, Flatpak, Snap, etc) and install the theme in each one. It will also enable a color variant for your GTK theme if it exists.

You can execute it by running:

./scripts/auto-install.sh

Manual install script

This script will only install the theme into the profiles found in the default Firefox folder ~/.mozilla/firefox/. The script accepts various flags to change its behavior.

Here are some examples of how to use it:

./scripts/install.sh # Standard
./scripts/install.sh -p pc8577yz.default-release # Only install in a profile named 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

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.
Advanced notes

Advanced notes

If you want to checkout the theme version tag matching you Firefox version you can run:

git checkout v$(firefox --version | cut -d ' ' -f 3 | cut -d '.' -f 1) # Using Firefox version
Manual installation

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
    [[ -s userContent.css ]] || echo >> userContent.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
    sed -i '1s/^/@import "firefox-gnome-theme\/userContent.css";\n/' userContent.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

You can follow the installation script steps again to update the theme.

Uninstalling

  1. Go to your profile folder. (Go to about:support in Firefox > Application Basics > Profile Directory > Open Directory)
  2. Remove chrome folder.
  3. Remove the unwanted preferences from your user.js inside your profile folder. The install script append the needed prefs in that file, you can check what preferences does it append by checking configuration/user.js in this repo.

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 out of the tabbar or it will be hidden when there is only one tab. You can rearrange the toolbars doing a right-click on any toolbar and selecting "Customize Toolbar…".

    Note 2: This feature doesn't work when tabs are hidden, like when using the Simple Tab Groups extension. In this case, there's no way to tell from CSS that there's only one visible tab.

  • Normal width tabs gnomeTheme.normalWidthTabs

    Use normal width tabs as default Firefox.

  • Swap tab close button position gnomeTheme.swapTabClose

    By default the tab close buttons follows the position of the window controls, this preference reverts that behavior.

  • Bookmarks toolbar under tabs gnomeTheme.bookmarksToolbarUnderTabs

    Move Bookmarks toolbar under tabs.

  • Active tab contrast gnomeTheme.activeTabContrast

    Add more contrast to the active tab.

  • Close only selected tabs gnomeTheme.closeOnlySelectedTabs

    Show the close button on the selected tab only.

  • System icons gnomeTheme.systemIcons

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

    Note: This feature has a known color bug.

  • No themed Icons gnomeTheme.noThemedIcons

    Use default Firefox icons instead of the included icons.

  • 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.

  • Hide unified extensions button gnomeTheme.hideUnifiedExtensions

    Hide unified extensions button from the navbar, you can also use extensions.unifiedExtensions.enabled instead, which is only going to work till Firefox 111.

  • Drag window from headerbar buttons gnomeTheme.dragWindowHeaderbarButtons

    Allow dragging the window from headerbar buttons.

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

  • Tabs as headerbar gnomeTheme.tabsAsHeaderbar

    Place the tabs on the top of the window, and use the tabs bar to hold the window controls, like Firefox's standard tab bar.

    Note: Enabling with gnomeTheme.hideSingleTab will replace the single tab with a title bar.

  • OLED black theme gnomeTheme.oledBlack

    Change the dark theme into the black variant.

Extensions support

We also have optional features to enable support for some Firefox extensions.

Be aware that extensions support are maintained by the community, so requests to support new extensions are not allowed and the included ones could get broken until someone shows up to fix them.

  • Tab center reborn support gnomeTheme.extensions.tabCenterReborn

    Enable the vertical tab trough the extension : Tab Center Reborn.

    Note: You also need to copy the contents of the file configuration/extensions/tab-center-reborn.css into the settings page of Tabcenter-reborn..
    Note2: You can also maintain the vertical tab always open with gnomeTheme.extensions.tabCenterReborn.alwaysOpen Note2: You can disable animation by disabling animation into the extension and adding the flags gnomeTheme.extensions.tabCenterReborn.animationDisabled

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 Luna Kurame's original work.

Donate

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

firefox-gnome-theme's People

Contributors

adryd325 avatar charosw avatar cleomenezesjr avatar commenter25 avatar dyegoaurelio avatar garrett avatar hellcp avatar lunakurame avatar lunaneff avatar majjejjam avatar markx86 avatar oscfdezdz avatar piousdeer avatar rafaelmardojai avatar rstanuwijaya avatar seadve avatar seungheonoh avatar shawntax avatar silejonu avatar soumyadghosh avatar stellarsand avatar svito3 avatar thelich132 avatar thuhtoosan avatar titaniumtown avatar tombursch avatar trevnels avatar tripleight avatar wroyca avatar zapsnh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

firefox-gnome-theme's Issues

Extension pop-ups have inconsistent white background

Pop-ups of extensions may have white background or background of other colors. Like this one:
Popup

Is there any way to make the white gray, or crop the original popups instead of adding borders with round corners?

Script Errors

This errors occurs when the auto install method is applied.

./scripts/install.sh: linha 26: cd: /home/arch/.mozilla/firefox//*.default: Arquivo ou diretório inexistente
Installing theme in /home/arch/Repositories/firefox-gnome-theme
Coping repo in /home/arch/Repositories/firefox-gnome-theme/chrome
cp: não é possível copiar um diretório, '/home/arch/Repositories/firefox-gnome-theme', para si próprio, '/home/arch/Repositories/firefox-gnome-theme/chrome/firefox-gnome-theme'
Enabling GNOMISH extra features
Set configuration user.js file
Done.

Instructions unclear

Do we clone the repo into the chrome folder, or do we just replace our userChrome.css with the one in this repo?

It looks like the userChrome.css is dependent on the themes folder in this repo, but you cannot tell this from the README.

Findbar content alignment

Textbox and next & previous buttons are not aligned as you can see, buttons are higher than textbox

Untitled

user.js

A user.js needs to be created.

Proof of concept:

// Enable customChrome.css
user_pref("toolkit.legacyUserProfileCustomizations.stylesheets", true);

// Enable CSD
user_pref("browser.tabs.drawInTitlebar", true);

Installation script should include a flag for dark mode (maybe -d), to add ui.systemUsesDarkTheme.

Issue dump 2

  • Sign/Account item in the hamburger menu is off-set when not logged in resulting in a blank space.
  • Container tab colors are no longer lines but instead circles
  • List all tabs has space on the left of the volume icon
  • Library and other items use black items on dark backgrounds
  • Broken back button functionality due to #14 (It normally can be dragged to show back history)
  • Block element item (From ublock origin) in context menu has more spacing than other items

I'll post screenshots if you need

Mozilla Account icon

I use Fedora 30, Firefox 67 and the latest firefox-gnome-theme. Mozilla account name is above the icon in the menu.

20190704192724

(Thanks for the project, I am really happy to use it)

Improvements/Issues dump

Broken :

  • Add Bookmark buttons look broken
  • Add Search engine option from address bar looks broken
  • Extensions like feeds use dark font on dark backgrounds
  • Volume button too close to X button
  • Bookmark animation is broken
  • 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)
  • Find view could be changed to be more similar to Epiphany's and other gnome programs
  • Results Not connected to URL bar and no limit to height like Epiphany has
  • Certificate information theming
  • Permission request buttons theming
  • Download overview theming

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

Dragging the headerbar buttons doesn't drag the window

I don't know if this can be implemented in the theme, but in GNOME applications, click+dragging a button in the headerbar drags the window, thus providing a larger draggable area. With this theme, if Firefox has a small window, the UI elements pack closely together, and the draggable area becomes quite small.

Download manager icons are too big

I use Fedora 30, Firefox 67 and the latest firefox-gnome-theme.

20190704192911

It is Download manager (sorry for Russian UI). The Back and Forward buttons are too big.

Empty space at the right side of tab bar

There's an empty space to the right of the tabs at all times, which doesn't seem to serve a purpose and makes the tab bar look uneven.

A screenshot depicting the issue.

The space does not seemingly represent an element which could be removed via ‘Customize…’ However, it does shrink to a smaller length when the window's width decreases significantly (to 400px or so).

I'm running GNU Icecat 60.7.2 (freed & tweaked Firefox), installed with the package manager GNU Guix on Parabola GNU+Linux-libre (freed Arch). I suppose the issue might stem from my somewhat odd setup, but am not sure. Please let me know if I can do anything to investigate further!

Bookmarks and History use dark background with bad readability

Thanks for fixing previous 2 issues so quickly.

Hope you didn’t mind if I will bring another small issue:

20190705155524
20190705155536

Here are Bookmarks and History side panel. In the light theme, it uses a dark gray background. Black is not really readable on this background.

The Close Tab Button Looks Ugly

Screenshot-20190715051421-138x124
The Close Tab button doesn't look good. The rectangle that shows up when the cursor hover over the button should be smaller and shouldn't border with the tab.
firefox-gnome-theme Close Tab

Installation script

Please test WIP installation script.

bash <(curl -s https://raw.githubusercontent.com/rafaelmardojai/firefox-gnome-theme/master/scripts/install.sh)

It optionally accepts flags:

  • -f $firefox_folder (Sets custom Firefox folder)
  • -p $profile_folder (Sets custom profile folder)
  • -g (Auto enable GNOMISH extra features hide-single-tab.css & matching-autocomplete-width.css)

For example this will work for flatpak and icecat:
bash <(curl -s https://raw.githubusercontent.com/rafaelmardojai/firefox-gnome-theme/master/scripts/install.sh) -f ~/.var/app/org.mozilla.FirefoxNightly/.mozilla/firefox/

bash <(curl -s https://raw.githubusercontent.com/rafaelmardojai/firefox-gnome-theme/master/scripts/install.sh) -f ~/.mozilla/icecat/

Nicely center findbar search field when sidebar is present

Hello, thanks for this theme!

I wanted to mention that the findbar's search field is nicely centered in an ordinary Firefox window, but it is no longer when you have a sidebar such as the bookmarks sidebar open.

It seems to always center itself on your screen, and not on the viewport of the site or the findbar's width.

Thanks!

Support diferent GTK themes

I use the Mojave-Light theme from gnome look and it doesn't use that theme. Any possibility for this to simply adopt the theme from the user instead of having Adwaita coded into it?

Window inactive issues

Latest Firefox on Wayland. Fedora. When dragging headerbar the window chrome becomes unfocused.

"List all tabs" button is invisible

The icon to list all tabs is missing when using Adwaita icons provided by the theme. I installed using the install script and the "-g" option. It looks like this.

Different active tab colors

For some reason, the active tab color is different for certain tabs (couldn't identify a pattern yet). At the first image below, it is good but at the second one it is hard to identify the active tab.

2019-07-17-174551_582x347_scrot
2019-07-17-174528_752x449_scrot

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.

Distribute patches

I think this is the way to go for easy installation.
New repo should be created to this purpose, and keep this repo as CSS source and theme-hack. (I'm also considering switch to sass/less, for a easy code maintenance and generate a single css file)

I have no idea about patching/packaging, so i'm asking for:

  • Figure out what needs to be put where.
  • Name proposals, we should rebrand Firefox to distribute it.
  • Package maintainers, to distribute css patches.

Inconsistent tab alignment when playing audio

First of all, thank you for the theme! I love it.

I noticed an inconsistency when you have a tab that is sharing your webcam. Definitely not a critical bug -- everything works fine -- but it threw me off for a split second.

Here's what the tab looks like when the tab is focused: (text is centered, all is well)
screenshot_2019-07-18-12:34:08

And here's what the tab looks like when it's unfocused: (text is left-aligned, unlike other tabs)
screenshot_2019-07-18-12:34:29

I'd expect the text to remain centered when the tab is unfocused, but it becomes left-aligned.

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)

Fix GNOME stack icons coloring issues

The headerbar buttons color need some improvements. they are greyed out. even with the dark theme enabled.

The headerbar buttons with light theme (they should be black like the reload button!!).
image image

The headerbar buttons with dark theme (they should be in white color!).
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.