È possibile definire un colore specifico per il contenitore di sfondo senza influenzare il colore di sfondo della modalità scura?
Abbiamo selezionato Disabilita l'immagine di sfondo e le impostazioni di tiling sopra dalle impostazioni del tema Graceful e abbiamo aggiunto questo CSS:
// Colore di sfondo invece dell'immagine di sfondo Graceful
.background-container {
background-color: #FAF0FC;
}
Questo viola chiaro è ottimo nella palette di colori predefinita, ma appare anche in quella scura invece del grigio scuro, il che non va bene.
Il CSS originale menziona una variabile ma non so come usarla in modo da fornire colori diversi per la luce o il buio:
Dettaglio importante, vogliamo solo cambiare il colore dello sfondo principale, non lo sfondo delle aree con testo. Ecco perché non possiamo usare direttamente i valori della palette di colori (a meno che non mi sia sfuggito qualcosa).
Sto ancora cercando di cambiare lo sfondo per la modalità predefinita (chiara) mantenendo lo sfondo scuro per la modalità scura.
Anche se volessimo un colore semplice per lo sfondo chiaro, qualsiasi cosa abbiamo provato con CSS aggiunge lo stesso colore allo sfondo in modalità scura.
Ecco perché stiamo provando con un’immagine invece. Quando l’immagine di sfondo è impostata su predefinita, viene utilizzata l’immagine di sfondo di Graceful per la modalità chiara, ma per la modalità scura c’è uno sfondo scuro. Sarebbe fantastico se potessimo aggiungere un’immagine personalizzata che verrebbe utilizzata anche solo in modalità chiara, ma quando proviamo, la stessa immagine viene utilizzata in modalità scura. Poiché l’immagine di sfondo è luminosa e adatta alla modalità chiara, rovina la modalità scura.
Qualcuno può aiutarmi a capire questo, per favore?
@piffy Grazie mille. Questo è davvero un buon workaround.
Mi sono perso nella matematica per calcolare un numero SVG che, con un’opacità del 20%, risulterà in #FAF0FC, ma questo si avvicina abbastanza ai miei occhi, e la modalità scura è scura. Uff!
// Colore di sfondo invece di immagine di sfondo aggraziata
.background-container {
background: rgb(200 190 192 / 20%);
}
Il TC di Canapin funziona per me su questo tema.
Questo TC imposta le variabili CSS --d-max-width e --topic-body-width.
Potresti avere un altro TC o personalizzazioni che sovrascrivono questi valori.
Puoi provare manualmente, ad esempio:
body {
--d-max-width: 1500px;
--topic-body-width: 1500px;
}
come esempio, la modifica dello spazio, dello sfondo ecc. vengono applicate correttamente, ma il colore effettivo del testo viene ignorato e rimane il giallo predefinito. C’è qualcos’altro a cui dovrei rivolgermi per cambiarlo? Il giallo è estremamente difficile da leggere su uno sfondo bianco per impostazione predefinita.
Su mobile, la larghezza del forum è ora leggermente superiore a quella che dovrebbe essere lo schermo, c’è un modo per far sì che rimanga al massimo al 100% di larghezza su mobile e non vada oltre, ma senza annullare l’aumento di larghezza per gli utenti desktop?
Sto riscontrando lo stesso problema di @Solari sopra, ovvero le barre dei colori su mobile non sono presenti. Ho provato a usare il codice CSS suggerito in risposta ma non sembra aver risolto il problema, qualcuno ha capito come ripristinare le barre dei colori delle categorie su mobile?
Ok, ho dato un’occhiata qui su Meta con il tema Graceful selezionato. Su mobile, per qualche motivo, non ci sono barre colorate come sul desktop. Non sono sicuro del perché.
Tuttavia, sul desktop, nella barra laterale, passa alla visualizzazione mobile e dovresti essere in grado di usare l’ispezione dell’elemento. Controllerei anche in modalità desktop e vedrei come differisce il CSS. Se necessario, è probabile che si possa creare un componente personalizzato con override in Mobile per far funzionare le barre colorate come previsto.
Grazie! Lo apprezzo. Dato che altri utenti avevano già segnalato il problema in precedenza in questo thread, speravo in una soluzione più permanente che reggesse anche dopo futuri aggiornamenti di Grace.
Potrebbe essere una buona idea pubblicarlo come Bug usando i tag ux e graceful-theme
Ciò potrebbe aiutare con la visibilità.
In alternativa, questo componente a tema aggiunge una bella vista delle categorie. Viene utilizzato nel tema Air.
