I want to provide a “dark mode” switch on a website. That would be easy by using some CSS.
But then: Modern browsers can already tell the website that they want to use a dark mode (prefers-color-scheme
). And I can also react to that via CSS.
@media (prefers-color-scheme: dark) {
html {
filter: grayscale(0.75) invert(1) contrast(1);
}
}
My problem is: I do not want these mechanisms (button on the website and browser preference) to collide. And I need the button on the website, because many users don’t know that their browser can change the preference.
Is there any mechanism that would allow a website to provide a button that would change the browser preference?
I fully understand that you would usually not want to allow websites to do something like “change my preferences”, however, it seems like a good idea regarding the prefers-color-scheme
.