Change to dark mode with a button

I’m trying to find ways to change the color of the theme from the homepage.

I wish I could “activate” the CSS @media (prefers-color-scheme: dark) with a button.

So get this result, not only by changing the theme of the operating system, but also with a button.

it’s possible?

1 Like

Although I don’t recall any by name, I’ve seen a handful of themes that allow for this.

As well, and although I’m not able to copy and paste the code right now since I’m away from my laptop at the moment, but if you’re competent with CSS and JS you can grab the requisite code off of my blog which has its own way of allowing for this. If you’re interested, let me know and I can copy/paste over the requisite code tomorrow.

Ok thanks, if I have enough time today I’ll try!

If you still want the code, here it is, although don’t ask me about it since I don’t know JS. Furthermore, my dark mode functionality uses a toggle, which may very well be a part of the JS (just the first three lines?). And last of all, my dark mode functionality no longer detects the system dark/light setting as I preferred it defaulting to light mode. That being said, if you switch over to dark mode it’ll stay that way.

Array.from(document.getElementsByClassName('darkmode-toggle')).forEach(function addDarkmodeListeners(element) {
    element.onchange = darkmodeToggled;
});

function darkmodeToggled() {
    var input = this.querySelector('input');
    window.darkThrottled ? (input.checked = !input.checked) : darkmodeChanged(input.checked);
}

function unthrottleDarkMode() {
    window.darkThrottled = false;
}

function darkmodeChanged(state) {
    window.darkThrottled = true;
    localStorage.setItem('darkmode-enabled', state);
    Array.from(document.getElementsByClassName('dm-input')).forEach(function (element) {
        element.checked = state;
    });
    document.body.classList[state ? 'add' : 'remove']('dark');
    setTimeout(unthrottleDarkMode, 250);
}

if (localStorage.getItem('darkmode-enabled') === "true") {
    darkmodeChanged(true);
}

Following that, all classes that you want to switch over when you activate the toggle (or button?) will have to be preceded by body.dark. So for example, if for light mode you have

p {
    color: #000;
}

then for dark mode you’d have

body.dark p {
    color: #fff;
}

I could be mistaken, but I think the code was adapted from here:
https://harlemsquirrel.github.io/css/javascript/2017/01/31/dark-light-mode-switcher.html

Otherwise, I was able to find one blog in my bookmarks that uses a button for its dark mode functionality (it’s in the hamburger menu):

hi, sorry if I answer only now but I didn’t have the time.
I was able to use the color change with the toggle from the front-end but without respecting the default settings of the css.

Creating custom css classes and using javascript as you did is good.
But i would like to run both the toggle button and the automatic system detection mode.

I’m looking for a solution to enable @media (prefers-color-scheme: dark) {} with the button, without having to create other css classes or other files

You can’t do that, it’s controlled by the browser. That’s similar to saying you would like to enable @media (min-width: 1000px) {}

thank you, you saved me a few hours of research and testing.

then I will have to implement in addition to this other classes or new css to be replaced with the button toggle