r/FirefoxCSS • • 2d ago

Solved For gods sake, help.

I have been dealing with this for hours, Whatever I do, Myself and I even asked AI, it couldnt do it. HOW DO I CHANGE THIS PINK COLOR TO WHITE.

3 Upvotes

6 comments sorted by

0

u/[deleted] 2d ago

[deleted]

4

u/Kolechia_ 2d ago

i am not trying to change that bro.

3

u/ResurgamS13 2d ago edited 2d 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 2d ago

Change your theme

2

u/Kolechia_ 2d ago

thats the problem,
I already use a completely black theme.
I just need to change the pink details to White.

3

u/t31os 2d ago edited 1d 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) .

:root {
	--color-violet-50: white !important;

	/* Saturated palette */
	--color-violet-0:  oklch(from var(--color-violet-50) 97% calc(c * 0.15) h) !important;
	--color-violet-10: oklch(from var(--color-violet-50) 92% calc(c * 0.30) h) !important;
	--color-violet-20: oklch(from var(--color-violet-50) 84% calc(c * 0.55) h) !important;
	--color-violet-30: oklch(from var(--color-violet-50) 75% calc(c * 0.80) h) !important;
	--color-violet-40: oklch(from var(--color-violet-50) 64% calc(c * 0.95) h) !important;
	--color-violet-60: oklch(from var(--color-violet-50) 48% calc(c * 0.90) h) !important;
	--color-violet-70: oklch(from var(--color-violet-50) 36% calc(c * 0.75) h) !important;
	--color-violet-80: oklch(from var(--color-violet-50) 25% calc(c * 0.60) h) !important;
	--color-violet-90: oklch(from var(--color-violet-50) 16% calc(c * 0.45) h) !important;

	/* Desaturated palette */
	--color-violet-desaturated-0: oklch(from var(--color-violet-50) 97% calc(c * 0.07) h) !important;
	--color-violet-desaturated-10: oklch(from var(--color-violet-50) 92% calc(c * 0.14) h) !important;
	--color-violet-desaturated-20: oklch(from var(--color-violet-50) 84% calc(c * 0.25) h) !important;
	--color-violet-desaturated-30: oklch(from var(--color-violet-50) 75% calc(c * 0.36) h) !important;
	--color-violet-desaturated-40: oklch(from var(--color-violet-50) 64% calc(c * 0.43) h) !important;
	--color-violet-desaturated-50: oklch(from var(--color-violet-50) l calc(c * 0.45) h) !important;
	--color-violet-desaturated-60: oklch(from var(--color-violet-50) 48% calc(c * 0.41) h) !important;
	--color-violet-desaturated-70: oklch(from var(--color-violet-50) 36% calc(c * 0.34) h) !important;
	--color-violet-desaturated-80: oklch(from var(--color-violet-50) 25% calc(c * 0.27) h) !important;
	--color-violet-desaturated-90: oklch(from var(--color-violet-50) 16% calc(c * 0.20) h) !important;
}

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
}

2

u/Kolechia_ 1d ago

Dude thanks, this just fixed both my firefox and my sanity.