guerra24/firefox-uwp-style

Sun Valley + MDL2 Theme for Firefox

Firefox UWP Style

A theme that follows UWP styling.

Install

Select the appropriate file:

• Firefox Nightly
• Firefox 128-129
• Firefox 120-127

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 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)

firefox-uwp-style's Issues

UWP Design in Developer Console

Hey, this is a feature request: A UWP-style developer console [F12], if possible, would be a really great addition to this theme!
Btw really great work with this project :)

Can't get it to work

I'm using FF portable v.88 and I followed the install instructions. When restarting FF my tabs are all dark except the one in view but my backgrounds of all pages are still all white. I'm on Win7 64bit. Any tips?

Context menus not styled correctly on Linux

Guerra24 / Firefox-UWP-Style how do you change address and bookmark bars size

address and bookmark bars are to big how do you change there size and text size is menus is to small

No back button on YouTube's settings popup

as you can see no back button on top left

Small glitches in the sidebar.

In the sidebar of bookmarks and history there is a gray "bar"? below the search box.
The search box on the sidebar of the synchronized tabs has a white border.

Also, the synchronized tabs background sidebar is gray, instead of black

Remove the additional "box" from the previews in Ctrl + Tab

This is how it looks by default:

And that's how it looks with the Firefox-UWP-Style installed:

You can see that the thumbnails have an additional "black box" surrounding them, is that on purpose?

Minimise, Maximise, and Close aren't Aligned on Touch Density

There's not much else to say, but here's an image:

I know that some themes aren't meant to be used with higher densities, but even the "Normal" density has a gap...

...and the "Normal" density is much more compact than Edge...

...and other Fluent Design (especially Sun Valley/WinUI 3) applications.

Add fluent icons

Hi,
can you replace Firefox icons with Fluent ones?

Speaker icon overlaps website icon

The picture describes it all.

Notification Popups have a border

As you can see, there is a black section lining the top and far right sides of the popup:

This is due to

#alertNotification {
	padding: 8px 16px 0px 0px !important;
}

at line 531 in pagesChrome.css. By making them all 0px, the box popup looks fine. Is there any way to completely remove the padding on the top and right side, so that it doesn't overlap the scrollbar?

Problems with privacy.resistFingerprinting.letterboxing

Hey, I have a problem with your css.

I'm using librewolf and when I set privacy.resistFingerprinting.letterboxing to true the browser creates a fix resolution. This resolution works just fine when the browser is not themed, but when it's themed the resolution changes. I don't know why and don't know if this really affects my privacy. I made two new profiles to show that the problem isn't extra-config. The only settings I changed were the css settings for the theme works and the privacy.resistFingerprinting.letterboxing.

OS: Windows 10
Browser Version: 94.0.2-3
CSS Version: 89-95 (not the Nightly)

Images:
Not themed: https://vcr.pt/lYo2o
Themed: https://vcr.pt/Nu9CI

Mica is broken when switching light/dark theme

Mica keeps being light, while I've switched to dark theme. Restarting firefox applies the new theme, but when switching back to light Mica keeps being dark.

Example recording:
https://user-images.githubusercontent.com/9463142/164411021-6c01c808-e77a-4f65-b40b-f8c8bcdf615a.mp4

Blur not working in Firefox with Firefox-UWP-Style installed

Firefox version: 96.0.2 Stable Release
Platform: Windows 10 64-bit

I followed the instructions and was able to enable the newer 'Sun Valley' refresh. But the blur is not working for me.
I've set layout.css.backdrop-filter.enabled pref to true.

URL-bar suggestions have a non-alignment indicator

Best Firefox theme so far for me although there's bug as you can see.

Impossible to differentiate selected text from non-selected text in address bar when hovered over.

Since the address bar itself, when hovered over, and selected text share the same color, it's cumbersome to make sure you've selected the right characters when highlighting part of an address without first moving your mouse away from the bar to see what's been highlighted. Not really a bug, but would be a great ease of use if it were somehow differentiated.

Use fluent style icons instead of using default firefox icon style in ui

Support for Thunderbird 60

Tracking issue for thunderbird-60

Load userContent.css in about:* pages using JS

Firefox removed the code that loaded the file in the main process and broke the CSS in about:* pages. The only way now is to use JS, I will take a look into that ASAP.

Allow changing sidebar width

The width set by this style is good for extensions like tree tabs, but is way too small for some others. I suggest re-adding sizing the sidebar to compensate.

Alert in settings when extension needs containers unstyled

For example Mozilla's Container tabs extensions, among others like the one below

Unreadable text message in SSL error page when using light mode

Theme version: 0f58fc4
Firefox version: both Firefox 91 and Firefox 92
OS: Windows 10

When the theme is light, visiting a page that presents an SSL error page will cause the advanced section to be unreadable.

To replicate this,

1. Visit https://expired.badssl.com/
2. Use the Advanced... button in order to present additional site information.

Broken home tab on Firefox 73

A picture is better than a thousand words.

It is happening in the about:newtab page.

Tags in edit bookmark popup are black

The tags text in edit bookmark popup are black, the same color with background.

BTW, the permission operation text, "allow" or "deny", in site popup is also black.

The "List all tabs" button is only visible while hovered.

And its icon should be replaced for ./img/arrowdown.png

Bookmarks toolbar content issues

Hi, the distance between the text and the icon in the bookmarks toolbar is too tight, can you fix it? I think they should look like picture 2.

some thing is wrong with text size

Tab Animations

Tab-Bar animations seem to be turned off. My system has animations turned on, but the tab open/close animations and the tab load animations are not working.

Example, the static load symbol instead of the oscillating dot:

Minor changes to allow for customisation

Hi there,

Before I go on, thanks for this theme. I had been enjoying ShadowFox but since it's been unmaintained I went looking for an alternative, and am loving this.

I wanted to make a few customisations to the theme (eg. setting normal UWP toolbar heights rather than the oversized firefox default heights) but I don't want to do it in a way that I can't easily update the theme from here, at a later date, should you make any changes. Since you're using @import rules, that's pretty straightforward and this would be the first of the suggestions I'd like to make: place an @import rule to a user-modifiable file which would be missing in this repo but could be created by an individual.

There is one issue with that though: the root vars. In order to override these, which for many may just be a preference but is a necessity for me because my accent colour is black and I get a lot of black-on-black elements (an issue that UWP apps solve by overriding the accent colour to a dark shade of grey) the user customisation must occur after the theme-default vars are defined, but because you are using @import rules, they must precede all other rules including these definitions. The solution to this is simple: set the root vars in the top of the base.css/context.css files, instead. This would be my second suggestion.

If there's any interest in this I'd be happy to submit a PR, although perhaps you'd find it more straightforward to take care of it since it's two lines of code and two cut'n'pastes?

Cheers!

Menu buttons on new tab page displayed as grey boxes

This affects the menu buttons for each module, pinned sites, etc. That may be as intentioned, however it also affects the search bar's "search" button.

No background color under search engine icons when navigating with keyboard

When searching in address bar and selecting among search engines with arrow keys, there's blue background in default style, but no obvious visual change in Firefox-UWP-Style.


both screenshots with Amazon selected

url bar off center when search bar is present

hello, i'm using firefox 89.0.
when search bar is enabled:

when search bar is disabled:

thank you for building such a great theme!
and can you please fix this bug?

How to switch theme to sun valley?

Library treeview wrong colors

Nightly specific bug with the treeview, I still haven't checked the changes.

Black Bar under Address Bar

There's a black bar underneath the address bar whether the bookmark bar is enabled or not:

A problem with the startpage of Firefox

Hey, I'm having a problem in the default startpage of Firefox, the config button is incomplete. And, when I click on it, the buttons are too white.

OS: Windows 10
Firefox Version: 93.0

Extensions affected by style

When using this theme, certain extensions have graphics or overlays blocked out. You may not bother with fixing these, but I'll post here since they are pretty popular extensions. First, uBlock Origin's element picker overlay is completely black, preventing you from viewing your selection, eg.,
Without the style:

With the style:

Using S3.Translator results in its popup's button icons turning into black squares.

Lastly, this (from Protonmail's website) and presumably other iframes inherit a black background color if none is provided, making the text difficult to read without modifying it using a userstyle or other means

Implement Light color theme

This requires separating the color rules into a light.css and dark.css files, something like this:

• tags-dark.css
• tags-light.css
• base-dark.css
• base-light.css
• context-dark.css
• context-light.css
• pagesContent-dark.css
• pagesContent-light.css
• pagesChrome-dark.css
• pagesChrome-light.css

Only color rules will be separated. Also needs special handling for the scrollbars and forced tooltips.

The Light theme will be based on the 19H1's colors and only target Firefox 65+ due to more compatibility with Nightly's rules.

UI Improvements

After examining this userChrome, I can confidently say it is one of the best ways to merge Firefox with the Windows UI (especially Windows 11). But I've seen some inconsistencies, as given below.

1. The toolbar is too compact for me. I like to use the Normal mode, despite of what people say about the Proton redesign.
2. Ability to use custom themes is missing!
3. Tabs should be more rounded, like Microsoft Edge, or the default Proton tabs would look good enough.
4. The hamburger menu is shifted (a little bit) to the left. This makes no sense, and I guess it's a bug. (See attachment for reference.)
   
5. Some buttons bigger than expected.
   
   

Looking forward to the development of this project!

Round buttons in sidebar and findbar

Needs this:

.close-icon {
    border-radius: 0px !important;
}

Thanks mate :)

Adress Bar Selection Color

The address bar selection colour is same as the address bar, and this makes it difficult when mouse-over focus is not over the address-bar, e.g. while using suggestions in the address bar.

When the mouse-over focus is off:

When the mouse-over focus is on:

Adress bar color

Is it possible to change the adress bar color? The theme is perfect i just dont like the blend of adress bar with the rest, would love to change color \ same as when you over it with your mouse. Thanks

Content inside login autocomplete panel not showing

Text inside the login panel isn't showing

"Developer Tools" Bar styles buttons but nothing else

This theme interferes with developer tools so that the buttons are styled when they weren't meant to be. Here's a picture of the Inspector showing what I mean;

As you can see, the buttons are now dark, but still retain their black icons, making it look meesy and hard to see along with white gaps between this. This theme shouldn't modify the developer tools in my opinion, an exception being the scrollbars.

Report extension buggy dialog

To reproduce the issue:

1. Click the hamburger menu > Add-ons and themes.
2. Click Extensions.
3. Click on the three dots menu on any of the installed extensions.
4. Click Report.

Add-on dialog box window is transparent

Reading mode sidebar misstyled

The settings bar for reading mode has it's buttons squished up to the top. The sidebar itself is also white, when I think it should be styled darker to fit the theme.

Context menu rendering issues (black box around context menus)

There is a black box around all context menus when I right click anywhere (on the menu bar, bookmarks bar or the content).

However this is not present when opening (left clicking) the application menu/overflow menu on the top right.

I'm using Firefox beta v100 on Windows 11 beta build 22598.100. I am using the sunvalley theme with mica.

I have tried toggling gfx.webrender.dcomp-win.enabled and layout.css.backdrop-filter.enabled to no avail.

Also acrylic does not seem to be working anywhere with/out layout.css.backdrop-filter.enabled but mica is working fine.

I might also add there is a white bar at the bottom of the history popup (which goes away after resizing the window).

This theme is perfect except that issue, any fixes? Thanks

Style Scrollbars

Title.

Search for With overlaps elements and has not working buttons.