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;
}

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/…. — Spangle
– Spangle, Commented Oct 23, 2019 at 3:29
You can target/change CSS vars with JS. Other CSS generally doesn't have a JS API, besides updating an element's style attribute. — Alexander Nied
– Alexander Nied, Commented Oct 23, 2019 at 3:31
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 — WildLifeRescuer
– WildLifeRescuer, Commented Oct 23, 2019 at 3:31
Is this link similar to what you looking for? "stackoverflow.com/a/15241958/1712016". Update css from js — phonemyatt
– phonemyatt, Commented Oct 23, 2019 at 3:33

Bravo · Accepted Answer · 2019-10-23 03:34:25Z

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>

answered Oct 23, 2019 at 3:34

Bravo

6,3271 gold badge14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Can I affect CSS with JavaScript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related