Переключатель тёмного/светлого режима

Настройка Компонент темы
,
163

Ваш вопрос касается этого компонента темы, который добавляет переключатель для включения темного режима, или общего определения темной цветовой палитры?

Существует dark-light-choose.

2 лайка
164

Спасибо за вашу помощь.
Я использую компонент переключения тёмного/светлого режима.

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

Я попытался следовать по ссылке, которую вы опубликовали, а также по этой:

которая содержит немного больше деталей, но у меня не получилось. Я попытался добавить файлы изображений (JPG) $bg-light и $bg-dark в свою тему.

image
image352×268 9.78 KB

Также я пытался добавить стилилистический файл color_definitions.scss в свою тему с кодом из того поста:

$bg: url(dark-light-choose($bg-light, $bg-dark));

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

Кроме того, я попытался создать тему на GitHub:

Как я уже сказал, извините, что немного запутался.
Если мне стоит начать новую тему, дайте знать, а также в какую категорию её лучше разместить.
Спасибо за вашу помощь.

1 лайк
165

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

Думаю, вы уже почти на правильном пути. Одна вещь, которую я заметил: вы используете url() дважды:

1 лайк
166

Моя проблема точно не связана с компонентом темы
Спасибо за помощь, извините за шум :blush:

Вау… не рассказывайте никому, это мой секретный ингредиент для смешивания двух фонов. Первый имеет приоритет над вторым. Так что первый — это линейный градиент, где половина прозрачная, а второй — статичное изображение :wink: :sunglasses:

вот этот эффект в действии

image
image645×486 46.9 KB

167

Я понял, что вы используете два фона.

background-image: linear-gradient(to top, white, 15%, transparent), url(var(--custom-bg));

Но разве url(var(--custom-bg)) в сочетании с --custom-bg: #{$bg}; и $bg: url(dark-light-choose($bg-light, $bg-dark)); не приводит к чему-то вроде url(url(dark-light-choose($bg-light, $bg-dark)))?

3 лайка
168

Теперь в ядре доступна кнопка переключения тёмной/светлой темы, поэтому этот компонент темы устарел. Дополнительные сведения см. в объявлении:

5 лайков