Can I affect CSS with JavaScript?

Question

I'm new to all this so sorry if it's a stupid question. Basically, I have my CSS colours set up as three :root functions and the JavaScript has everything done for a light mode/dark mode toggle but now I want it so that when dark mode is true the colours in CSS change. Is there a way of doing this? (Even if it means duplicating the CSS and making the second one have the dark mode colours with JS choosing which file to choose based on the true or false statement of the toggle in HTML?

HTML/JS:

<li>
 <label>Night mode</label>
 <br> 
 <input type="checkbox" name="Nightmode" class="switch" id="nightModeCheckBox">
 <script>
 var nmbc = document.getElementById("nightModeCheckBox").checked;
 if (localStorage.getItem("nightMode") == "true"){
 document.getElementById("nightModeCheckBox").checked = true;
 }
 </script>
</li>
<li>
 <button onclick="settingsSave()" class="save">Save</button>
 <p id="saveText"></p>
 <script>
 function settingsSave() {
 var nmbc = document.getElementById("nightModeCheckBox").checked;
 if (typeof(Storage) !== "undefined") {
 localStorage.setItem("nightMode", nmbc);
 alert(localStorage.getItem("nightMode"));
 } else {
 alert("It seems your browser doesn't support local storage. Try updating it or using a different browser.");
 }
 }
 console.log(nmbc)
 </script>
</li>

CSS:

:root{
 --color1: White;
}
:root{
 --color2: rgb(230, 230, 230);
}
:root{
 --colorText: black;
}

• Bravo: where are you using the colorn values?
• Spangle: Just so you know, there are media queries for dark mode. Take a look at css-tricks.com/dark-modes-with-css. As for updating css styles with Javascript, see stackoverflow.com/questions/5753680/….
• Alexander Nied: You can target/change CSS vars with JS. Other CSS generally doesn't have a JS API, besides updating an element's style attribute.
• WildLifeRescuer: Not 100% sure what you mean by that but if you mean the colours such as the :root{ --color1: White; that's in the CSS file
• phonemyatt: Is this link similar to what you looking for? "stackoverflow.com/a/15241958/1712016". Update css from js

Answer 1

document.documentElement.style.setProperty will do what you want

document.documentElement.style.setProperty('--colorText', 'black');
document.documentElement.style.setProperty('--colorBack', 'yellow');

:root {
 --colorText:Red;
 --colorBack:White;
}
body {
 color: var(--colorText);
 background-color: var(--colorBack);
}

<div>
Should be BLACK on YELLOW not RED on WHITE
</div>