0

I'm currently working on a page with media queries that specify the elements on prefers-color-scheme: dark for the dark version. My question is, how can I make a switch or button to override the default browser/ios settings if the user chooses so?

In my other projects, I've tried and sucessfully done using another solution, that was:

add a class to the boddy

body.dark-theme {
    background-color: #333;
}

and just added to the toggle in js

const toggle = document.getElementById('toggle');
const body = document.body;

toggle.addEventListener('input', e => {
    const isChecked = e.target.checked;

    if (isChecked) {
        body.classList.add('dark-theme');
    } else {
        body.classList.remove('dark-theme');
    }
});

but there's is a way to just use the media query for prefers-color-scheme: dark and create a toggle to override it? If someone could help me out, thank you in advance.

Daniel Vartan
  • 3
  • 2
  • 1
    Does this answer your question? [Edit "prefers-color-scheme" value to force Dark Mode](https://stackoverflow.com/questions/63144602/edit-prefers-color-scheme-value-to-force-dark-mode) – code Mar 16 '23 at 01:24
  • media queries are used if you need different behavior based on screen size. – Rick Mar 16 '23 at 01:26

0 Answers0