Attivazione modalità scura/chiaro

[Discourse]

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

	Riepilogo	Dark/Light Mode Toggle aggiunge un pulsante cliccabile per il cambio di tema colore nel menu hamburger. Il pulsante alterna tra un tema chiaro o scuro per un singolo tema.
	Link al Repository	https://github.com/discourse/discourse-color-scheme-toggle
	Nuovo ai Temi di Discourse?	Guida introduttiva 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, le richieste di #supporto, Contribute > Bug, Contribute > UX e Contribute > Feature possono essere inviate nelle rispettive categorie qui su Meta, e taggate con il tag appropriato del componente del tema. Clicca su un link qui sotto per crearne uno.

 Supporto  Bug  UX  Funzionalità

Funzionalità

Questo componente consente di visualizzare un’icona per il cambio di tema scuro/chiaro sul tuo forum Discourse. Effettuerà anche il cambio automatico se modifichi il sistema operativo in una modalità diversa dal tuo tema colore attuale.

Puoi scegliere di visualizzare il pulsante nel nuovo Sidebar di Discourse o nell’intestazione insieme ad altre icone.

Sidebar

Intestazione

Passaggi Importanti

Affinché funzioni correttamente, devono essere abilitati almeno 2 temi colore nell’area /admin/customize/colors. Almeno due colori devono avere abilitata l’opzione color scheme can be selected by users (il tema colore può essere selezionato dagli utenti).

È necessario impostare un tema colore predefinito per la modalità scura: /admin/site_settings/category/basic?filter=dark

Una volta fatto questo, gli utenti dovrebbero essere in grado di scegliere tra due temi colore come preferenze light (chiaro) e dark (scuro) nel menu delle preferenze utente.

Impostazioni

Nome	Descrizione
svg icons
add color scheme toggle to header	Aggiungi il pulsante di cambio tema colore all’intestazione del sito

Traduzione	Valore predefinito
toggle_button_title	Cambia tema colore

Ospitato da noi? I componenti del tema sono disponibili per l’uso nei nostri piani Standard, Business ed 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