A theme that follows UWP styling.
Select the appropriate file:
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.
The original 2015 UWP design. Follows MDL2 styling with the accent color and gray-on-black or gray-on-white elements.
Enabled by default.
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.
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.
Only supported on Firefox Nightly 133 and newer
Requires 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.
Create boolean uwp.sun-valley.mica
pref to enable.
Toggle browser.tabs.allow_transparent_browser
pref to enable transparency support in all pages.
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
.
If you want to override the accent color create two new prefs, both string type set to RGB Hex values.
ui.accentcolor
=#FF00FF
Accent color
ui.accentcolortext
=#FFFFFF
Text color when the background is the accent color.