Wie ändere ich ein CSS-Element basierend auf dem Dunkel- oder Hellmodus?

[jordan-violet]

Ich konnte bei meiner Suche keine definitive Antwort finden, aber ich möchte ein CSS-Element für dunkle und ein anderes für helle Modi ändern.

Wie erreiche ich das am besten in Discourse?

[Lilly (Lillian Louis)]

Ich vermute, dieses Thema könnte Ihnen helfen.

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]

Ich glaube nicht, dass ich color_definitions.css bearbeiten kann, da ich ein Unternehmenskunde bin, der von CDCK gehostet wird. Ich nehme an, ich müsste mich dann an sie wenden.\n\nDanke, Lilly!

[Lilly (Lillian Louis)]

Ich glaube, Sie können es mit Ihrem eigenen CSS in einem anderen Thema oder einer anderen Komponente überschreiben Ich bin mir nicht sicher, wie das funktioniert, also werde ich heute damit herumspielen und sehen, ob ich eine bedingte CSS-Regel für Dunkel- und Hellmodus erstellen kann. Ich glaube, das sollte möglich sein.

[Lilly (Lillian Louis)]

@jordan-violet

Ich möchte ein CSS-Element ändern

Welches CSS-Element möchten Sie basierend auf dem Dunkel-/Hellmodus ändern?

Sie können Farbdefinitionen zum Tab „Farbdefinitionen“ des Abschnitts „CSS/HTML bearbeiten“ eines Themas hinzufügen (color_definitions-Stylesheet).

[jordan-violet]

Entschuldigung für die späte Antwort! Ich wollte die Farbe des hervorgehobenen* Balkens über einem Expertenantwortbeitrag in einem Thema ändern, aber ich wollte den Balken für helle und dunkle Designs in verschiedenen Farben hervorheben.

[Lilly (Lillian Louis)]

@Jordan Violet

blighted bar

Ich bin mir nicht sicher, was Sie meinen? Können Sie einen Screenshot machen?

[jordan-violet]

Hervorgehoben** Entschuldigung, Tippfehler auf dem Handy!

[manuel (Manuel Kostka)]

@Lilly

Ich werde heute damit herumspielen und sehen, ob ich eine CSS-Bedingung für den Dunkel-Hell-Modus finden kann. Ich glaube, das sollte möglich sein.

Ich würde mich gerne eines Besseren belehren lassen, aber ich glaube nicht, dass es eine zuverlässige Prüfung gibt, die du mit CSS verwenden könntest.

@sp-jordan-violet Normalerweise geht man so vor, dass man Farbvariablen aus seinen dunklen und hellen Farbschemata verwendet. Du kannst deine aktuellen Werte mit dem Browser-Inspektor überprüfen. Ich glaube, du kannst keine neuen Variablen hinzufügen, die je nach Farbschema wechseln. Aber es gibt eine ganze Menge Variablen zur Auswahl und du kannst sie in jeder benutzerdefinierten Deklaration verwenden. Z.B.

.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%
    );
}

könnte dir eine Beitragsmarkierung wie diese geben

[Lilly (Lillian Louis)]

@manuel

Ich würde mich gerne irren, aber ich glaube nicht, dass es eine zuverlässige Überprüfung gibt, die man mit CSS durchführen könnte.

Ja, da stimme ich zu. Ich habe auch mit einer JavaScript/CSS-Lösung herumgespielt, aber bisher hat noch nichts funktioniert.

[jordan-violet]

Wow, ich mag diese Idee wirklich!!

[Lilly (Lillian Louis)]

Das sieht wirklich cool aus. Gut gemacht