Comment détecter le mode sombre à l'aide de JavaScript ?

Question

Windows et macOS disposent désormais d'un mode sombre.

Pour le CSS, je peux utiliser :

    @media (prefers-dark-interface) { 
      color: white; background: black 
    }

Mais j'utilise l'API Stripe Elements, qui met les couleurs en JavaScript

Par exemple :

  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
      }
    }
  }

Comment puis-je détecter le schéma de couleurs préféré du système d'exploitation en JavaScript ?

Answer 1

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

Pour surveiller les changements :

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});

Answer 2

Selon MediaQueryList - API Web | MDN , addListener est la façon correcte d'écouter le changement. addEventListener ne fonctionne pas pour moi sur iOS 13.4.

window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
  console.log(`changed to ${e.matches ? "dark" : "light"} mode`)
});

Answer 3

Vous pouvez vérifier le CSS Media-Queries directement avec Javascript

La méthode window.matchMedia() renvoie un objet MediaQueryList représentant les résultats de la chaîne d'interrogation CSS spécifiée. L'adresse valeur de la méthode matchMedia() peut être l'une des caractéristiques de la règle la règle CSS @media, comme min-height, min-width, orientation, etc.

Pour vérifier si la Media-Query est vraie, la fonction matches peut être utilisé

// 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)
}

Pour mettre à jour le schéma de couleurs de façon dynamique si l'utilisateur modifie ses préférences, on peut utiliser la méthode suivante :

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(getPreferedColorScheme()));
}