Problem with setting css variables with javascript. [solved]

Question

I've a code, where I used a css variable for a specific color, a blue, and used it for every title and many elements.
I created a dark mode, and if we click the dark mode button I would like to change the variable.

I tried using this in the function:
document.body.style.setProperty('--blue', '#1976D2');

Here's how I used the variable:
:root {
--blue:... ;
}

But it seems that I'm doing something wrong, because nothing happens, but I don't know what.

Can anyone please help me fixing it?
Thanks in advance :)

https://code.sololearn.com/WdnjNR74ydO0/?ref=app

Answer 1

Major シ it was not working because you had defined the variable in all
Like this
*{
--blue:#something;
}

But variables should only be defined in :root in css

Answer 2

actually blue in ilus is a color variable for getting the ilus blue colour so changing it would be necessary ✌️

Answer 3

Root in css can be accessed in js by document.querySelector(":root") or document.documentElement

Then you can use set property on style o change the properties or you can change full set of variables by style.cssText

Answer 4

Fixed code

https://code.sololearn.com/WtsBqUZDD5yr/?ref=app

Answer 5

Arnav Kumar [📕Schools📚] if we click the button nothing happens, Idk why, i mean the colors of the blue should be changed...

Answer 6

Maybe this could help

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme