dark-light-choose($light, $dark) 関数をカスタマイズした CSS で使用しようとしていますが、パレットをライト（Clara）からダーク（Oscura）に変更しても、常に $light が返ってきてしまいます。
私の環境設定について詳しくは、こちらで説明しています：
これまでに以下を確認しました：
しかし、デバッグ方法がわかりません。これはテーマ自体に問題があるのでしょうか？他に考慮すべき変数はありますか？
SCSS のコンパイル方法により、カスタムのダーク/ライト定義はテーマ内の color_definitions.scss に追加する必要があり、他の SCSS ファイルでは機能しません。
color_definitions.scss はカスケードの上位（多くのデフォルトスタイルより前）にあるため、.modal.history-modal ins の部分をそこに追加するのは避けてください。代わりに、色の定義そのものを追加します。
$dark-theme-ins: #acf2bd;
$light-theme-ins: #4da06d;
$ins: dark-light-choose($light-theme-ins, $dark-theme-ins);
:root {
--custom-ins: #{$ins};
}
その後、common またはテーマの他の任意のファイルで以下のように記述できます。
.modal.history-modal {
ins {
background: var(--custom-ins);
}
}
クリス、本当にありがとうございます！助かりました。完璧に動作しています🎉
試行錯誤しているのですが、色値において変数補間が必要な理由が理解できません。例えば、以下は補間なしでは動作しません。
$ins: #7f7e7e;
:root {
--custom-ins: $ins;
}
しかし、こちらは動作します。
$ins: #7f7e7e;
:root {
--custom-ins: #{$ins};
}
$ins に変数を代入した場合（例：$ins: $dark-theme-ins）は、両方のバージョンが動作します。
何が足りないのでしょうか？
これは、CSS カスタムプロパティを使用する際の SCSS の要件です。詳細はこちら: Sass: Property Declarations