Questo componente consente il passaggio automatico a un tema scuro quando il browser è impostato sulla modalità scura. Funziona solo per gli utenti registrati su tutti i browser che supportano la query media prefers-color-scheme.
Per impostazione predefinita, questo componente è abilitato e i singoli utenti possono disattivarlo nella schermata Preferenze > Interfaccia. Gli amministratori possono anche impostare il componente come disabilitato di default; in tal caso, gli utenti vedranno un pulsante per abilitare il passaggio automatico nelle preferenze dell’interfaccia.
Come funziona?
Se il browser è in modalità scura, questo componente ricaricherà Discourse con il tema scuro abilitato. Se il browser torna alla modalità chiara, questo componente ricaricherà con il tema predefinito abilitato.
Ricaricherà anche se la modalità scura viene attivata o disattivata mentre l’utente è sul sito (come mostrato nel video sopra).
(Se hai più di due temi abilitati e l’utente ha selezionato un tema diverso da quello predefinito o scuro, questo componente non farà nulla, ovvero rispetterà la scelta dell’utente.)
Configurazione
Assicurati di avere un tema scuro installato e che sia selezionabile dagli utenti
Aggiungi questo componente sia al tema predefinito che al tema scuro (molto importante: se non lo aggiungi a entrambi i temi, gli utenti non potranno tornare al tema predefinito)
Nelle impostazioni del componente, inserisci l’ID del tuo tema scuro in dark theme id
Ho appena aggiornato questo componente del tema per renderlo compatibile con iOS 13 (che sarà fornito anche con la modalità scura e un’opzione per attivarla automaticamente la sera).
Grazie per questo fantastico componente, lo stavo cercando da tempo! Purtroppo non riesco a farlo funzionare. Forse è qualcosa di banale, ma dove posso trovare l’ID del tema scuro? È semplicemente il nome del tema?
L’ID è il numero del tema presente nell’URL quando lo selezioni nell’area di amministrazione. Ad esempio, in questo URL: /admin/customize/themes/39, l’ID è 39.
Google Chrome ora supporta la modalità scura su iOS 13 e iPadOS 13. Non sono molto sicuro riguardo al supporto della modalità scura per Google Chrome su MacOS Mojave o MacOS Catalina.
Dovrebbe già funzionare su Chrome: sotto il cofano utilizza la query media prefers-color-scheme e il supporto nei browser è piuttosto buono al giorno d’oggi: Can I use... Support tables for HTML5, CSS3, etc
Sì, anch’io spero davvero che questo diventi parte dell’installazione standard di Discourse. Alcune persone si limitano ad aggiornare i loro forum senza andare oltre.
@pmusaraj una cosa che ho notato è che la commutazione funziona solo per gli utenti collegati. Esiste un modo per impostarla automaticamente anche per gli utenti anonimi che non hanno ancora creato un account (ad esempio, passare al tema scuro mentre si utilizza una finestra di navigazione in incognito)?
La funzionalità “prefers-color-scheme” è supportata anche da Windows. L’ultima versione beta di Chrome e l’ultima versione di Firefox supportano questa query media.
Questo componente sembra creare un problema con la versione 2.4.0.beta11+39. Nella mia community riservata solo agli utenti registrati, la schermata di accesso all’indirizzo https://mydomain/login risulta vuota. Funziona normalmente quando questo componente viene disattivato.
Non riesco a riprodurlo localmente con l’ultima versione di Discourse e l’ultima versione del componente. Quando la schermata di accesso è vuota, compare un errore nella console del browser?
Aggiornamento: il problema che Thomas stava riscontrando è stato ora risolto nel componente. Grazie per la segnalazione!
Discourse ora supporta Automatic Dark Mode color scheme switching nel core; questo componente è ora deprecato e non dovrebbe più essere utilizzato.
