Warum funktioniert dark-light-choose() möglicherweise nicht?

Unterstützung
1

Ich versuche, die Funktion dark-light-choose($light, $dark) in meinem personalisierten CSS zu verwenden, aber sie gibt immer $light zurück, selbst wenn ich das Farbschema von hell (Clara) auf dunkel (Oscura) ändere:

image
image1380×594 39 KB

Weitere Details zu meinem Setup finden Sie hier:

Bisher habe ich Folgendes überprüft:

  • dass die primäre Farbe in meinem dunklen Theme heller ist als die Sekundärfarbe.
  • dass ich die Funktionsargumente in der richtigen Reihenfolge verwende.

Ich habe keine Ahnung, wie ich das Problem debuggen soll. Könnte dies ein Problem in meinem Theme sein? Gibt es eine andere Variable, die ich berücksichtigen sollte?

2

Ich vermute, dass aufgrund der Art und Weise, wie SCSS kompiliert wird, benutzerdefinierte Dark/Light-Definitionen zu color_definitions.scss innerhalb eines Themes hinzugefügt werden müssen und in anderen SCSS-Dateien nicht funktionieren werden.

Screen Shot 2020-12-04 at 9.54.13 PM
Screen Shot 2020-12-04 at 9.54.13 PM936×138 14.1 KB

color_definitions.scss befindet sich hoch in der Kaskade (vor vielen der Standardstile), daher möchten Sie den Teil .modal.history-modal ins dort nicht hinzufügen. Stattdessen können Sie einfach die Farbdefinition selbst hinzufügen…

$dark-theme-ins: #acf2bd;
$light-theme-ins: #4da06d;

$ins: dark-light-choose($light-theme-ins, $dark-theme-ins);

:root {
  --custom-ins: #{$ins};
}

Und dann können Sie in common oder in einer der anderen Dateien Ihres Themes Folgendes tun:

.modal.history-modal {
    ins {
        background: var(--custom-ins);
    }
}
3

Vielen Dank, Kris! Du hast mir den Retter gespielt! Es funktioniert einwandfrei :tada:

Ich habe ein bisschen damit experimentiert, und das Einzige, was ich nicht verstehe, ist, warum bei Farbwerten eine Variableninterpolation erforderlich ist. Zum Beispiel funktioniert dies ohne Interpolation nicht:

$ins: #7f7e7e;
:root {
  --custom-ins: $ins;
}

Aber dies funktioniert:

$ins: #7f7e7e;
:root {
  --custom-ins: #{$ins};
}

Beide Versionen funktionieren, wenn $ins einer Variablen zugewiesen ist (zum Beispiel: $ins: $dark-theme-ins).

Was übersehe ich?

4

Dies ist eine SCSS-Anforderung bei der Verwendung von benutzerdefinierten CSS-Eigenschaften. Weitere Details finden Sie hier: Sass: Property Declarations