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


138

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.


1
Per quanto ne so, non esiste alcuna query multimediale CSS per Safari per rilevare la modalità chiara o scura, ma Safari supporta definitivamente i widget scuri nelle pagine HTML. Potrebbe essere utile depositare un radar per questo.
mschmidt,

Non mi hiurt, ma dopo StackOverflow ha introdotto la modalità buio ho cercato su google come hanno implementato la modalità di "sistema" e inciampato su questa domanda. Mi aspetto molto traffico su questo :-)
usr-local-ΕΨΗΕΛΩΝ

Risposte:


177

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.

attiva / disattiva la modalità luce / buio

-

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


2
L'ho appena provato. Se si modifica il tema nelle impostazioni di mac os, è necessario riavviare il browser. Peccato che non sia sincronizzato al volo.
Herman Starikov,

3
@HermanStarikov Ho pubblicato un aggiornamento su questo problema che stai descrivendo. Con la nuova Safari Technology Preview Release 71 puoi alternare in tempo reale.
Davy de Vries,

Bello! Ho fatto una piccola demo di come sarebbero stati i temi con bootstrap: twitter.com/Hermanhasawish/status/1071517994302562305
Herman Starikov

2
C'è un modo per rilevarlo in JavaScript?
Akash Kava

7
@AkashKava Ho cercato su Google, sì, è possibile se usi qualcosa del genere: window.matchMedia("(prefers-color-scheme: dark)").matchesse avrò del tempo libero, aggiungerò una soluzione javascript completa alla mia risposta.
Davy de Vries,

68

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";
});

Ciao! Funziona benissimo. Sono curioso però: come funziona esattamente questa sintassi?
Stormblessed,

1
@Stormblessed controllerà prima se il browser supporta matchMediae poi proverà ad abbinare la prefers-color-scheme: darkstringa. Se corrisponde siamo in modalità oscura.
Mark Szabo,

Con il nuovo operatore Elvis questo può essere scritto comeif (window.matchMedia?('(prefers-color-scheme: dark)').matches) { }
Mark Szabo il

oh ha senso! La sintassi con .matches sembrava fare il confronto tra la prima cosa e la seconda o qualcosa del genere. Grazie!
Stormblessed

Dovrebbe essere la risposta verificata.
podperson

22

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 .



2

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;
  }
}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.