Fox11
A Firefox CSS themes with auto-color, Mica, auto-hide nav-bar support. Inspired in firefox-one , Edge/Chrome restyle 2023.
How to install
-
Download theme/Repo or download from Github Releases
-
Open a new tab in firefox and write in url bar
about:support
you should see a list with your firefox data, You only need "Profile folder", you can now click in "Open folder" button o copy the address to your profile folder. the address should be similar to following example depend of your system:- Linux -
$HOME/.mozilla/firefox/XXXXXXX.default-XXXXXX/
- Windows 10 -
C:\Users\<USERNAME>\AppData\Roaming\Mozilla\Firefox\Profiles\XXX.default-XXX
- macOS -
Users/<USERNAME>/Library/Application Support/Firefox/Profiles/XXXXXXX.default-XXXXXXX
- Linux -
-
Go to that folder.
-
if there is no folder called
chrome
. Create it. -
Extract the contents of the zip file you downloaded in the first step into the folder `chrome
NOTE: You only need
userchrome.css
file andcomponents
folder- it should look something like this:
chrome/ |- userchrome.css |- components |- other files
-
Now go to firefox open a new tab and write
about:config
in the url bar -
A dialog will warn you, but ignore it, just do it press the
I accept the risk!
button. -
Search this
toolkit.legacyUserProfileCustomizations.stylesheets
and set to true . -
Restart Firefox
-
That's all, after restarting you should be seeing your new topic
How to enable Auto-color
Uncomment in userchrome.css
the plugin you use
comment in userchrome.css
the plugin you don't use
With VivaldiFox
This is more configurable, you can set theme color text in when web is ligth or dark, but the last update is a little bit old and slower than Adaptive Tab Bar Colour
Download VivaldiFox from Mozilla add-ons
Uncomment @importurl('components/vivaldifox.css');
in userchrome.css
Comment @import url('components/adaptative_tab_bar_color.css');
in userchrome.css
Configure Vivaldifox as the images you can find in this repository folder in Minimal-VivaldiFox-Theme/VivaldiFox config screenshots/
With Adaptive Tab Bar Colour
This is less configurable, you can NOT set theme color text in when web is ligth or dark ()It take firefox default color black/white). But it was updated in 10 de jul. de 2023 (at the moment to write this), can update theme color when you scroll down the website and is a little bit faster than VivaldiFox.
Download Adaptive Tab Bar Colour
Comment @importurl('components/vivaldifox.css');
in userchrome.css
Uncomment @import url('components/adaptative_tab_bar_color.css');
in userchrome.css
Configure like this:
How to enable Mica (Deprecate in Firefox 117 )
- Download the portable or installation file from github.com/MicaForEveryone.
- Install the extra files it asks you to install. And run the program.
- At the bottom left corner press
Add Rule
->Add Process Rule
, typefirefox
->add
. - On the left panel select and open
firefox
section. Change Mica toAcrilyc
for better blur effect. - Dont forget to uncomment
@importurl('components/mica_support.css');
fromuserChrome.css
How to disable Mica
- Delete firefox rule from Micaforeveryone
- Comment
@importurl('components/mica_support.css');
fromuserChrome.css
Test it in Win11 Test it in Manjaro KDE(maybe need ForceBlur in kwin scripts) [Firefox 117 broke transparencies in linux (tabbar border is not transparent). Fix WIP]
Thanks you to Firefox-csshacks for features code.