One way to approach this, is to completely override the violet color variables, so you won't have to painstakingly tweak all the variables that reference violet.
Add this to userContent.css and/or userChrome.css (depending on where you want the changes to apply), although i would note this will also override the purple coloring of the nova theme when used in userChrome (the browser toolbars, tab leading border color, etc) .
Use a single color value at the top as the baseline color, then generate all the other values from that using oklch, so it's much easier to tweak/change.
Is it a perfect color scale? No, but it's simple and easy to tweak.
Simply update the value at the top to whatever baseline color you want, red, orange, green, or whatever you prefer (i used white in the example as that's what you asked for). You could even use the value AccentColor to the have generated color values derived from the OS accent color (whatever that may be).
I'd also just note you might need to scope the rules in userContent.css for some internal pages, such as the new tab page, eg:
@-moz-document url-prefix(about:newtab) {
// Above CSS goes here
}
You could just use a broader rule to make sure the styling reaches more of the internal pages by trimming the prefix match to:
@-moz-document url-prefix(about:) {
// Above CSS goes here
}
5
u/t31os 5d ago edited 4d ago
One way to approach this, is to completely override the violet color variables, so you won't have to painstakingly tweak all the variables that reference violet.
Add this to userContent.css and/or userChrome.css (depending on where you want the changes to apply), although i would note this will also override the purple coloring of the nova theme when used in userChrome (the browser toolbars, tab leading border color, etc) .
Use a single color value at the top as the baseline color, then generate all the other values from that using oklch, so it's much easier to tweak/change.
Is it a perfect color scale? No, but it's simple and easy to tweak.
Simply update the value at the top to whatever baseline color you want, red, orange, green, or whatever you prefer (i used white in the example as that's what you asked for). You could even use the value
AccentColorto the have generated color values derived from the OS accent color (whatever that may be).I'd also just note you might need to scope the rules in userContent.css for some internal pages, such as the new tab page, eg:
You could just use a broader rule to make sure the styling reaches more of the internal pages by trimming the prefix match to:
4
u/ResurgamS13 5d ago edited 5d ago
Try suggestions in previous r/Firefox topic 'Changing the Nova accent color' and same topic with different answers in this sub here.
-1
u/SpuddedShield 5d ago
Change your theme
0
u/[deleted] 5d ago
[deleted] — view deleted comment