Wie erkenne ich den Dunkelmodus mit JavaScript?

77

Windows und MacOS haben jetzt den Dunkelmodus.

Für CSS kann ich verwenden:

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

Ich verwende jedoch die Stripe Elements-API, mit der Farben in JavaScript eingefügt werden

Zum Beispiel:

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

Wie kann ich das bevorzugte Farbschema des Betriebssystems in JavaScript erkennen?

javascript macos-darkmode Mikemaccana
quelle
1
Mögliches Duplikat von Wie kann ich feststellen, ob der dunkle Modus in macOS Mojave auf meiner Website aktiviert ist?
Mikemaccana
2
Diese zweite Antwort wird nicht als akzeptiert markiert, sondern behandelt die Verwendung von JavaScript mitwindow.matchMedia
mikemaccana
Ich konnte die @media (prefers-dark-interface)Medienabfrage in Chrome 80 nicht zum Laufen bringen (wie Sie bereits erwähnt haben), @media (prefers-color-scheme: dark)tat es aber.
Sprich Nerdy mit mir

Antworten:

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

So achten Sie auf Änderungen:

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    const newColorScheme = e.matches ? "dark" : "light";
});
Mark Szabo
quelle
1
Beachten Sie, dass dies nur funktioniert, wenn Sie den Code tatsächlich ausführen, jedoch nicht automatisch, wenn der Benutzer den Modus manuell ändert oder er vom System automatisch geändert wird.
Daniel
1
@ Daniel Ziemlich offensichtlich, da es kein Ereignis zu sein scheint, sondern nur eine Eigenschaft des Fensterobjekts.
Muhammad bin Yusrat
31
Ich werde das hier einfach verlassen:window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) { console.log('changed!!');})
Jaromanda X
Beachten Sie, dass prefers-color-scheme: darkdies in Edge nicht zu funktionieren scheint. Nicht in CSS oder Javasript.
VDWWD
@VDWWD alter Edge oder neuer Edge (Chromium-basiert)?
Mark Szabo
8

Laut MediaQueryList - Web-APIs | MDN , addListenerist der richtige Weg , um die Änderung zu hören. addEventListenerfunktioniert bei mir unter iOS 13.4 nicht.

window.matchMedia('(prefers-color-scheme: dark)').addListener(function (e) {
  console.log(`changed to ${e.matches ? "dark" : "light"} mode`)
});
imgg
quelle
1
Auch von MDN - Dies ist im Grunde ein Alias ​​für EventTarget.addEventListener (), um die Abwärtskompatibilität zu gewährleisten.
Gerrit0
7

Sie können die CSS- Medienabfragen direkt mit Javascript überprüfen

Die window.matchMedia () -Methode gibt ein MediaQueryList-Objekt zurück, das die Ergebnisse der angegebenen CSS-Medienabfragezeichenfolge darstellt. Der Wert der matchMedia () -Methode kann eine der Medienfunktionen der CSS @ media-Regel sein, z. B. Mindesthöhe, Mindestbreite, Ausrichtung usw.

Um zu überprüfen, ob die Medienabfrage wahr ist, kann die matchesEigenschaft verwendet werden

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

Um das Farbschema dynamisch zu aktualisieren, wenn der Benutzer seine Präferenz ändern würde, kann Folgendes verwendet werden:

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