Come cambiare elemento css in base alla modalità scura o chiara?

[jordan-violet]

Non mi sembra di aver trovato una risposta definitiva durante la ricerca, ma voglio cambiare un elemento CSS in un modo per il buio e in un altro per il chiaro.

Qual è il modo migliore per realizzarlo in Discourse?

[Lilly (Lillian Louis)]

Sospetto che questo argomento possa esserti d’aiuto.

Use color scheme color if dark scheme, otherwise use my color in theme

I want to do something like this .some-link { @if var(--scheme-type) == 'dark' { color: var(--primary); } @else { color: #3b5998; } but of course it is not possible because there is no if in CSS and SCSS is not processed at runtime. And as far as I can see Discourse does not add any classes to indicate whether the dark scheme is active, and CSS does not allow custom properties in selectors. Any ideas what could be the best workaround?

[jordan-violet]

Non credo di poter modificare color_definitions.css poiché sono un cliente enterprise ospitato da CDCK. Suppongo che dovrò contattarli a riguardo allora.

Grazie, Lilly!

[Lilly (Lillian Louis)]

penso che tu possa sovrascriverlo con il tuo CSS in un altro tema o componente non sono sicuro di come funzioni, quindi ci giocherò oggi e vedrò se riesco a trovare un CSS condizionale per la modalità scura/chiara. Penso che dovrebbe essere possibile.

[Lilly (Lillian Louis)]

@jordan-violet

Voglio cambiare un elemento CSS

quale elemento CSS vuoi cambiare in base alla modalità scura/chiara?

puoi aggiungere definizioni di colore alla scheda delle definizioni di colore della modifica CSS/HTML di un tema (foglio di stile color_definitions).

[jordan-violet]

Mi scuso per la risposta tardiva! Stavo cercando di cambiare il colore della barra evidenziata* in cima a un post di risposta di un esperto in un argomento, ma volevo evidenziare la barra con un colore diverso per il tema chiaro e scuro.

[Lilly (Lillian Louis)]

@jordan-violet

barra contaminata

non sono sicuro di cosa intendi? puoi fornire uno screenshot?

[jordan-violet]

Evidenziato** scusa, errore di battitura da cellulare!

[manuel (Manuel Kostka)]

@Lilly

Ci giocherò oggi e vedrò se riesco a trovare un CSS condizionale modalità scura-chiara. Penso che questo dovrebbe essere possibile.

Mi piacerebbe essere smentito, ma penso che non ci sia un controllo affidabile che potresti usare con il CSS.

@sp-jordan-violet di solito la strada da percorrere è utilizzare variabili di colore dai tuoi schemi di colori scuri e chiari. Puoi controllare i tuoi valori correnti utilizzando l’ispettore del browser. Credo che non sia possibile aggiungere nuove variabili che cambino a seconda dello schema di colori. Ma ci sono molte variabili tra cui scegliere e puoi usarle in qualsiasi dichiarazione personalizzata. Ad esempio

.topic-avatar {
  height: unset;
  align-self: stretch;
  background-image: linear-gradient(
      to right,
      transparent -40%,
      var(--secondary) 80%
    ),
    linear-gradient(
      to bottom,
      var(--tertiary-300) 0%,
      var(--highlight) 50%,
      var(--quaternary-low) 100%
    );
}

potrebbe darti un’evidenziazione dei post come questa

[Lilly (Lillian Louis)]

@manuel

Mi piacerebbe essere smentito su questo, ma penso che non ci sia un controllo affidabile che potresti usare con css.

sì, tendo ad essere d’accordo. Ho anche armeggiato con una soluzione javascript / css ma ancora niente di funzionante

[jordan-violet]

Woah, mi piace molto questa idea!!

[Lilly (Lillian Louis)]

sembra davvero fantastico. ben fatto