web-dev-qa-db-fra.com

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

Windows et macOS ont désormais un mode sombre.

Pour 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 jeu de couleurs préféré du système d'exploitation en JavaScript?

javascriptmacos-darkmode
34
mikemaccana
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}
55
Mark Szabo

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 de requête multimédia CSS spécifiée. La valeur de la méthode matchMedia () peut être n'importe laquelle des fonctionnalités multimédias de la règle CSS @media, comme min-height, min-width, orientation, etc.

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

// 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 manière dynamique si l'utilisateur change sa préférence, les éléments suivants peuvent être utilisés:

function setColorScheme(scheme) {
  switch(scheme){
    case 'dark':
      // Dark
      break;
    case 'light':
      // Light
      break;
    default:
      // Default
      break;
  }
}

function getPreferedColorScheme() {
  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()));
}
0
SanBen