Alex_P
23. Mai 2021 um 10:49
1
Ich möchte etwas Ähnliches wie das hier umsetzen:
.some-link {
@if var(--scheme-type) == 'dark' {
color: var(--primary);
} @else {
color: #3b5998;
}
}
Aber natürlich ist das nicht möglich, da es in CSS kein if gibt und SCSS nicht zur Laufzeit verarbeitet wird.
Soweit ich sehen kann, fügt Discourse keine Klassen hinzu, um anzuzeigen, ob der dunkle Modus aktiv ist, und CSS erlaubt keine benutzerdefinierten Eigenschaften in Selektoren.
Habt ihr Ideen, was die beste Workaround-Lösung sein könnte?
Ich glaube, das ist das, wonach du suchst:
Du kannst also in color_definitions.scss folgendes tun:
$my-theme-color: dark-light-choose($primary, red);
:root {
--my-theme-color: #{$my-theme-color};
}
Und dann verwendest du die neue, für Dunkel-/Hellmodus angepasste Eigenschaftsvariable in deinem Theme:
body {
color: var(--my-theme-color);
}
Alex_P
25. Mai 2021 um 05:21
3
Yay, scheint zu funktionieren
Etwas seltsam, dass die Parameter nicht in derselben Reihenfolge wie der Funktionsname sind.
$darkness
) {
@if dc-color-brightness($adjusted-color) <
dc-color-brightness($comparison-color)
{
@return scale-color($adjusted-color, $lightness: $lightness);
} @else {
@return scale-color($adjusted-color, $lightness: $darkness);
}
}
@function dark-light-choose($light-theme-result, $dark-theme-result) {
@if is-light-color-scheme() {
@return $light-theme-result;
} @else {
@return $dark-theme-result;
}
}
@function is-light-color-scheme() {
@if dc-color-brightness($primary) < dc-color-brightness($secondary) {
@return true;
Es muss also dark-light-choose(#3b5998, $primary) sein.
