現在、1 つのテーマに 2 つのパレット（明るいパレットと暗いパレット）を持っています。暗いパレットには 90% 満足していますが、いくつかの修正を加えたいと考えています。
例えば、暗いパレットでは、囁き（whispers）の背景色と前景色の間に十分なコントラストがありません：
.whisper .topic-body .cooked {
color: var(--primary-medium)
}
CSS をオーバーライドすることはできますが、var(--primary-light) に変更すると、明るいパレットにも影響してしまいます。
単一のパレットをターゲットにする方法はあるでしょうか、それとも、それぞれ独自のパレットを持つ 2 つの異なるテーマを作成するのがベストプラクティスでしょうか？
この 2 つ目のアプローチの問題点は、色とは無関係な他のカスタマイズを多く重複させなければならないことです。
もちろん、明色または暗色のカラーパレットかどうかを確認できる SCSS 関数がいくつかあります。
以下のように使用します。
@if is-light-color-scheme() {
// 明色カラーパレット用の CSS
h1 {
color: green;
}
}
@if is-dark-color-scheme() {
// 暗色カラーパレット用の CSS
h1 {
color: red;
}
}
ご指摘ありがとうございます、@Johani さん。dark-light-choose($light, $dark) 関数はまさに私が望む動きをするようですが、現在はパレットの変更を検出できていないのが問題です。
現在アクティブなテーマは「Nacho」で、2 つのパレット「Clara」（Light）と「Oscura」（Dark）を持っています。
これを以下の CSS でカスタマイズしています。
$dark-theme-ins: #4da06d;
$light-theme-ins: #acf2bd;
.modal.history-modal {
ins {
background: dark-light-choose($light-theme-ins, $dark-theme-ins);
}
}
Light パレットでは正常に動作します。
しかし、Dark パレットでは動作しません。
CSS を以下のように変更すると動作します。
.modal.history-modal {
ins {
background: $dark-theme-ins;
}
}
つまり、Dark パレットへの変更が検出されていないようです。is-light-color-scheme は $primary と $secondary の明るさを参照しているようですが、私の Dark パレットは以下の通りです。
そして Bright パレットは以下です。
もう思いつく手がありません。
