Il modo corretto per modificare il CSS per le modalità chiara e scura

Supporto
1

Devo modificare un sacco di CSS per le modalità chiara e scura. Ho letto alcuni post sul forum che dicono che non esiste un modo affidabile per farlo, tra cui

Tuttavia, molti di questi sono post vecchi. Esiste un modo semplice nel 2026? Ho testato usando questi

@container style(--scheme-type: light) {
  body {
    background: #ffffff !important;
  }
}
@container style(--scheme-type: dark) {
.sidebar-wrapper {
   background: #000000 !important;
}
}

Ma non sono sicuro che sia corretto, anche se funziona.

2

La query del contenitore funzionerà, ma per semplificare puoi usare anche la funzione nativa light-dark() in CSS:

.my-thing {
  background: light-dark(#fff, #000);
  color: light-dark(#222, #eee);
}

In genere, su Discourse, facciamo affidamento su variabili di colore che cambiano automaticamente per evitare di impostare colori specifici in questo modo (--primary, --secondary, ecc.)… questo permette ai colori di funzionare indipendentemente dallo schema di colori.

Puoi vedere alcuni esempi qui: https://meta.discourse.org/styleguide/atoms/colors e come cambiano se passi alla modalità scura/chiaro. Queste variabili sono configurate dalle tavolozze di colori in /admin/config/colors

3

Fantastico, grazie mille Kris. A proposito, quel link non funziona.