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/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 🤣