Questa guida spiega come impostare palette di colori per la modalità chiara e scura per il tema del tuo sito Discourse. Copre la configurazione per tema, l’assegnazione delle palette e le considerazioni sull’interfaccia utente.
Livello utente richiesto: Amministratore
La configurazione di palette di colori distinte per la modalità chiara e scura ti consente di presentare la tua community Discourse in un modo che si allinei al tuo marchio, migliori l’accessibilità e dia ai tuoi utenti il controllo sulla loro esperienza visiva. I recenti miglioramenti al sistema di temi di Discourse ti consentono di assegnare una palette chiara e scura preferita a ciascun tema e di consentire agli utenti di scegliere l’aspetto desiderato.
Riepilogo
Questa guida copre:
- Comprensione delle assegnazioni delle palette per la modalità chiara e scura
- Assegnazione di palette di colori chiare e scure a un tema
- Gestione delle palette di colori del tuo sito
- Comprensione delle opzioni rivolte all’utente
- Best practice per l’uso delle palette e l’accessibilità
Comprensione delle assegnazioni delle palette per la modalità chiara e scura
I temi di Discourse supportano l’assegnazione esplicita di una palette di colori “chiara” e una “scura”. In questo modo, qualsiasi tema può passare 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 palette chiare e scure a un tema
Per configurare le palette di colori del tuo tema:
-
Vai su Admin > Aspetto > Temi e componenti (
/admin/customize/themes) -
Fai clic sul tema che desideri modificare.
-
Nelle impostazioni del tema, individua la sezione Palette di colori.
-
Sia per Palette di colori che per Palette di colori scuri, seleziona la palette che desideri utilizzare.
-
Fai clic su Salva in fondo alla pagina delle impostazioni del tema.
Ciò garantisce che il tema del tuo sito utilizzerà la palette corretta sia per gli utenti in modalità chiara che scura. Nota che altre palette selezionabili dall’utente possono ancora essere selezionate dai tuoi membri, ma quelle che imposti qui saranno quelle predefinite.
Gestione delle tue palette di colori
Tutte le palette di colori disponibili (e le loro assegnazioni collegate) possono essere gestite centralmente:
-
Naviga su Admin > Aspetto > Palette di colori (
/admin/customize/colors) -
Qui puoi modificare, aggiungere o rimuovere palette, contrassegnarle come selezionabili dall’utente e assegnarle come palette chiare e scure predefinite del tuo tema.
Opzioni rivolte all’utente
Preferenze utente
Gli utenti possono scegliere la loro modalità preferita per visualizzare il sito:
-
Vai su Preferenze utente > Interfaccia
-
Nella sezione “Palette di colori”, i membri possono selezionare le loro palette chiare e scure preferite, nonché la modalità che desiderano utilizzare: Chiaro, Scuro, Automatico:
Se viene selezionato “Automatico”, Discourse si adatterà alle preferenze dello schema colori del sistema dell’utente.
Best practice
- Coerenza del marchio: Personalizza le palette per abbinare il tuo marchio per entrambe le modalità. Mantieni i colori principali coerenti ma regola per contrasto e 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 potrebbero apparire smorzati.
- Test su più dispositivi: Verifica l’aspetto in entrambe le modalità, su dispositivi e browser.
- Asset del logo: Puoi caricare loghi separati per le modalità chiara e scura in Admin > Aspetto > Loghi.
- Mantieni gestibile il numero di palette: Offri solo le palette di cui gli utenti hanno bisogno o che ritieni ragionevoli.
FAQ
Posso avere più di una palette scura o chiara?
Sì, ma si consiglia di mantenere una palette principale per ciascuna per ridurre la confusione. Assegna solo le palette primarie ai temi per la selezione da parte dell’utente.
Posso forzare tutti a usare solo la modalità chiara (o solo scura)?
Puoi farlo impostando la stessa palette come palette predefinite chiare e scure, e assicurandoti che nessun’altra palette sia selezionabile dall’utente.
I componenti del tema personalizzati adegueranno automaticamente i colori?
Se utilizzano le variabili di colore CSS di Discourse (ad esempio, --primary, --secondary), erediteranno la palette. È meglio evitare colori codificati in modo fisso nel CSS personalizzato.
Il cambio di palette modifica l’intero tema o solo i colori?
Vengono modificate solo le variabili di colore. Struttura, font e layout rimangono gli stessi durante il cambio di palette di colori.