Come rilevare se il sistema operativo è in modalità oscura nei browser?

Simile a " Come rilevare se OS X è in modalità oscura? " Solo per i browser.

Qualcuno ha scoperto se esiste un modo per rilevare se il sistema dell'utente è nella nuova modalità OS X Dark in Safari / Chrome / Firefox?

Vorremmo cambiare il design del nostro sito per renderlo compatibile con la modalità dark in base alla modalità operativa corrente.

Il nuovo standard è registrato su W3C in Media Query Level 5 .

NOTA: attualmente disponibile solo in Safari Technology Preview Release 68

Nel caso in cui le preferenze dell'utente siano light:

/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: white;
        color: black;
    }
}

Nel caso in cui le preferenze dell'utente siano dark:

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: black;
        color: white;
    }
}

C'è anche l'opzione no-preferencenel caso in cui un utente non abbia preferenze. Ma ti consiglio solo di usare i normali CSS in quel caso e di collegare in cascata correttamente i CSS.

EDIT (7 dicembre 2018):

In Safari Technology Preview Release 71 hanno annunciato un interruttore a levetta in Safari per facilitare i test. Ho anche creato una pagina di prova per vedere il comportamento del browser.

Se hai installato Safari Technology Preview Release 71 puoi attivare tramite:

Sviluppo> Funzioni sperimentali> Supporto CSS in modalità oscura

Quindi se apri la pagina di test e apri la finestra di ispezione degli elementi hai una nuova icona per attivare / disattivare la modalità Dark / Light.

-

EDIT (11 febbraio 2019): Apple viene fornita con la nuova modalità dark Safari 12.1

-

EDIT (5 set 2019): attualmente il 25% del mondo può utilizzare il CSS in modalità dark. Fonte: caniuse.com

Prossimi browser:

• iOS 13 (suppongo che verrà spedito la prossima settimana dopo il Keynote di Apple)
• EdgeHTML 76 (non so quando verrà spedito)

-

EDIT (5 nov 2019): attualmente il 74% del mondo può utilizzare il CSS in modalità dark. Fonte: caniuse.com

-

EDIT (3 febbraio 2020): Microsoft Edge 79 supporta la modalità dark. (rilasciato il 15 gennaio 2020)

-

Il mio suggerimento sarebbe: che dovresti prendere in considerazione l'implementazione della modalità oscura perché la maggior parte degli utenti può usarla ora (specialmente per il risparmio di batteria o cellulare).

Nota: ora tutti i principali browser supportano la modalità dark, tranne: IE, Edge

Se vuoi rilevarlo da JS, puoi usare questo codice:

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

Per controllare le modifiche:

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

Questo è attualmente (settembre 2018) in discussione in "Bozze editor di gruppi di lavoro CSS" . La specifica è stata lanciata (vedi sopra), disponibile come query multimediale. Qualcosa è già atterrato in Safari, vedi anche qui . Quindi in teoria puoi farlo in Safari / Webkit:

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

Ma sembra che questo sia privato . Su MDN inverted-colorsviene menzionata una funzione multimediale CSS . Plug: ho scritto un blog sulla modalità dark qui .

Ho cercato tramite l'API di Mozilla, non sembrano avere variabili corrispondenti al colore delle finestre del browser. Anche se ho trovato una pagina che potrebbe aiutarti: Come utilizzare gli stili del sistema operativo nei CSS . Nonostante l'intestazione dell'articolo, i colori sono diversi per Chrome e Firefox.

Secondo Mozilla, ecco il metodo preferito a partire da settembre 2019

@media (prefers-color-scheme: dark) {
  body {
    background: #000;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background: #fff;
  }
}