.style.color don't change the color of an element in JavaScript

Question

I would like to add Dark Mode to my site, so I created an HTML file with the css (in "white mode") and then i added a button (with the attribute onclick="enableDarkMode()") and defined the function like this:

function enableDarkMode() {
    if (document.body.style === "background-color: black;") {
        // disable dark mode
    } else {
        document.body.style = "background-color: black;"
        Array.from(document.getElementsByTagName("a")).forEach(e => {
            e.style.color = "white"
        });
        document.getElementsByTagName("h1")[0].style.color = "white"
        document.getElementsByTagName("img")[0].style = "box-shadow: 0px 4px 6px 2px #404040;"
    }
}

when i run everything and i click the Enable Dark Mode it just changes the background and it doesn't turn the text color in white even if they have the attribute style = "color: white;"

here's the full code: https://codepen.io/anonhexo/pen/WNGmevq

Please read [Something on my web site doesn't work. Can I just paste a link to it?](http://meta.stackoverflow.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link-to-it). Questions that depend on external resources to be understood become useless when the external resource goes away or is fixed. Create a [MCVE] and put it in **the question itself** instead. Stackoverflow does support [inline live demos](https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/) — Quentin, Jan 19 '21 at 09:11
Why do you modify the elements with JavaScript? Add a stylesheet for the "dark mode" that depends on a class on the `` or `` element: `body.dark { background-color: black; } body.dark a { color: white } ...`, or swap the style sheet completely, ... — Andreas, Jan 19 '21 at 09:11

score 3 · Accepted Answer · answered Jan 19 '21 at 09:11

Your problem is that you are overriding the color of this <a> by using !important in your css.

If you inspect the element, and click on computed, you can see where the color is coming from. If you toggle dark mode you can see that white is there, but it has a line through it. The one that doesn't have the line through it is the one that is being used.

It seems to work fine if you remove !important from the css (both instances)

As a general rule of thumb, try not to use important as much as you can as you can get problems like this. In some situations it is neccessary, but not many.

score 1 · Answer 2 · answered Jan 19 '21 at 09:12

    function enableDarkMode() {
        if (document.body.style === "background-color: black;") {
            // disable dark mode
        } else {
            document.body.style = "background-color: black;"
            Array.from(document.getElementsByTagName("a")).forEach(e => {
              
              e.style.setProperty("color", "white", "important");

            });
            document.getElementsByTagName("h1")[0].style.color = "white !important"
            document.getElementsByTagName("img")[0].style = "box-shadow: 0px 4px 6px 2px #404040;"
        }
    }

.dark-mode {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 13px;
        }

        .about {
            margin-bottom: 80px;
        }

        .text-center {
            text-align: center;
        }

        .profile-pic {
            box-shadow: 0px 4px 6px 2px lightgrey;
            border-radius: 50%;
        }

        img {
            vertical-align: middle;
        }

        img {
            border: 0;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        a {
            color: #4A4E69 !important;
            font-weight: 300;
            font-family: 'Open Sans', sans-serif;
        }

        a:hover {
            transition-duration: 0.5s;
            color: #d1d3e2 !important;
        }

        a:not(:hover) {
            transition-duration: 0.5s;
            color: #4A4E69 !important;
        }

        .h1,
        h1 {
            font-size: 36px;
        }

<html>

<head>
    <title>AnonHexo</title>
    <a class="dark-mode" style="text-decoration:none" onclick="enableDarkMode()">Enable Dark Mode</a>
</head>

<body>
    <section class="about">
        <div class="text-center" style="margin-top:100px"> <img
                src="https://avatars1.githubusercontent.com/u/61375258?v=4" width="200" class="profile-pic">
            <h1>AnonHexo, Italy</h1>
            <div class="socialLinks">
                <a href="https://www.github.com/AnonHexo" style="text-decoration:none" target="_blank">GitHub</a>,
                <a href="https://www.stackoverflow.com/users/13221104/anonhexo?" style="text-decoration:none"
                    target="_blank">Stack Overflow</a>,
                <a href="https://codepen.io/anonhexo" style="text-decoration:none" target="_blank">Codepen</a>,
                <br>
                <a href="https://www.youtube.com/channel/UCnnqMGII7LHvvn1LUiU55eg" style="text-decoration:none"
                    target="_blank">YouTube</a>,
                <a href="https://www.instagram.com/jacky.trave" style="text-decoration:none"
                    target="_blank">Instagram</a>,
                <a href="https://www.reddit.com/u/AxonHexo" style="text-decoration:none" target="_blank">Reddit</a>,
                <a href="https://www.twitch.tv/AnonHexo" style="text-decoration:none" target="_blank">Twitch</a>
  
            </div>
            <!-- <h5>Young 12 y/o back-end developer.</h5>
            <div class="text-center" style="margin:20px"> <a href="mailto:" class="" target="_blank"> </a> </div> -->
        </div>
    </section>
  <button onclick="enableDarkMode()">
    enable dark mode
  </button>
</body>
</html>

your css for the a elements override the new command you give.

your css contains:

a:not(:hover) {
    transition-duration: 0.5s;
    color: #4A4E69 !important;
}

if you want the all the a elements to be white you should do:

e.style.setProperty("color", "white", "important");

score 1 · Answer 3 · answered Jan 19 '21 at 09:12

1

h1 tag color is set to #4A4E69 !important;. You should set !important to override this.

Refer to setProperty()

document.getElementsByTagName("h1")[0].style.setProperty("color", "white", "important")

answered Jan 19 '21 at 09:12

wangdev87

8,611
3
8
31

.style.color don't change the color of an element in JavaScript

3 Answers3