Windows and macOS now have dark mode.
For CSS I can use:
@media (prefers-dark-interface) { color: white; background: black }
But I am using the Stripe Elements API, which puts colors in JavaScript
For example:
const stripeElementStyles = { base: { color: COLORS.darkGrey, fontFamily: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"`, fontSize: '18px', fontSmoothing: 'antialiased', '::placeholder': { color: COLORS.midgrey }, ':-webkit-autofill': { color: COLORS.icyWhite } } }
How can I detect the OS’s preferred color scheme in JavaScript?
Advertisement
Answer
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { // dark mode }
To watch for changes:
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { const newColorScheme = event.matches ? "dark" : "light"; });