Windows y macOS ahora tienen modo oscuro.
Para CSS puedo usar:
@media (prefers-dark-interface) { color: white; background: black }Pero estoy usando la API Stripe Elements, que pone colores en JavaScript
Por ejemplo:
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 } } }¿Cómo puedo detectar el esquema de color preferido del sistema operativo en JavaScript?
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { // dark mode }Para estar atento a los cambios:
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => { const newColorScheme = event.matches ? "dark" : "light"; });Según MediaQueryList - Web APIs | MDN , addListener es la forma correcta de escuchar el cambio. addEventListener no funciona para mí en iOS 13.4.
window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) { console.log(`changed to ${e.matches ? "dark" : "light"} mode`) });Puede consultar las consultas de medios CSS directamente con JavaScript
El método window.matchMedia() devuelve un objeto MediaQueryList que representa los resultados de la cadena de consulta de medios CSS especificada. El valor del método matchMedia() puede ser cualquiera de las funciones multimedia de la regla CSS @media, como altura mínima, anchura mínima, orientación, etc.
Para verificar si Media-Query es verdadera, se puede usar la propiedad de matches
// Check to see if Media-Queries are supported if (window.matchMedia) { // Check if the dark-mode Media-Query matches if(window.matchMedia('(prefers-color-scheme: dark)').matches){ // Dark } else { // Light } } else { // Default (when Media-Queries are not supported) } Para actualizar el color-scheme dinámicamente según la preferencia del usuario, se puede usar lo siguiente:
function setColorScheme(scheme) { switch(scheme){ case 'dark': // Dark break; case 'light': // Light break; default: // Default break; } } function getPreferredColorScheme() { if (window.matchMedia) { if(window.matchMedia('(prefers-color-scheme: dark)').matches){ return 'dark'; } else { return 'light'; } } return 'light'; } if(window.matchMedia){ var colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)'); colorSchemeQuery.addEventListener('change', setColorScheme(getPreferredColorScheme())); }