Interruttore modalità Oscuro/Chiaro

[Discourse]

questo componente del tema è deprecato. Vedi Dark/light mode toggle now available in core

|||
-|-|-|
| Riepilogo | Dark/Light Mode Toggle aggiunge un pulsante di attivazione/disattivazione cliccabile per lo schema di colori nel menu hamburger. L’interruttore passa da uno schema di colori chiaro o scuro per un tema.
| Link al Repository | https://github.com/discourse/discourse-color-scheme-toggle
|Nuovo ai Temi di Discourse? | Guida per principianti all’uso dei temi di Discourse

Installa questo componente del tema

Poiché si tratta di un componente del tema #ufficiale mantenuto dal team di Discourse, #supporto, Bug, UX e richieste di #funzionalità possono essere effettuate nelle rispettive categorie qui su Meta, e contrassegnate con il tag appropriato del componente del tema. Clicca su un link qui sotto per iniziarne uno.

Supporto Bug UX Funzionalità

Funzionalità

Questo componente consente un’icona di attivazione/disattivazione della modalità scura/chiara sul tuo forum Discourse. Passerà anche automaticamente se cambi il tuo sistema operativo in una modalità diversa dal tuo schema di colori corrente.

Puoi scegliere di visualizzare l’interruttore nella nuova barra laterale di Discourse o nell’intestazione insieme ad altre icone.

Barra laterale

Intestazione

Passaggi importanti

Affinché ciò funzioni correttamente, è necessario abilitare almeno 2 scelte di schema di colori nell’area /admin/customize/colors. Almeno due colori devono avere abilitato color scheme can be selected by users.

È necessario impostare uno schema di colori predefinito per la modalità scura: /admin/site_settings/category/basic?filter=dark

Una volta fatto ciò, gli utenti dovrebbero essere in grado di scegliere tra due schemi di colori come loro preferenze chiaro e scuro nel loro menu delle preferenze dell’interfaccia utente.

Impostazioni

Nome	Descrizioni
svg icons
add color scheme toggle to header	Aggiunge il pulsante di attivazione/disattivazione dello schema di colori all’intestazione del sito

Traduzione	Predefinito
toggle_button_title	Attiva/disattiva schema colori

Ospitato da noi? I componenti del tema sono disponibili per l’uso sui nostri piani Standard, Business e Enterprise.

[chrisbagsrocks]

Funziona solo con l’input dell’utente andando nelle sue preferenze e abilitandolo? Sarebbe molto meglio se potesse essere un’implementazione a livello di sito piuttosto che su base utente per utente.

[jordan.vidrine]

Un amministratore abiliterebbe questo componente per l’intero sito.

Da lì, a seconda di ciò che l’amministratore che ha impostato il componente ha configurato, l’interruttore si troverà nel menu hamburger dell’utente o nell’intestazione del forum. Tutti gli utenti possono utilizzarlo una volta che è stato abilitato da un amministratore.

[chrisbagsrocks]

Mi dispiace, non credo di essere stato chiaro con la mia domanda. Guardando il tuo tutorial di installazione, dopo che è stato abilitato sul lato dell’amministratore, sia nel menu hamburger che nell’intestazione, sembra che ogni singolo utente debba andare alle proprie preferenze e abilitare/aggiungere gli schemi di colori chiaro/scuro. Altrimenti non funziona per un nuovo utente / qualcuno non registrato. Quindi la mia domanda è:
È possibile implementare lo schema di colori a livello di sito anziché su base individuale per utente.
La tua foto è qui sotto come riferimento

[jordan.vidrine]

Credo che uno schema chiaro e uno scuro verranno assegnati automaticamente una volta che un amministratore lo abiliterà. Da lì, un utente potrà modificare quali schemi di colori scuri e chiari vengono utilizzati in base alle proprie preferenze personali.

Potrebbe anche essere necessario aggiungere una selezione qui /admin/site_settings/category/basic?filter=dark

Ho aggiornato le istruzioni per riflettere questa aggiunta. Mi scuso per la confusione!

[bekircem]

Sembra non funzioni correttamente quando lo schema di colori predefinito è scuro. Come possiamo adattarlo?

Quando lo schema di colori predefinito è scuro, l’interruttore non funziona a meno che l’utente non abbia selezionato lo schema di colori chiaro dalle preferenze dell’interfaccia.

[jordan.vidrine]

Hmmm, credo che questo stia succedendo perché sto verificando le impostazioni dello schema utente prefers-dark in base alle impostazioni del browser e del sistema.

Puoi controllare la console dell’ispettore e vedere se compare qualcosa quando provi a usare l’interruttore?

Potrei dover indagare su questo.

[poyrazdursuncan (Dursun Can)]

Avvisi su domain.com/logs;

Il tema/componente Dark-Light Toggle sta generando errori

initialize@https://develcoder.com/theme-javascripts/1d5669cf8344e0837406cef0be37bb086b5968f5.js?__ws=develcoder.com:153:73

initialize@https://develcoder.com/assets/application-01686ed6ee22a989833acbbce970ba63.js:1:11855

https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268273

each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:429458

walk@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:428478

each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427828

topsort@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427874

_runInitializer@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268501

runInstanceInitializers@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268222

_bootSync@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:252462

didBecomeReady@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:257791

invoke@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418024

flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:417018

flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418946

_end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424401

end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:421081

_run@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424937

u@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26509


https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26807

[Mr.X_Mr.X]

Anche qui. Il componente Dark light genera errori.

[jordan.vidrine]

@poyrazdursuncan

Il tema/componente Dark-Light Toggle sta generando errori

@Mr.X_Mr.X

Anche qui. Il componente Dark-Light genera errori.

Hmmm… non sono sicuro da dove provenga, dato che non ho codice che dovrebbe inviarlo. L’unica comunicazione che ho per un errore è qui:

https://github.dev/discourse/discourse-color-scheme-toggle/blob/3474a80d81d89f1264be5d55652dc65b5aea68e2/javascripts/discourse/initializers/dark-light-toggle-hamburger.js#L56-L59

Puoi collegare il tuo sito qui, se possibile? La tua istanza è aggiornata?

[Arta_S (Arta)]

Ciao,

Ho un problema. Dopo aver aggiunto il tema, le icone del toggle non vengono aggiunte nel menu hamburger. Non esistono nemmeno nel codice sorgente. Inoltre, demo qui i pulsanti non funzionano. cioè non passano tra i temi chiari e scuri.

Qualcun altro ha lo stesso problema?

[jordan.vidrine]

Puoi controllare la console degli strumenti per sviluppatori e vedere se compare qualcosa a riguardo? Vedo che le icone funzionano bene sul sito demo.

[Arta_S (Arta)]

Ecco il video:

Il mio problema principale è che sul mio forum non vedo nemmeno queste opzioni nel menu hamburger:

[jordan.vidrine]

Non hai la scheda console aperta nel tuo screencast, quindi è difficile vedere se si stanno verificando errori.

Ti sei assicurato di seguire ogni passaggio nel post originale su questo argomento?

almeno 2 scelte di schema colore devono essere abilitate nella tua area /admin/customize/colors
Un tema scuro deve essere abilitato su: /admin/site_settings/category/basic?filter=dark

E tu, come utente, hai selezionato due schemi colore, uno per la luce e uno per il buio, nelle tue preferenze utente?

[Arta_S (Arta)]

@jordan.vidrine

Ti sei assicurato di seguire ogni passaggio nel post originale su questo argomento?

Ciao,

Sì, questo è stato eseguito correttamente. Oggi tutto viene visualizzato correttamente. Questo era dovuto ai cookie. Era strano che su altri browser (dove non ho mai visitato il forum) venisse visualizzato come mancante. Ora tutto è corretto. Grazie e scusa per la confusione che ho causato.

L’unica cosa è che tutti gli utenti, inclusi gli ospiti, possono vedere l’interruttore nell’intestazione. Ma come amministratore, quando sono connesso, non riesco a vedere gli interruttori. È intenzionale? Potrebbe essere la cache del server o qualcos’altro?

[jordan.vidrine]

Hmm, è interessante. Hai selezionato uno schema di colori scuro e chiaro nelle tue preferenze utente?

E stai usando il tema che ha il componente installato?

[Arta_S (Arta)]

Ho dovuto andare al mio profilo e abilitare questa opzione (Abilita schema colore automatico modalità scura) affinché apparisse nell’intestazione. probabilmente stavo armeggiando e mi sono perso quella casella di controllo.

[agungor]

Adoro questo componente! Ma ho un piccolo problema.

Sembra che il componente funzioni solo quando l’opzione “Abilita schema colore modalità scura automatica” è attivata. Il mio problema si verifica quando l’opzione è attivata e quando la preferenza di sistema è impostata su modalità scura (ad esempio, schema colore preferito: scuro).

Nello scenario sopra, quando provo a passare a un tema chiaro tramite Preferenze > Interfaccia > Tema, non succede nulla, il che va bene per me. Presumibilmente, poiché la mia preferenza di sistema è già impostata sulla modalità scura, il passaggio alla modalità chiara in Discourse non la sovrascrive.

Quando faccio lo stesso con il componente Dark / Light Mode Toggle, e se la mia preferenza del tema in Discourse è impostata su Chiaro, l’interruttore mi consente effettivamente di passare alla modalità chiara (il che è ancora meglio a mio parere), ma il logo del sito nell’intestazione rimane in modalità scura e difficile da vedere in modalità chiara. Quando guardo nell’ispettore, vedo che l’elemento appare così:

<div class="title"><a href="/" data-auto-route="true"><picture><source srcset="<link to image>" media="(prefers-color-scheme: dark)"><img src="<link to image>" id="site-logo" class="logo-big"></picture></a></div>

Ho notato la parte media=“(prefers-color-scheme: dark)” anche se ora siamo in modalità chiara impostata dall’interruttore.

Dovrei aggiungere che il logo del sito normalmente passa bene tra modalità chiara e scura quando l’opzione “Abilita schema colore modalità scura automatica” in Discourse è deselezionata. Ma questo impedisce la visualizzazione del componente Dark / Light Mode Toggle

Inoltre, se la mia preferenza del tema in Discourse è impostata su Scuro da Preferenze > Interfaccia > Tema, e anche la mia preferenza di sistema è scura, l’interruttore non passa tra chiaro e scuro, rimane sempre sulla modalità scura.

Idealmente, preferirei che il componente Dark / Light Mode Toggle funzionasse come fa ora, ma che il logo del sito nell’intestazione seguisse l’impostazione chiara/scura attualmente attiva, non lo schema colore preferito dal sistema dell’utente.

[MattiaB (Mattia)]

@agungor

Quando faccio lo stesso con il componente Dark / Light Mode Toggle, e se la mia preferenza del tema in Discourse è impostata su Light, l’interruttore mi permette effettivamente di passare alla modalità chiara (che è ancora meglio secondo me) ma il logo del sito nell’intestazione rimane in modalità scura e difficile da vedere in modalità chiara.

Stessa cosa qui! Hai trovato una soluzione?

Non sono uno sviluppatore frontend ma ho fatto un po’ di debug:
Quando è in modalità scura, come impostato dal mio computer, l’HTML per il logo appare così:

E il logo ha un bell’aspetto, con la modalità scura completamente funzionante. Quando si passa alla modalità chiara, il tema diventa chiaro ma il logo scompare (il logo scuro rimane).

Questo è l’aspetto dell’HTML:

C’è una riga aggiuntiva, \u003csource srcset=\"https://radixtalk.com/uploads/default/original/1X/19838ecb731d3f87d9db76c927e793ab2e159f1e.png\" media=\"(prefers-color-scheme: dark)\"\u003e che “blocca” il caricamento del logo corretto. Se rimuovo quella riga con Inspect Element, e lascio solo \u003cimg src=\"https://radixtalk.com/uploads/default/original/1X/237090c67d33a1a38f9f031336dab420c4c4a37d.png\" alt=\"RadixTalk\" id=\"site-logo\" class=\"logo-small\" width=\"36\"\u003e, appare il logo corretto.

Spero che queste informazioni siano state utili.

[agungor]

@MattiaB

Stessa cosa! Hai trovato una soluzione?

Temo di no. Alla fine ho cambiato il colore di sfondo dell’intestazione in modo che il passaggio del logo tra la modalità chiara e quella scura non avesse più importanza