Firefox UWP Style

A theme that follows UWP styling.

Install

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.

Toggle layout.css.backdrop-filter.enabled pref to enable acrylic blur in some menus.

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 and titlebar to System.

Create boolean uwp.sun-valley.mica pref to enable.

On Nightly disable gfx.webrender.dcomp-win.enabled since it causes rendering issues.

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.-moz-accent-color=#FF00FF Accent color

ui.-moz-accent-color-foreground=#FFFFFF Text color when the background is the accent color.

ui.accentcolor=#FF00FF Accent color

ui.accentcolortext=#FFFFFF Text color when the background is the accent color.