È ancora questa la soluzione per verificare la modalità scura?

[pfaffman (Jay Pfaffman)]

Continuando la discussione da Nessuna classe specifica per la modalità scura:

@awesomerobot

Questo realizzerebbe ciò di cui hai bisogno? questo dovrebbe essere aggiunto a color_definitions.scss

@if #{schemeType()} == dark {
    body {
        background: red;
    }
} @else {
     body {
        background: blue;
    }
}

Una classe sembrerebbe comunque utile, probabilmente possiamo aggiungerne una.

Ho un componente tema che sta cambiando il logo del sito in base alla categoria in cui si trova l’utente e aggiungendo loghi alle categorie nella barra laterale, e ora vogliono cambiare con un logo diverso in modalità scura.

Qualcosa del genere:

.category-my-other-identity #site-logo {
  content: url($AS) !important;
  display: inline-block;
  height: $site-logo-height;
  font-size: 0;
  margin-top: $site-margin-top;
  margin-bottom: $site-margin-bottom;
}

Sono terribile con il CSS, ma sembrerebbe molto più facile se ci fosse una classe “questa-è-la-modalità-scura”. O forse qualcosa come sopra può funzionare.

O forse se questo fosse un “vero” componente tema con impostazioni (al momento è solo codificato a mano come sopra), allora sarebbe abbastanza facile inserire quelle impostazioni nel CSS. Questo sembra quello che dovrei probabilmente fare comunque, giusto?

[david (David Taylor)]

Coincidentemente, questo è qualcosa di cui abbiamo discusso internamente questa settimana! Ecco un paio di pull request di prova concettuale:

• DEV: Introduce `html.dark-mode` and `html.light-mode` classes by davidtaylorhq · Pull Request #31397 · discourse/discourse · GitHub

• DEV: Add reactive helpers to `interfaceColor` service by davidtaylorhq · Pull Request #31415 · discourse/discourse · GitHub

Nota che questi sono solo esperimenti per aiutarci a pensare - non c’è alcuna garanzia che vengano uniti.

Per quanto riguarda il ‘subito’, la migliore opzione è probabilmente utilizzare il componente <LightDarkImg in questo modo:

app/assets/javascripts/discourse/app/components/category-logo.gjs

[Cricket (📚 The Professor of Pyrrhia)]

Ha senso. Ho avuto lo stesso problema una volta ma @david, avrebbe funzionato per me.
Inoltre, le difficoltà nell’assegnazione dei badge sarebbero considerate un bug o qualcos’altro?

[awesomerobot (Kris)]

@Cricket

Inoltre, le difficoltà nel conferimento dei badge sarebbero considerate un bug o qualcos’altro?

Potrebbe essere un bug, ma avremmo bisogno di maggiori dettagli per saperlo con certezza: inoltre, non è correlato a questo argomento, quindi la cosa migliore da fare sarebbe cercare il problema e, se non riesci a trovare una risposta, avviare un nuovo argomento descrivendo cosa stai cercando di fare e dove stai riscontrando problemi.

[Alteras (Steven Chang)]

Una soluzione CSS pura probabilmente utilizzerebbe la variabile CSS --scheme-type, o anche la proprietà color-scheme che è stata aggiunta poche ore fa (woo!), con @container style queries o light-dark().

app/assets/stylesheets/color_definitions.scss

Purtroppo light-dark() funziona solo con valori di colore. Potresti essere in grado di utilizzare @container style queries che puntano alla proprietà color-scheme (firefox non supporta ancora le style queries per le proprietà personalizzate). Non sono riuscito a testare l’idea poiché il mio ambiente di sviluppo è attualmente fuori uso.

Avere una classe dedicata .dark-mode o .light-mode sulla root sarebbe sicuramente il modo più semplice per lavorare.