Это всё ещё решение для проверки тёмного режима?

Разработка
1

Продолжаем обсуждение из Нет специального класса для темной темы:

У меня есть компонент темы, который меняет логотип сайта в зависимости от категории, в которой находится пользователь, и добавляет логотипы к категориям в боковой панели. Теперь они хотят использовать другой логотип в темной теме.

Что-то вроде этого:

.category-my-other-identity #site-logo {
  content: url($AS) !important;
  display: inline-block;
  height: $site-logo-height;
  font-size: 0;
  margin-top: $site-margin-top;
  margin-bottom: $site-margin-bottom;
}

Я ужасно разбираюсь в CSS, но кажется, что было бы гораздо проще, если бы существовал класс “это-темная-режим”. Или, возможно, что-то вроде вышеприведенного сработает.

Или, возможно, если бы это был «настоящий» компонент темы с настройками (сейчас он просто написан вручную, как выше), то было бы достаточно просто добавить эти настройки в CSS. Похоже, что мне, вероятно, следует сделать именно это, верно?

2

Как совпадение, мы как раз обсуждали это внутри компании на этой неделе! Вот несколько pull-запросов с концептуальными доказательствами:

Обратите внимание, что это лишь эксперименты для помощи в наших размышлениях — нет никаких гарантий, что какой-либо из них будет принят.

Что касается «прямо сейчас», лучший вариант, вероятно, — использовать компонент <LightDarkImg следующим образом:

3

Это имеет смысл. У меня тоже был такой случай, но @david, для меня это сработало бы.
Кроме того, считается ли сложность выдачи значков ошибкой или чем-то другим?

4

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

5

Чисто CSS-решение, вероятно, использовало бы CSS-переменную --scheme-type или даже свойство color-scheme, которое было добавлено всего несколько часов назад (ура!), в сочетании с @container-запросами по стилю или функцией light-dark().

К сожалению, light-dark() работает только со значениями цветов. Возможно, можно использовать @container-запросы по стилю, нацеленные на свойство color-scheme (в Firefox пока не поддерживаются запросы по стилю для пользовательских свойств). Протестировать эту идею пока не удалось, так как моя среда разработки сейчас недоступна.

Наличие отдельного класса .dark-mode или .light-mode на корне определённо сделало бы работу с этим максимально простой.