Is it possible to trigger css prefers-color-scheme in js?

Question

I using components who change their ui base on @media (prefers-color-scheme: ...) query media in css.

Is it possible to trigger the change using javascript api?

Something like this possible and it trigger this query media rule in the css?

 window.change('prefers-color-scheme', 'dark');

if you want to change the color yourself, then dont use the user preferences. — The Fool, Jul 28 '22 at 15:55
First item in google "js change prefers-color-scheme" search - https://stackoverflow.com/questions/56300132/. Does it answer your question? — lucifer63, Jul 28 '22 at 15:55
no, I don't want to change the `prefers-color-scheme`, but to trigger it. it's not the same. — Jon Sud, Jul 28 '22 at 15:56

score 0 · Answer 1 · answered Jul 28 '22 at 16:01

I am pretty sure you cannot change prefers-color-scheme. prefers-color-scheme is the user value for dark mode, set in the OS settings.

Read more about prefers-color-scheme on MDN web docs

If you want, you can create a custom dark mode toggle. You can have a CSS class dark that applies dark mode styles.

const dark = true;

if (dark) {
    document.body.classList.add('dark');
}

1 Answers1