2018-03-18 22:44:43 +02:00
|
|
|
# Firefox GNOME Theme
|
2019-06-02 18:37:29 +03:00
|
|
|
A GNOME theme for Firefox 60+.
|
|
|
|
|
|
|
|
*This theme follows lastest GNOME default gtk theme adwaita*
|
2017-12-02 01:18:56 +02:00
|
|
|
|
|
|
|
![Screenshot of the theme](screenshot.png)
|
2019-02-17 16:26:55 +02:00
|
|
|
![Screenshot of the theme](screenshot2.png)
|
2017-12-02 01:18:56 +02:00
|
|
|
|
|
|
|
## Description
|
|
|
|
|
2019-06-02 18:37:29 +03:00
|
|
|
This is a bunch of CSS code to make Firefox look closer to GNOME's default
|
2018-04-03 20:45:10 +03:00
|
|
|
theme. It styles the UI and internal Firefox' pages like `about:` and
|
|
|
|
`view-source:`. Both light and dark variants are supported.
|
2017-12-02 01:18:56 +02:00
|
|
|
|
2019-02-17 16:26:55 +02:00
|
|
|
The `master` branch track current Firefox stable. If you need support
|
2018-03-31 11:50:39 +03:00
|
|
|
for older versions, they are archived under version-specific git tags. Eg. if
|
|
|
|
you're using Firefox 57, switch to the `57` tag after cloning the repo:
|
|
|
|
|
|
|
|
```sh
|
|
|
|
git checkout 57
|
|
|
|
```
|
|
|
|
|
2017-12-02 01:18:56 +02:00
|
|
|
## Installation
|
|
|
|
|
|
|
|
Extensions can no longer style UI elements, but we can still use good old
|
|
|
|
`userChrome.css` and `userContent.css` files. Just drop this repo to your
|
|
|
|
`chrome` directory:
|
|
|
|
|
2018-03-18 22:44:43 +02:00
|
|
|
1. Go to your Firefox profile's directory, if it's located in the default
|
|
|
|
location, this should work:
|
2017-12-02 01:18:56 +02:00
|
|
|
|
2017-12-02 15:59:57 +02:00
|
|
|
```sh
|
2018-03-18 22:44:43 +02:00
|
|
|
cd ~/.mozilla/firefox/*.default
|
2017-12-02 15:59:57 +02:00
|
|
|
```
|
2017-12-02 01:18:56 +02:00
|
|
|
|
2018-03-18 22:44:43 +02:00
|
|
|
2. Create a `chrome` directory if it doesn't exist.
|
2017-12-15 04:35:21 +02:00
|
|
|
|
2018-03-18 22:44:43 +02:00
|
|
|
```sh
|
|
|
|
mkdir -p chrome
|
|
|
|
cd chrome
|
|
|
|
```
|
|
|
|
|
|
|
|
3. Clone this repo to a subdirectory:
|
|
|
|
|
|
|
|
```sh
|
|
|
|
git clone https://github.com/kurogetsusai/firefox-gnome-theme.git
|
|
|
|
```
|
|
|
|
|
|
|
|
4. Create single-line user CSS files if non-existent or empty (at least one line
|
|
|
|
is needed for `sed`):
|
|
|
|
|
|
|
|
```sh
|
|
|
|
[[ -s userChrome.css ]] || echo >> userChrome.css
|
|
|
|
[[ -s userContent.css ]] || echo >> userContent.css
|
|
|
|
```
|
|
|
|
|
|
|
|
5. Import this theme at the beginning of the CSS files (all `@import`s must come
|
|
|
|
before any existing `@namespace` declarations):
|
|
|
|
|
|
|
|
```sh
|
|
|
|
sed -i '1s/^/@import "firefox-gnome-theme\/userChrome.css";\n/' userChrome.css
|
|
|
|
sed -i '1s/^/@import "firefox-gnome-theme\/userContent.css";\n/' userContent.css
|
|
|
|
```
|
|
|
|
|
|
|
|
6. Enable the theme in the `firefox-gnome-theme/userChrome.css` file. Open it
|
|
|
|
with a text editor and follow instructions to enable one of the theme variants.
|
|
|
|
You can also enable extra features here. Keep in mind this file might change in
|
|
|
|
future versions and your configuration will be lost. You can copy the `@import`s
|
|
|
|
you want to enable to the `userChrome.css` file directly in your `chrome`
|
|
|
|
directory if you want it to survive updates. Remember all `@import`s must be at
|
|
|
|
the top of the file, before other statements.
|
|
|
|
|
|
|
|
The GTK theme variant must match the variant you picked for this Firefox
|
2017-12-04 21:52:50 +02:00
|
|
|
theme, which means you must either enable (for the dark variant) or disable (for
|
2018-03-18 22:44:43 +02:00
|
|
|
the light one) global dark theme in GNOME Tweak Tools, or alternatively, you
|
2017-12-04 21:52:50 +02:00
|
|
|
can run Firefox with a specific variant without changing the global theme by
|
2018-04-03 20:45:10 +03:00
|
|
|
supplying the `GTK_THEME` variable like this:
|
2017-12-02 01:18:56 +02:00
|
|
|
|
2017-12-04 21:52:50 +02:00
|
|
|
```sh
|
|
|
|
# for the dark theme
|
|
|
|
GTK_THEME=Adwaita:dark firefox
|
|
|
|
# for the light one
|
|
|
|
GTK_THEME=Adwaita:light firefox
|
|
|
|
```
|
|
|
|
|
2018-03-18 22:44:43 +02:00
|
|
|
7. Optionally you can enable styling of Firefox' internal pages in the
|
|
|
|
`userContent.css` file analogous to the `userChrome.css` file.
|
2017-12-15 05:54:53 +02:00
|
|
|
|
2017-12-02 01:18:56 +02:00
|
|
|
You might want to adjust your default link colors so they are more visible on
|
|
|
|
dark background, either drop the code below into your
|
|
|
|
`(firefox profile)/user.js` file or change them manually in `about:config`.
|
|
|
|
|
2017-12-02 15:59:57 +02:00
|
|
|
```js
|
|
|
|
user_pref("browser.active_color", "#cc1a1a");
|
|
|
|
user_pref("browser.anchor_color", "#0a8dff");
|
|
|
|
user_pref("browser.visited_color", "#0871cc");
|
|
|
|
user_pref("browser.display.background_color", "#2e3436");
|
|
|
|
user_pref("browser.display.foreground_color", "#ccc");
|
|
|
|
```
|
2017-12-02 01:18:56 +02:00
|
|
|
|
2018-03-18 22:44:43 +02:00
|
|
|
You can't get rid of the title bar for now (except for Fedora, where you can
|
2018-04-03 20:45:10 +03:00
|
|
|
enable CSD), but you will be able to do it in Firefox 60, when Firefox adds
|
2018-03-31 11:50:39 +03:00
|
|
|
client-side decoration support. For now you can use a GNOME extension like
|
2018-03-18 22:44:43 +02:00
|
|
|
[No Title Bar](https://extensions.gnome.org/extension/1267/no-title-bar/)
|
|
|
|
to hide it.
|
2017-12-02 01:18:56 +02:00
|
|
|
|
|
|
|
## Broken stuff
|
|
|
|
|
|
|
|
Icons might appear black where they should be white on some systems. I have no
|
|
|
|
idea why, but you can adjust them in the `ui/theme.css` file, look for
|
|
|
|
`filter: invert`.
|
|
|
|
|
2018-03-18 22:44:43 +02:00
|
|
|
I haven't finished styling the new tab page. I just replaced it with a
|
2017-12-02 01:18:56 +02:00
|
|
|
blank page, because I don't like all that clutter anyway, but feel free to
|
|
|
|
finish it yourself (my attempts are in the `userContent.css` file, look for
|
|
|
|
`about:newtab`).
|
|
|
|
|
2018-03-18 22:44:43 +02:00
|
|
|
Feel free to report issues here on GitHub and share your ideas if you know how
|
|
|
|
to fix them. Since I can't do everything alone, this project relies on
|
|
|
|
contributors, many existing features were added by our contributors, so don't
|
|
|
|
hesitate to become one of them!
|
2017-12-02 01:18:56 +02:00
|
|
|
|
|
|
|
## Development
|
|
|
|
|
2017-12-04 21:52:50 +02:00
|
|
|
If you wanna mess around the styles and change something, you might find these
|
|
|
|
things useful.
|
2017-12-02 01:18:56 +02:00
|
|
|
|
|
|
|
To use the Inspector to debug the UI, open the developer tools (F12) on any
|
|
|
|
page, go to options, check both of those:
|
|
|
|
|
2017-12-02 15:59:57 +02:00
|
|
|
- Enable browser chrome and add-on debugging toolboxes
|
|
|
|
- Enable remote debugging
|
2017-12-02 01:18:56 +02:00
|
|
|
|
|
|
|
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.
|
|
|
|
|
2017-12-02 15:59:57 +02:00
|
|
|
```sh
|
|
|
|
GTK_DEBUG=interactive epiphany
|
|
|
|
```
|
2017-12-02 01:18:56 +02:00
|
|
|
|
|
|
|
Feel free to use any parts of my code to develop your own themes, I don't force
|
|
|
|
any specific license on your code.
|