[Bug]: System accent theme doesn't match chrome colors

[cantunborn]

What happened?

After changing the theme from default dark to the system accent colors (which is picked from the windows accent color), the tab and toolbar don't have the same colors as chrome does on Windows 11. Chrome has more darkish and contrasty colors but material fox has more muted greyish colors.

Colors in chrome:

Colors in material fox:

Steps to reproduce

1. Download the system accent theme CSS file from here to the chrome/ folder in Firefox profile folder.
2. Set userChrome.theme-system-accent is about:config as true.
3. Open Firefox.

Additional info (Optional)

Firefox version: 131.0.3
Operating system: Windows 11

[edelvarden]

I can't reproduce your issue. Here's how it looks for me:

I simply added the contents of the theme-system-accent.css file to the custom css and set userChrome.theme-system-accent to true.

Anyway, this is just an example. I made this color theme for myself and wanted to remove it, but one user insisted I keep it and suggested separating it into different theme file. Feel free to edit the variables as you like.

[cantunborn]

Yeah, I could edit the variables. This would be a nice feature to add though, making the theme more consistent. Maybe you can check on the default windows 11 wallpaper, the difference is quite large.

Any tips on how you went about matching the colors would also work.

[edelvarden]

Maybe you can check on the default windows 11 wallpaper, the difference is quite large.

Any tips on how you went about matching the colors would also work.

I used color-mix to mix the default browser colors with the accent color, adjusting the percentages to achieve an acceptable shade. I also toned down the accent color by mixing with white/black, as some colors can be too bright, this is just for compatibility, but you can directly use AccentColor, which provides access to the system accent color from CSS.

[cantunborn]

I noticed something, if you right click the tab bar on firefox and then enable the title bar in the bottom left, you can see that chrome somehow uses that same color in its tab bar.

Is it possible to access this title bar color in firefox userchrome?

[cantunborn]

I just found the color value in this registry location: HKEY_CURRENT_USER\Software\Microsoft\Windows\DWM\ColorizationColor, not sure if it can be accessed inside userChrome.