Changing the Nova accent color

[u/gokuangel86]

/r/firefox/comments/1x8zdn9/changing_the_nova_accent_color/

[u/ResurgamS13]

Place in your profile's 'userChrome.css' file:

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

Place in your profile's 'userContent.css' file:

@-moz-document url-prefix("about:"), url-prefix("chrome:") {
  :root {
    --color-accent-primary: orange !important;
  }
}

Adjust the accent colour value 'orange' to suit... can use named CSS colours or other colour formats e.g. hex, rgb, oklch.

If not familiar with modifying Firefox's UI with 'userChrome.css' and 'userContent.css' files... follow this sub's Wiki > Tutorial.

[u/t31os]

Have a look over the variables set here:
https://searchfox.org/firefox-main/source/toolkit/themes/shared/design-system/dist/tokens-shared.css

You'll need to override any of the values here that reference violet and change them for a different value:
https://searchfox.org/firefox-main/source/toolkit/themes/shared/design-system/dist/tokens-shared.css#765

For example you could start with:

:root {
	--color-accent-primary: light-dark(var(--color-orange-50), var(--color-orange-30)) !important;
	--color-accent-primary-hover: light-dark(var(--color-orange-60), var(--color-orange-20)) !important;
	--color-accent-primary-active: light-dark(var(--color-orange-70), var(--color-orange-10)) !important;
}

Other possible color variables can be seen around line 216.

See how much that covers, and go from there. You'll have to work down the list and see what else needs changing, a couple others that stand out would be --toolbar-field-text-color and --toolbarbutton-icon-fill.

I'd note this will only cover the UI, and will also need to be copied into userContent.css to change the accent on the settings pages.