DEV Community

Implement Dark Mode On Your Website.

Matthew Marquise on February 25, 2021

Dark Mode is an extremely popular feature to implement into your website using basic HTML, CSS and JS. So why don't you have it on yours yet? In th...

Read full post

Błażej Wdowikowski • Feb 26 '21 • Edited

👋 Interesting approach but why not leave theme detection to browser?

:root {
    color-scheme: light dark;
    --special-text-color: #000
}

@media (prefers-color-scheme: dark) {
    :root {
        --special-text-color: #FFF;
    }
}

body, html {
    height: 100%;
    color-scheme: light dark;
}

jonosellier • Mar 2 '21

Why not both?

@media (prefers-color-scheme: dark) {
    html.system {
        /* dark mode vars */
    }
}
html.dark {
    /* dark mode vars */
}

And do the same check in the post but for a string via a switch. This also opens up the ability for different themes (maybe a dark mode that's actually light enough to blend in with the browser UI in dark mode, an amoled dark mode, a solarized mode, a few color-blind modes)

Matthew Marquise • Feb 26 '21

This is also a great way to do it!

manu • Feb 25 '21

Instead of onload="onload()", I would prefer this, since you would only need to add one line to your page (<script src='script.js'></script>):

window.onload = function() {onload()}

But otherwise, this is great!

Wesley de Groot • Feb 28 '21 • Edited

You should use event listeners if you want to be on the safe side window.onload can be overwritten and eventlistener adds an listener to the page and will not be overwritten

Matthew Marquise • Mar 14 '21

Good point. However for this demo I wanted to keep it simple. For those who are into JS and have more than one function set for onload, they should understand how it works. But eventlistener is a great alternative.

Matthew Marquise • Feb 26 '21

Definitely works too! Thanks for the tip!

Abhis • Feb 26 '21

welcome , my pleasure!

Gary Byrne • Feb 26 '21

Hey Matthew,

Yeah I agree with you. The dark/light mode toggle is a really popular feature and can really enhance a website.

Just from an accessibility point of view, If I was to have a toggle on my website I would first let it default to my OS dark/light mode.Then as that changes on the site you could consider then to use local storage.

We have a media query in CSS called prefers-color-scheme which we can access in JS with window.matchMedia.

web.dev/prefers-color-scheme :
This blog is really worth a read. It even talks about only loading CSS we need and not loading non critical CSS. You can also see the power of custom properties.

Matthew Marquise • Feb 26 '21

I will definitely read it because the preferred color scheme is a great feature to implement as well! Thanks Gary!

Krishan111 • Feb 26 '21

Thanks it really helped🙌

Comment deleted

Matthew Marquise • Mar 14 '21

Not sure what browser your in. All edges work for me.

Arthur Zhuk • Feb 27 '21

Is there something wrong with just using the DarkReader extension?

Matthew Marquise • Feb 27 '21

Nothing wrong with that. And never said there was. This is just one way to achieve dark mode.

Arthur Zhuk • Feb 27 '21

I just wonder why people are wasting time coding in dark themes when modern browsers have extensions to do that.

Matthew Marquise • Feb 27 '21

You have a good point

Arthur Zhuk • Feb 27 '21

Actually mobile web pages still need it.

Yevazn • Mar 3 '21

Great post!

I'm from HelloGitHub, a nonprofit organization in China. I am reaching out to you to ask if it's OK for us to translate your posts, "Implement Dark Mode On Your Website.", into Chinese and publish it on our WeChat official account. You own the copyright of course.

How does that sound to you?

Matthew Marquise • Mar 4 '21

As long as my Dev.to profile is linked and I'm credited that would be fine.

Harsh Sinha • Feb 27 '21

Nice use of dark mode,
I've made a dark mode site please check it out here
d8wbyo.mimo.run/index.html
You have to click on clock's time display area to switch between modes :)

Matthew Marquise • Feb 27 '21

Love it!

Harsh Sinha • Mar 4 '21

Thanks :-)

Matvey Romanov • Feb 26 '21

What`s wrong with prefers-color-scheme: dark?

Matthew Marquise • Feb 27 '21

Nothing wrong with that. using preferred color scheme is great, but also great to have a toggle.

Garvit Motwani • Feb 26 '21

Valuable information 👍🏻👍🏻

Matthew Marquise • Feb 25 '21

Feel free to ask me any questions about this if you're having trouble.

Daniel Barwikowski • Mar 1 '21

I'm surprised that there is no "Dark Mode with service worker" yet

yesminee • Aug 2 '21

Thank you for this idea, but i have no clue why dark mode does not work in my web platform. (I am using admin LTE template) tho there is no error in my browser's console.