Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/guerra24/firefox-uwp-style
Sun Valley + MDL2 Theme for Firefox
https://github.com/guerra24/firefox-uwp-style
css dark-theme firefox firefox-css firefox-theme light-theme mdl2 sun-valley theme userchrome userchromecss usercontentcss windows-11
Last synced: about 1 month ago
JSON representation
Sun Valley + MDL2 Theme for Firefox
- Host: GitHub
- URL: https://github.com/guerra24/firefox-uwp-style
- Owner: Guerra24
- License: mit
- Created: 2018-02-06T02:16:02.000Z (almost 7 years ago)
- Default Branch: nightly
- Last Pushed: 2024-10-11T05:47:04.000Z (about 1 month ago)
- Last Synced: 2024-10-11T14:22:08.910Z (about 1 month ago)
- Topics: css, dark-theme, firefox, firefox-css, firefox-theme, light-theme, mdl2, sun-valley, theme, userchrome, userchromecss, usercontentcss, windows-11
- Language: CSS
- Homepage:
- Size: 1.32 MB
- Stars: 400
- Watchers: 13
- Forks: 9
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Firefox UWP Style
A theme that follows UWP styling.
## Install
Select the appropriate file:
- [Firefox Nightly](https://github.com/Guerra24/Firefox-UWP-Style/archive/refs/heads/nightly.zip)
- [Firefox 128-129](https://github.com/Guerra24/Firefox-UWP-Style/archive/refs/heads/firefox-128.zip)
- [Firefox 120-127](https://github.com/Guerra24/Firefox-UWP-Style/archive/refs/heads/firefox-120.zip)
Copy the content inside the folder where userChrome.css file is located into your *chrome* folder.
Toggle `toolkit.legacyUserProfileCustomizations.stylesheets` pref in `about:config` and restart Firefox.
## Styles
### MDL2
The original 2015 UWP design. Follows MDL2 styling with the accent color and gray-on-black or gray-on-white elements.
Enabled by default.
### Sun Valley
The 2021 Fluent Design refresh. Features heavy use of rounded corners and smoother colors.
Create boolean `uwp.sun-valley` pref to enable.
Create boolean `uwp.sun-valley.font` pref to enable Segoe UI Variable.
Create boolean `uwp.sun-valley.round-tabs` pref to enable rounded tabs.
Create boolean `uwp.sun-valley.colored-tabs` pref to enable colored tabs. It uses the container color or the accent color in default tabs. Only works with rounded tabs since the default ones have the tab line.
## Customize
Toggle `layout.css.backdrop-filter.enabled` pref to enable *acrylic blur* in some menus.
Toggle `widget.non-native-theme.use-theme-accent` pref to enable accent color in all *about:\** pages.
### Mica (WIP)
**Not supported after Firefox 116**
Requires [MicaForEveryone](https://github.com/MicaForEveryone/MicaForEveryone) and only works with *Sun Valley* style
In MicaForEveryone create a process rule and select `firefox` then set the backdrop type to your preferred one and titlebar to *System*.
Create boolean `uwp.sun-valley.mica` pref to enable.
### Custom CSS
If you want to change any rules use `customChrome.css` and `customContent.css`.
All the theme vars `--uwp-*` can be overridden, Firefox vars too but only if they are not set using `!important`.
### Accent Color
If you want to override the accent color create two new prefs, both string type set to RGB Hex values.
#### Firefox 102 and older
`ui.-moz-accent-color`=`#FF00FF` Accent color
`ui.-moz-accent-color-foreground`=`#FFFFFF` Text color when the background is the accent color.
#### Firefox 103 and newer
`ui.accentcolor`=`#FF00FF` Accent color
`ui.accentcolortext`=`#FFFFFF` Text color when the background is the accent color.
## Screenshots (Sun Valley)
