-1

Is there a way to detect if the user's browser supports inheriting themes from the OS, like dark mode, using the prefers-color-scheme property?

I want to add a JavaScript-based theme switcher. If the user has already the support build in, I want to add a special button called "Auto". This should follow the system then.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Myzel394
  • 1,155
  • 3
  • 16
  • 40
  • Please explain why. If you want to default to dark mode on systems that don't advertise a preference, you can just specialize using `prefers-color-scheme: light`. There's even `prefers-color-scheme: no-preference`, but it's unclear whether that's what you want. – jplatte Mar 26 '20 at 16:28
  • 1
    https://developer.mozilla.org/en-US/docs/Web/CSS/@supports – Mr T Mar 26 '20 at 16:31

1 Answers1

1

If you want to detect the support JavaScript wise, one idea would be to set a variable in CSS, update its value in the media query for prefers-color-scheme and read that CSS variable with JavaScript.

Ryuno-Ki
  • 692
  • 1
  • 6
  • 8
  • That is a actually a smart idea! I prefer to use `CSS.supports`, because it\`s easier. It is also supported more widely than `prefers-color-scheme`, so it is clearly safe to use. https://caniuse.com/#search=supports, https://caniuse.com/#search=prefers-color-scheme. Thank you for your help! – Myzel394 Mar 26 '20 at 17:17
  • You're welcome! `@supports` is CSS-only as far as I know. Perhaps, you need to sync the state up to your SPA or something. – Ryuno-Ki Mar 26 '20 at 19:32