Как изменить цвет CSS для одной палитры темы?

[Nacho_Caballero]

У меня в настоящее время одна тема с двумя палитрами (одна светлая, одна темная). Я на 90% доволен темной палитрой, но в некоторых случаях хотел бы внести исправления.

Например, в темной палитре недостаточно контраста между фоновым цветом и цветом текста для сообщений в личных сообщениях:

.whisper .topic-body .cooked {
    color: var(--primary-medium)
}

Я знаю, что могу переопределить CSS, но если я изменю его на var(--primary-light), это также повлияет на светлую палитру.

Есть ли способ настроить одну палитру, или лучшая практика — создать две разные темы, каждая со своей палитрой?

Моя проблема со вторым подходом заключается в том, что мне придется дублировать множество других настроек, которые не имеют ничего общего с цветом.

[Johani (Joe)]

Конечно, есть несколько функций SCSS, которые можно использовать для проверки, находится ли вы на светлой или тёмной цветовой палитре.

app/assets/stylesheets/common/foundation/variables.scss

Используйте их следующим образом.

@if is-light-color-scheme() {
  // CSS для светлой цветовой палитры
  h1 {
    color: green;
  }
}

@if is-dark-color-scheme() {
  // CSS для тёмной цветовой палитры
  h1 {
    color: red;
  }
}

[Nacho_Caballero]

Спасибо, что указали на это, @Johani. Похоже, что функция dark-light-choose($light, $dark) делает именно то, что мне нужно, но теперь у меня проблема: она не определяет смену палитры.

Моя единственная активная тема называется «Nacho», и у неё есть две палитры: «Clara» (светлая) и «Oscura» (тёмная):

Я настроил её с помощью этого CSS:

$dark-theme-ins: #4da06d;
$light-theme-ins: #acf2bd;
.modal.history-modal {
    ins {
        background: dark-light-choose($light-theme-ins, $dark-theme-ins);
    }
}

Это работает со светлой палитрой:

Но не работает с тёмной палитрой:

Если я изменю CSS следующим образом, всё заработает:

.modal.history-modal {
    ins {
        background: $dark-theme-ins;
    }
}

Похоже, что смена на тёмную палитру не определяется. Я вижу, что is-light-color-scheme проверяет яркость $primary и $secondary. Вот моя тёмная палитра:

А вот светлая палитра:

У меня больше нет идей.

[Nacho_Caballero]

Это было исправлено здесь: Why might dark-light-choose() not work? - #2 by awesomerobot