Почему функция dark-light-choose() может не работать?

[Nacho_Caballero]

Я пытаюсь использовать функцию dark-light-choose($light, $dark) в своём персонализированном CSS, но она всегда возвращает $light, даже если я переключаю палитру со светлой (Clara) на тёмную (Oscura):

Более подробно о своей настройке я описал здесь:

How to change CSS color for a single theme palette?

Thanks for pointing that out, @Johani. It looks like the dark-light-choose($light, $dark) function does exactly what I want, but my problem now is that it’s not detecting the change of palette. My only active theme is called “Nacho” and it has two palettes: “Clara” (Light) and “Oscura” (Dark): [image] I’ve personalized it with this CSS: $dark-theme-ins: #4da06d; $light-theme-ins: #acf2bd; .modal.history-modal { ins { background: dark-light-choose($light-theme-ins, $dark-theme-in…

На данный момент я дважды проверил:

• что в моей тёмной теме основной цвет имеет более высокую яркость, чем вторичный цвет.
• что я использую аргументы функции в правильном порядке.

Не знаю, как отлаживать эту проблему. Возможно, дело в моей теме? Есть ли какие-то другие переменные, которые мне стоит учесть?

[awesomerobot (Kris)]

Я считаю, что из-за способа компиляции 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);
    }
}

[Nacho_Caballero]

Спасибо большое, Крис! Ты меня спас! Всё работает отлично

Я немного поигрался с этим, и единственное, что я не понимаю, — почему требуется интерполяция переменных для цветовых значений. Например, это не работает без интерполяции:

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

А это работает:

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

Обе версии работают, если $ins присвоено значение другой переменной (например: $ins: $dark-theme-ins).

Чего я не понимаю?

[pmusaraj (Penar Musaraj)]

@Nacho_Caballero

Единственное, чего я не понимаю, — зачем требуется интерполяция переменных для значений цветов.

Это требование SCSS при использовании пользовательских свойств CSS. Подробнее здесь: Sass: Property Declarations