2020-08-20 00:44:42 +00:00
|
|
|
|
## Blurredfox Nord
|
2020-05-20 05:34:10 +00:00
|
|
|
|
|
2020-08-08 05:34:50 +00:00
|
|
|
|
### A modern Firefox CSS Theme
|
2020-05-20 05:34:10 +00:00
|
|
|
|
|
2020-08-20 00:44:42 +00:00
|
|
|
|
<p align="center"><img alt="Firefox with blurredfox" src="scrots/blurred.png"/><br/><i>Firefox with blurredfox CSS theme</i></p>
|
|
|
|
|
|
|
|
|
|
## What changes compared to the original project?
|
|
|
|
|
The original [blurredfox](https://github.com/manilarome/blurredfox/pulls) is
|
|
|
|
|
developed and maintained by [Gerome
|
|
|
|
|
Matilla](https://github.com/manilarome/blurredfox/pulls). The reason for the
|
|
|
|
|
existence of this fork is for me to have basically the same thing, but with a
|
|
|
|
|
customized color scheme. Turns out I am currently way too much into Nord, and I
|
|
|
|
|
changed the default colors to Nord-friendly colors. I will try to stay
|
|
|
|
|
up-to-date from time to time, but if you want something reliable, go take a look
|
|
|
|
|
at the original project.
|
2020-05-20 05:34:10 +00:00
|
|
|
|
|
2020-08-11 05:48:53 +00:00
|
|
|
|
## Requirements
|
|
|
|
|
|
2020-08-14 12:42:25 +00:00
|
|
|
|
+ The latest Firefox
|
2020-08-16 11:35:02 +00:00
|
|
|
|
+ Compositor with blur support (optional)
|
|
|
|
|
|
|
|
|
|
## Notes
|
|
|
|
|
|
|
|
|
|
+ 100% working on linux.
|
|
|
|
|
+ Untested on macOS.
|
2020-08-20 00:44:42 +00:00
|
|
|
|
+ Transparency is broken on Windows 10 (has graphical glitches like flickering).
|
|
|
|
|
The [solid color
|
|
|
|
|
scheme](https://github.com/manilarome/blurredfox/blob/master/colors/solid.css)
|
|
|
|
|
*may* work.
|
2020-08-11 05:48:53 +00:00
|
|
|
|
|
2020-05-20 05:34:10 +00:00
|
|
|
|
## How to
|
|
|
|
|
|
2020-08-14 12:42:25 +00:00
|
|
|
|
### Quick install for the linux lads
|
2020-05-20 05:34:10 +00:00
|
|
|
|
|
2020-08-15 07:51:37 +00:00
|
|
|
|
#### Notes before running the script:
|
|
|
|
|
|
2020-08-20 00:44:42 +00:00
|
|
|
|
+ If you have a multiple firefox builds, the script will still run without a
|
|
|
|
|
problem. Just make sure to pass your target firefox build.
|
|
|
|
|
+ If you or your firefox build have a multiple profile, the script will return
|
|
|
|
|
an error! Make sure you only have one!
|
2020-08-15 07:51:37 +00:00
|
|
|
|
+ It is advisible to check the script first before running it.
|
|
|
|
|
+ You need `bash` to run it.
|
2020-08-20 00:44:42 +00:00
|
|
|
|
+ If you have an existing chrome folder, the script will make a backup of it in
|
|
|
|
|
your profile directory.
|
|
|
|
|
+ If the installation script is not working, feel free to submit an issue or a
|
|
|
|
|
pull request.
|
|
|
|
|
+ The script will move a file named `user.js` that contains all the preferences
|
|
|
|
|
needed for blurredfox to work. If you have a current one, make sure to create
|
|
|
|
|
a backup.
|
|
|
|
|
|
|
|
|
|
1. Run the script below. If you are using a different build like nightly, beta,
|
|
|
|
|
etc., make sure to replace the 'stable' with the Firefox Build you are using.
|
|
|
|
|
If leave empty, it will default to stable.
|
2020-08-14 12:42:25 +00:00
|
|
|
|
|
|
|
|
|
```
|
2020-08-15 07:51:37 +00:00
|
|
|
|
# Available parameters:
|
|
|
|
|
# stable - Firefox Stable Build
|
|
|
|
|
# dev - Firefox Developer Edition
|
|
|
|
|
# beta - Firefox Beta
|
|
|
|
|
# nightly - Firefox Nightly
|
|
|
|
|
# esr - Firefox Extended Support Release
|
|
|
|
|
|
|
|
|
|
# Examples:
|
|
|
|
|
|
2020-08-14 12:42:25 +00:00
|
|
|
|
# Stable build's profile
|
2020-08-15 02:53:05 +00:00
|
|
|
|
$ curl -fsSL https://raw.githubusercontent.com/manilarome/blurredfox/script/install.sh |
|
|
|
|
|
bash -s -- stable
|
2020-08-14 12:42:25 +00:00
|
|
|
|
|
|
|
|
|
# Nightly build's profile
|
2020-08-15 02:53:05 +00:00
|
|
|
|
$ curl -fsSL https://raw.githubusercontent.com/manilarome/blurredfox/script/install.sh |
|
|
|
|
|
bash -s -- nightly
|
2020-08-14 12:42:25 +00:00
|
|
|
|
```
|
|
|
|
|
|
2020-08-20 00:44:42 +00:00
|
|
|
|
2. After the confirmation message that the theme is successfully installed, open
|
|
|
|
|
firefox. Change the colorscheme by **`Open Menu > Customize > Change
|
|
|
|
|
colorscheme`**.
|
2020-05-20 05:34:10 +00:00
|
|
|
|
|
2020-08-11 05:48:53 +00:00
|
|
|
|
### Manual Installation
|
|
|
|
|
|
|
|
|
|
1. Open `about:config` page.
|
2020-08-20 00:44:42 +00:00
|
|
|
|
2. A dialog will warn you, but ignore it, ~~just do it~~ press the `I accept the
|
|
|
|
|
risk!` button.
|
2020-08-11 05:48:53 +00:00
|
|
|
|
3. Search for these:
|
|
|
|
|
|
|
|
|
|
+ **`toolkit.legacyUserProfileCustomizations.stylesheets`**
|
|
|
|
|
+ **`layers.acceleration.force-enabled`**
|
|
|
|
|
+ **`gfx.webrender.all`**
|
|
|
|
|
+ **`gfx.webrender.enabled`**
|
|
|
|
|
+ **`layout.css.backdrop-filter.enabled`**
|
|
|
|
|
+ **`svg.context-properties.content.enabled`**
|
2020-05-20 05:34:10 +00:00
|
|
|
|
|
2020-08-20 00:44:42 +00:00
|
|
|
|
Then make sure to **enable them all!**. Or you can just copy the `user.js`
|
|
|
|
|
file to your profile.
|
2020-08-14 03:56:46 +00:00
|
|
|
|
|
|
|
|
|
4. Go to your Firefox profile.
|
2020-08-16 11:35:02 +00:00
|
|
|
|
|
2020-08-14 03:56:46 +00:00
|
|
|
|
+ Linux - `$HOME/.mozilla/firefox/XXXXXXX.default-XXXXXX/`.
|
|
|
|
|
+ Windows 10 - `C:\Users\<USERNAME>\AppData\Roaming\Mozilla\Firefox\Profiles\XXXXXXX.default-XXXXXX`.
|
|
|
|
|
+ macOS - `Users/<USERNAME>/Library/Application Support/Firefox/Profiles/XXXXXXX.default-XXXXXXX`.
|
|
|
|
|
|
2020-08-20 00:44:42 +00:00
|
|
|
|
5. Create a folder and name it **`chrome`**, then assuming that you already have
|
|
|
|
|
cloned this repo, just copy its content to the `chrome` folder.
|
2020-08-14 03:56:46 +00:00
|
|
|
|
6. Restart Firefox.
|
2020-08-16 11:35:02 +00:00
|
|
|
|
7. Finally, you can now change whatever color mode you want in the Cusomization Window.
|
2020-08-14 03:56:46 +00:00
|
|
|
|
|
|
|
|
|
+ Default - Uses system colors, but uses the theme's layout.
|
|
|
|
|
+ Dark - Dark colorscheme. Good for the night.
|
|
|
|
|
+ Light - Bright colorscheme. Good for killing the eyes.
|
2020-05-20 05:34:10 +00:00
|
|
|
|
|
2020-08-16 11:35:02 +00:00
|
|
|
|
## User Support
|
2020-05-20 05:34:10 +00:00
|
|
|
|
|
2020-08-16 11:35:02 +00:00
|
|
|
|
### Some UIs are broken!
|
2020-08-14 03:56:46 +00:00
|
|
|
|
|
2020-08-14 12:42:25 +00:00
|
|
|
|
1. Check if you're using the latest version of Firefox.
|
2020-08-20 00:44:42 +00:00
|
|
|
|
2. It's broken because you're using Windows 10 and macOS or you're using an
|
|
|
|
|
old version of Firefox.
|
2020-08-14 03:56:46 +00:00
|
|
|
|
|
2020-08-10 00:47:52 +00:00
|
|
|
|
### If you're using Windows or macOS and something's wrong
|
2020-05-20 05:34:10 +00:00
|
|
|
|
|
2020-08-20 00:44:42 +00:00
|
|
|
|
1. I only have Archlinux, macOS' untested while the theme is broken on Windows
|
|
|
|
|
10.
|
|
|
|
|
2. If the transparency is broken, use the [solid color
|
|
|
|
|
scheme](https://github.com/manilarome/blurredfox/blob/master/colors/solid.css).
|
|
|
|
|
Edit the `userChrome.css` to switch.
|
2020-08-14 03:56:46 +00:00
|
|
|
|
|
2020-08-16 11:35:02 +00:00
|
|
|
|
### Liar! The theme's name is `blurredfox`, ***where is the blur***?!
|
2020-08-02 07:44:33 +00:00
|
|
|
|
|
2020-08-20 00:44:42 +00:00
|
|
|
|
1. Yeah, the name `blurredfox` is a lie, just like the cake. I named it
|
|
|
|
|
blurredfox because it's designed to look gorgeous with a blur effect. You
|
|
|
|
|
can, however, have the blur effect by:
|
2020-08-02 07:44:33 +00:00
|
|
|
|
|
2020-08-14 03:56:46 +00:00
|
|
|
|
+ Making sure you have a compositor and it supports blur.
|
2020-08-20 00:44:42 +00:00
|
|
|
|
+ If you're not using GNOME or KDE Plasma that has its own compositors, use
|
|
|
|
|
tryone144's
|
|
|
|
|
[feature/dual_kawase](https://github.com/tryone144/picom/tree/feature/dual_kawase)
|
|
|
|
|
branch of picom, or ibaghwan’s [next](https://github.com/ibhagwan/picom)
|
|
|
|
|
branch. They both include the dual kawase shader, and the latter adds
|
|
|
|
|
rounded corners to windows.
|
|
|
|
|
+ GNOME's compositor, mutter, doesn't support blur. Hey, GNOME devs, it's
|
|
|
|
|
already 2020. Just kidding!
|
2020-08-14 03:56:46 +00:00
|
|
|
|
+ If you're using KDE Plasma, read the next note below.
|
2020-05-20 05:34:10 +00:00
|
|
|
|
|
2020-08-14 03:56:46 +00:00
|
|
|
|
### I'm using KDE Plasma, but there's no blur! How many other lies have I been told by the council?
|
2020-05-20 05:34:10 +00:00
|
|
|
|
|
2020-08-20 00:44:42 +00:00
|
|
|
|
1. Enable the blur in your compositor. Go to `System Settings > Desktop Effects
|
|
|
|
|
> Enable Blur`. Note that this will not enable the blur effect on all
|
|
|
|
|
applications.
|
|
|
|
|
2. Enable the blur effect on all applications by installing a KWin script called
|
|
|
|
|
[Force Blur](https://store.kde.org/p/1294604/). Make sure to read its manual.
|
|
|
|
|
Don't you ever dare to create an issue about Force Blur! Just kidding! But
|
|
|
|
|
yeah, I'm serious.
|
2020-08-14 03:56:46 +00:00
|
|
|
|
3. Go to `System Settings > KWin Scripts > Enable Force Blur`.
|
|
|
|
|
4. Change its settings. If there's no settings/settings icon, Logout. Re-login.
|
2020-05-20 05:34:10 +00:00
|
|
|
|
|
2020-08-14 03:56:46 +00:00
|
|
|
|
### Where is the scrollbar?
|
2020-05-20 05:34:10 +00:00
|
|
|
|
|
2020-08-14 03:56:46 +00:00
|
|
|
|
1. You can adjust the value of `scrollbar-width` in `userContent.css`.
|
|
|
|
|
2. Restart Firefox.
|
|
|
|
|
|
2020-08-16 11:35:02 +00:00
|
|
|
|
### How can I set or change the colors for the Default color mode?
|
|
|
|
|
|
2020-08-20 00:44:42 +00:00
|
|
|
|
1. The default mode are from Firefox and it uses the system colors. Although I
|
|
|
|
|
only tried and tested it with `GTK3`, it should work with any platforms or
|
|
|
|
|
environment as long as Firefox can detect your system colors.
|
2020-08-16 11:35:02 +00:00
|
|
|
|
|
|
|
|
|
|
2020-08-14 03:56:46 +00:00
|
|
|
|
### I hate the colors! Why is everything transparent?!
|
|
|
|
|
|
2020-08-20 00:44:42 +00:00
|
|
|
|
1. Use the [solid color
|
|
|
|
|
scheme](https://github.com/manilarome/blurredfox/blob/master/colors/solid.css)
|
|
|
|
|
by editing the `userChrome.css`.
|
2020-08-16 11:35:02 +00:00
|
|
|
|
2. You can change the colors yourself.
|
2020-08-20 00:44:42 +00:00
|
|
|
|
3. The transparency is only applied to `Dark` and `Light` mode under the blurred
|
|
|
|
|
color scheme. `No transparency == No blur`.
|
2020-08-16 11:35:02 +00:00
|
|
|
|
4. You can read the next point.
|
2020-08-14 03:56:46 +00:00
|
|
|
|
|
2020-08-16 11:35:02 +00:00
|
|
|
|
### Uninstall this now!
|
2020-08-14 12:42:25 +00:00
|
|
|
|
|
2020-08-16 11:35:02 +00:00
|
|
|
|
1. Go to your profile directory.
|
|
|
|
|
2. Delete the `chrome` folder.
|
2020-08-20 00:44:42 +00:00
|
|
|
|
3. If you used the installation script or copied the `user.js` to your profile,
|
|
|
|
|
delete it.
|
2020-08-16 11:35:02 +00:00
|
|
|
|
4. Sayonara.
|
2020-08-14 12:42:25 +00:00
|
|
|
|
|
2020-08-14 03:56:46 +00:00
|
|
|
|
## Got a problem?
|
|
|
|
|
|
2020-08-20 00:44:42 +00:00
|
|
|
|
If you have already read the README, free to open an issue
|
|
|
|
|
[here](https://github.com/phundrak/blurredfox/issues)! But you’ll probably have
|
|
|
|
|
more luck with the original project, link at the top of this README.
|
2020-08-10 00:47:52 +00:00
|
|
|
|
|
2020-08-14 03:56:46 +00:00
|
|
|
|
## Got a patch?
|
2020-08-10 00:47:52 +00:00
|
|
|
|
|
2020-08-20 00:44:42 +00:00
|
|
|
|
You're absolutely welcome to submit a pull request
|
|
|
|
|
[here](https://github.com/manilarome/phundrak/pulls)!
|
2020-08-10 00:47:52 +00:00
|
|
|
|
|
|
|
|
|
## TODO
|
|
|
|
|
|
2020-08-20 00:44:42 +00:00
|
|
|
|
PR's are welcome! (Although I’ll let it mostly up to the original author)
|
2020-08-10 00:47:52 +00:00
|
|
|
|
|
2020-08-14 03:56:46 +00:00
|
|
|
|
- [ ] Render site content under the navbar like macOS
|
|
|
|
|
- [ ] Fix UI inconsistencies
|
2020-08-10 00:53:05 +00:00
|
|
|
|
- [ ] Better CSS
|