parent
d09eefb25e
commit
b36254ed1b
86
README.md
86
README.md
|
@ -1,12 +1,12 @@
|
|||
# Firefox Gnome Theme
|
||||
# Firefox GNOME Theme
|
||||
|
||||
![Screenshot of the theme](screenshot.png)
|
||||
|
||||
## Description
|
||||
|
||||
This is a bunch of CSS code to make Firefox 57+ look closer to GNOME's default
|
||||
theme. It styles the UI and, if you pick the dark variant, interal Firefox'
|
||||
pages like about: and view-source:. Both light and dark variants are supported.
|
||||
theme. It styles the UI and internal Firefox' pages like about: and
|
||||
view-source:. Both light and dark variants are supported.
|
||||
|
||||
## Installation
|
||||
|
||||
|
@ -14,40 +14,65 @@ 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:
|
||||
|
||||
1. Go to your Firefox profile's directory.
|
||||
2. Clone this repo to the `chrome` directory:
|
||||
1. Go to your Firefox profile's directory, if it's located in the default
|
||||
location, this should work:
|
||||
|
||||
```sh
|
||||
git clone 'https://github.com/kurogetsusai/firefox-gnome-theme.git' chrome
|
||||
cd ~/.mozilla/firefox/*.default
|
||||
```
|
||||
|
||||
3. Enable the theme in your `userChrome.css` file. Open it with your favorite
|
||||
text editor and follow instructions to enable one of the theme variants. You can
|
||||
also enable extra features here.
|
||||
2. Create a `chrome` directory if it doesn't exist.
|
||||
|
||||
The GTK theme variant must match the variant you picked for this Firefox
|
||||
```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
|
||||
theme, which means you must either enable (for the dark variant) or disable (for
|
||||
the light one) global dark theme in GNOME Tweak Tools, or alternativelly, you
|
||||
the light one) global dark theme in GNOME Tweak Tools, or alternatively, you
|
||||
can run Firefox with a specific variant without changing the global theme by
|
||||
supplying the GTK_THEME variable like this:
|
||||
|
||||
```sh
|
||||
# for the dark theme
|
||||
GTK_THEME=Adwaita:dark firefox
|
||||
|
||||
# for the light one
|
||||
GTK_THEME=Adwaita:light firefox
|
||||
```
|
||||
|
||||
4. Optionally you can enable styling of Firefox' internal pages in your
|
||||
`userContent.css` file.
|
||||
|
||||
You can also create `customChrome.css` and `customContent.css` files, which will
|
||||
be loaded after `userChrome.css` and `userContent.css` files. Everything you put
|
||||
in those files will survive updates, so you can use them to apply your own
|
||||
custom styles or copy the relevant `@import` lines to preserve your
|
||||
configuration. Remember all `@import`s must be at the top of the file (other
|
||||
rules are allowed below `@import` declarations).
|
||||
7. Optionally you can enable styling of Firefox' internal pages in the
|
||||
`userContent.css` file analogous to the `userChrome.css` file.
|
||||
|
||||
You might want to adjust your default link colors so they are more visible on
|
||||
dark background, either drop the code below into your
|
||||
|
@ -61,11 +86,12 @@ user_pref("browser.display.background_color", "#2e3436");
|
|||
user_pref("browser.display.foreground_color", "#ccc");
|
||||
```
|
||||
|
||||
You can't get rid of the title bar for now (except for Fedora I think, where you
|
||||
can enable CSD in about:config), but you will be able to do it when they add
|
||||
client-side decoration support. For now you can use a GNOME extension like
|
||||
[No Title Bar](https://extensions.gnome.org/extension/1267/no-title-bar/) to
|
||||
hide it.
|
||||
You can't get rid of the title bar for now (except for Fedora, where you can
|
||||
enable CSD in about:config), but you will be able to do it in Firefox 59, when
|
||||
Firefox adds client-side decoration support. For now you can use a GNOME
|
||||
extension like
|
||||
[No Title Bar](https://extensions.gnome.org/extension/1267/no-title-bar/)
|
||||
to hide it.
|
||||
|
||||
## Broken stuff
|
||||
|
||||
|
@ -73,13 +99,15 @@ 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`.
|
||||
|
||||
I haven't finished styling the new... new tab page. I just replaced it with a
|
||||
I haven't finished styling the new tab page. I just replaced it with a
|
||||
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`).
|
||||
|
||||
Probably more things are broken, it looks okay for me, feel free to report
|
||||
issues here on GitHub and share your ideas if you know how to fix them.
|
||||
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!
|
||||
|
||||
## Development
|
||||
|
||||
|
|
Loading…
Reference in New Issue