Questa guida spiega come configurare tavolozze di colori per la modalità chiara e scura per il tema del tuo sito Discourse. Copre la configurazione per tema, l’assegnazione delle tavolozze e le considerazioni sull’interfaccia utente.
Livello utente richiesto: Amministratore
La configurazione di tavolozze di colori distinte per la modalità chiara e scura ti consente di presentare la tua community Discourse in un modo che si allinea al tuo marchio, migliora l’accessibilità e offre ai tuoi utenti il controllo sulla loro esperienza di visualizzazione. I recenti miglioramenti al sistema di temi di Discourse ti consentono di assegnare una tavolozza chiara e scura preferita a ciascun tema e di consentire agli utenti di scegliere l’aspetto desiderato.
Sommario
Questa guida copre:
- Comprensione delle assegnazioni delle tavolozze per la modalità chiara e scura
- Assegnazione di tavolozze di colori chiare e scure a un tema
- Gestione delle tavolozze di colori del tuo sito
- Abilitazione del selettore della modalità colore per gli utenti
- Comprensione delle opzioni visibili all’utente
- Migliori pratiche per l’uso delle tavolozze e l’accessibilità
Comprensione delle assegnazioni delle tavolozze per la modalità chiara e scura
I temi Discourse supportano l’assegnazione esplicita di una tavolozza di colori sia “chiara” che “scura”. In questo modo, qualsiasi tema può cambiare automaticamente in base alle impostazioni di sistema dell’utente, o consentire all’utente di scegliere una modalità preferita, mantenendo i colori del tuo marchio preferiti.
Assegnazione di tavolozze chiare e scure a un tema
Per configurare le tavolozze di colori del tuo tema:
-
Vai su Amministrazione > Aspetto > Temi e componenti (
/admin/config/customize/themes) -
Fai clic sul tema che desideri modificare.
-
Nelle impostazioni del tema, individua la sezione Tavolozze di colori (Color palettes).
-
Sia per Tavolozza Colore (Color Palette) che per Tavolozza Colore Scura (Dark Color Palette), seleziona la tavolozza che desideri utilizzare.
-
Fai clic su Salva (Save) nella parte inferiore della pagina delle impostazioni del tema.
Ciò assicura che il tema del tuo sito utilizzi la tavolozza corretta sia per gli utenti in modalità chiara che in modalità scura. Nota che altre tavolozze selezionabili dall’utente possono ancora essere selezionate dai tuoi membri, ma quelle che imposti qui saranno quelle predefinite.
Gestione delle tue tavolozze di colori
Tutte le tavolozze di colori disponibili (e le loro assegnazioni collegate) possono essere gestite centralmente:
-
Vai su Amministrazione > Aspetto > Tavolozze di colori (
/admin/config/colors) -
Qui puoi modificare, aggiungere o rimuovere tavolozze, contrassegnarle come selezionabili dall’utente e assegnarle come tavolozze predefinite chiare e scure per il tuo tema.
Abilitazione del selettore della modalità colore
Prima che gli utenti possano passare dalla modalità chiara a quella scura sul sito, devi abilitare l’impostazione del sito interface_color_selector. Per impostazione predefinita è impostata su disabilitato (disabled).
Per abilitarla:
- Vai su Amministrazione > Impostazioni (Admin > Settings) e cerca
interface color selector. - Impostala su una delle seguenti opzioni:
- Mostra nel piè di pagina della barra laterale (Display in sidebar footer) — aggiunge un interruttore chiaro/scuro/automatico nella parte inferiore della barra laterale
- Mostra nell’intestazione (Display in header) — aggiunge l’interruttore all’intestazione del sito
Senza abilitare questa impostazione, gli utenti non vedranno un interruttore della modalità colore sul sito e il sito seguirà automaticamente la preferenza del sistema di ciascun utente.
Opzioni visibili all’utente
Preferenze utente
Gli utenti possono scegliere la loro modalità preferita per visualizzare il sito:
-
Vai su Preferenze utente > Interfaccia (User Preferences > Interface)
-
Nella sezione “Tavolozza colore” (Color palette) i membri possono selezionare le loro tavolozze chiare e scure preferite, oltre alla modalità che desiderano utilizzare: Chiara (Light), Scura (Dark), Automatica (Auto):
Se viene selezionata l’opzione “Automatica”, Discourse si adatterà allo schema colore di sistema dell’utente.
Migliori pratiche
- Coerenza del marchio: Personalizza le tavolozze per adattarle al tuo marchio per entrambe le modalità. Mantieni coerenti i colori principali ma regola per il contrasto e la leggibilità.
- Accessibilità: Assicurati che i rapporti di contrasto dei colori soddisfino le linee guida WCAG (questo strumento può aiutare), specialmente in modalità scura, dove alcuni colori possono apparire attenuati.
- Test su più dispositivi: Controlla l’aspetto in entrambe le modalità, su dispositivi e browser diversi.
- Asset del logo: Puoi caricare loghi separati per le modalità chiara e scura in Amministrazione > Aspetto > Logo del sito (
/admin/config/logo). - Mantieni gestibile il numero di tavolozze: Offri solo le tavolozze di cui gli utenti hanno bisogno o che ritieni ragionevoli.
FAQ
Posso avere più di una tavolozza scura o chiara?
Sì, ma si consiglia di mantenerne una principale per ciascuna per ridurre la confusione. Assegna solo le tavolozze principali ai temi per la selezione da parte dell’utente.
Posso forzare tutti a usare solo la modalità chiara (o solo quella scura)?
Puoi farlo impostando la stessa tavolozza come tavolozza predefinita chiara e scura, e assicurandoti che nessun’altra tavolozza sia selezionabile dall’utente.
I componenti del tema personalizzati si adatteranno automaticamente ai colori?
Se utilizzano le variabili di colore CSS di Discourse (ad esempio, --primary, --secondary), erediteranno la tavolozza. È meglio evitare colori codificati nel CSS personalizzato.
Il passaggio della tavolozza cambia l’intero tema o solo i colori?
Vengono modificate solo le variabili di colore. Struttura, caratteri e layout rimangono invariati quando si modificano le tavolozze di colori.