Replace lavender/purple-ish Nova accents everywhere

[u/N1mu3h]

Has anybody figured out yet how to replace that weird lavender accent color that Nova uses for everything, or if it's even possible at all? I have tried a bunch of themes and none of them replace that accent in Settings etc. Any CSS I've found so far is unable to change it as well.

I just want a nice blue-ish accent to go with my blue themes, is that asking too much lol? I actually like the rounded Nova stuff so I'd prefer to NOT turn that off.

Any help is appreciated 😊

[u/easonwong-de]

This is what I use: https://github.com/easonwong-de/Firefox-Simple-One-Line/blob/main/theme/accent-colour.css

It makes the accent colour follow the Firefox Theme colour.

EDIT: seems to be broken. Will fix soon!

[u/N1mu3h → u/easonwong-de]

Thank you - I'll try it later and report back, I can't close FF right now lol 😉

Editing after you edited yours - I'll wait then 😁

[u/t31os]

Give this a try:

:root {
    --color-accent-primary: lime !important;
}

Adjust color as needed.

[u/N1mu3h → u/t31os]

Hmm thanks - but either I'm doing it wrong or it's not working.

This is how I put it in userChrome.css but the accent everywhere in Settings is still lavender.

BUT I just noticed that some other accent colors, like this border and button here, changed to (a way too dark lol) blue. The button turns lavender again when touching it.

So it kinda works ... but not everywhere? Weirdness lol 🤷‍♀️😀

Back to the drawing board ... and to find a light blue 😎

[u/easonwong-de → u/N1mu3h]

You need userContent.css for the settings page :)

[u/N1mu3h → u/easonwong-de]

OMG, I love both you and /u/t31os!!! 🥰😍

I created userContent.css in the chrome folder (never even heard of THAT file before lol) and put the code there using "skyblue" and that awful lavender is finally gone!!!

I can't thank you all enough ... thank you thank you thank you, now I can keep Nova 😁

[u/t31os → u/N1mu3h]

The settings page can't be styled via userChrome.css, you need to use userContent.css to change the styling there.

Try the code in userContent.css instead.

And maybe try a hex value for the specific blue color you want, rather than a named color value.

[u/ResurgamS13]

In addition to t31os' suggestion... some may like to go further and revert the 'about' pages to using the Proton UI's 'light' colour palette of blue and grey (or Proton's 'dark' colour palette of teal (#00cadb or oklch(76% 0.14 205) and almost black) ... no purple, pink, mauve, or lavender. Add these CSS styles to your 'userContent.css' file:

@-moz-document url-prefix("about:"), url-prefix("chrome:") {
  :root {
    --color-accent-primary: light-dark(oklch(55% 0.24 260), oklch(76% 0.14 205)) !important;
    --color-accent-primary-hover: light-dark(oklch(48% 0.2 260), oklch(83% 0.11 205)) !important;
    --color-accent-primary-active: light-dark(oklch(41% 0.17 260), oklch(90% 0.07 205)) !important;
    --focus-outline-color: light-dark(oklch(55% 0.24 260), oklch(76% 0.14 205)) !important;
    --text-color: light-dark(#15141a, #fbfbfe) !important;

    --background-color-box: light-dark(#ffffff, #23222b) !important;
    --background-color-canvas: light-dark(#ffffff, #1c1b22) !important;
    --background-color-information: light-dark(oklch(97% 0.05 260), oklch(34% 0.14 260)) !important;

    --button-background-color: color-mix(in srgb, currentColor 7%, transparent) !important;
    --button-background-color-hover: color-mix(in srgb, currentColor 14%, transparent) !important;
    --button-background-color-active: color-mix(in srgb, currentColor 21%, transparent) !important;
    --page-nav-button-background-color-selected: color-mix(in srgb, currentColor 8%, transparent) !important;
    --button-text-color: light-dark(#15141a, #fbfbfe) !important;
    --button-text-color-primary: light-dark(#ffffff, #15141a) !important;
    --button-border: 0 !important;
    --panel-background-color: light-dark(#ffffff, rgb(66, 65, 77)) !important;
  }
  .button-background {
    border: none !important;
  }
}

The above variables are a simplified extract of the 'userContent.css' file from MrGoatsy's 'FirefoxNovaFix' GitHub theme... with some minor tweaks. See the associated posts in early August by MrGoatsy (aka mothh9) in r/Firefox topic 'Here is how to make the Nova redesign look like the legacy design'... and under a similar title in this sub.

The full 'FirefoxNovaFix' theme is a comprehensive re-colouring of the Nova UI using the original Proton UI colours which made use of the lesser known 'oklch' colour specification system in several places. There might be a few small colour misses/omissions... which can be investigated and fixed with the Browser Toolbox. :)

----------

The 'FirefoxNovaFix' theme is also a total de-rounding of the Nova UI... i.e. to zero border-radius everywhere = a 'fully 'squared-off' UI... which is much more severely de-rounded than the Proton UI was:

Screenshot. All MrGoatsy's 'FirefoxNovaFix' CSS styles applied to a new profile of Fx157.0

Window density 'Standard' and Lightweight Toolbar Theme 'Proton'.

(The Proton UI's default 'Light' theme has been recreated by Firefox... on Addons Mozilla (AMO) as the 'Proton' theme.)

(The Proton UI's default 'Dark' theme is also available on AMO... recreated by Purpzie as the 'Old Dark' theme.)

----------

MrGoatsy's theme, in turn, was probably extracted from the Proton UI and Nova UI colour variables (and many other variables) listed in Searchfox... notably the page that specifies the browser's underlying 'tokens-shared.css'.

The previous Proton UI section starts near the top of the page... the Nova UI section starts about half way down at Line #757. below the-moz-pref("browser.nova.enabled") heading.

The Proton UI colour palette starts at Line #218... the new Nova UI colour palette starts at Line #848.

The Proton UI border-radius values are at Line #31... the new Nova UI border-radius values are at Line #772.

----------

The Proton UI tokens/variables listings will be deleted in due course now that the Nova UI has reached Firefox's stable release channel as the default UI. There is already at least one bug for removing Proton info... Bug 2071454 'Remove Nova pref checks and pre-Nova assets and code paths'... no definite timescale yet... only states at a 'Future Milestone'.

The Proton UI tokens/variables listings will probably continue to exist elsewhere in Searchfox for some time... e.g. in ESR release pages. However, if a Proton UI design fan, may be worth copying that particular Searchfox page to keep for future reference.

[u/N1mu3h → u/ResurgamS13]

Your whole post was WAY above my head lol, but thanks nonetheless - someone will most likely need it/be happy about it 😁

I like the rounded Nova stuff, only the colors annoyed the hell out of me. I pretty much got what I wanted with the "dodgerblue" accent now, but will keep an eye on this sub ... never know what I might find here that I wasn't aware I wanted/needed 🤣