Как добавить специфический класс body для тёмного (или светлого) режима?

Похоже, что сейчас нет специального класса.

Я нашел это, но это не работает, так как ID темы одинаков для темной и светлой режимов (что, вероятно, определяется цветовой схемой).

Думаю, короткий скрипт мог бы помочь? И, возможно, стоит добавить это в ядро Discourse?

Не могли бы вы объяснить, почему необходимо добавлять к тегу body конкретные классы для режимов dark или light?

Не позволяет ли эта базовая функция решить вашу задачу?

Персонал форума, который я мигрирую, недоволен конкретной сгенерированной переменной цвета (--tertiary-very-low), которая отвечает за этот специфический коричневатый оттенок:

Они хотели бы его подкорректировать, но, похоже, я не могу этого сделать, так как переменная генерируется автоматически, а для темной темы нет класса, специфичного для родительского элемента.

Однако я наткнулся на эту информацию:

Не знаю, актуальна ли она; пока не смог проверить, так как сейчас слишком много других дел :sweat_smile:. Но если это сработает, будет достаточно. А ещё лучше, если получится идеально.

Мы (извините, я буду говорить «мы», так как я вместе с @Canapin вносим правки в наш форум) создали тёмную тему, используя предустановку «Café crème» во французской версии Discourse (предположительно, «кофе»), и просто изменили цвет :heart: с коричневого на красный.

Странность этой темы в том, что гиперссылки имеют почти тот же цвет, что и основной текст. Поэтому, когда ссылка встроена в текст, её почти не видно:


(да, последние два слова «cliquez-ici» — это ссылка на веб-страницу…)

Поэтому наша идея заключалась в том, чтобы сделать их немного коричневыми, чтобы они выделялись. Но при изменении настройки quaternary в цветовой палитре меняется сразу множество цветов: фон «пузыря» за прямым сообщением становится ближе к птичьему помёту, чем тот коричневый оттенок, который показан в первом сообщении @Canapin. Меняется и верхнее окно с сообщением (блок «исходящая почта отключена») — он тоже становится этого же цвета, напоминающего птичий помёт.

Поэтому сначала мы подумали использовать css, чтобы покрасить гиперссылки, но пока не нашли, как это сделать.

Использование .cooked a в качестве CSS-селектора должно позволить вам задать собственный цвет для этих ссылок.

Хотя наша базовая система теперь поддерживает выбор цветовой схемы (тёмная/светлая) для соответствующих режимов, вы также можете использовать CSS-медиазапрос для тёмных/светлых режимов следующим образом:

@media (prefers-color-scheme: dark) {
    .cooked a, .d-editor-preview a {
        color: var(--primary-low-mid);
    }
}

Работа выполнена. Спасибо!

Ой.
Нет, это не сработало.

Поправьте меня, если я ошибаюсь. prefers-color-scheme основан на предпочтениях устройства, а не на фактически выбранной теме Discourse?

На моём устройстве под управлением Windows я установил тёмную тему. Поэтому веб-сайты, использующие настройки моего устройства, при возможности отображают тёмную тему.

Но на моём форуме я намеренно выбрал светлую тему, а не тёмную.

Медиа-запрос prefers-color-scheme всё равно загружается, несмотря на то, что я использую светлую тему:

Светлая тема, без тёмного режима,

Тем не менее, правило для тёмной темы всё равно применяется:

На весь экран:

Извините, я неправильно понял вас: речь шла о системной настройке тёмного режима, которая активирует тёмный режим на форуме.

Получается, что вы лично используете светлую цветовую схему, а ваши пользователи — тёмную?

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

Привет, извините, да, это не совсем понятно, особенно потому что я говорил о двух вещах одного типа, но с разными цветовыми схемами. Кроме того, это было немного запутанно и для меня.

Так что мой вопрос такой: в Discourse как узнать, какая цветовая схема используется, независимо от настроек тёмного/светлого режима устройства?

Если я правильно понимаю:
Если мое устройство (Windows 10) настроено на тёмный режим, но в Discourse выбрана светлая цветовая схема, медиа-запрос (prefers-color-scheme: dark) в CSS форума всё равно вернёт что-то вроде «true», и мои вложенные правила применятся, хотя я выбрал светлую цветовую схему на форуме (даже если Windows настроена на тёмный режим).

Итак: как узнать в HTML-коде Discourse, какая сейчас цветовая схема — светлая или тёмная? Я не нашёл никаких родительских классов вроде «light-color-scheme» или «dark-color-scheme». Поэтому я не могу дифференцировать/нацеливаться на конкретные цветовые схемы в CSS и создавать правила только для одной из них.

Спасибо за уточнение, теперь я понимаю.

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

Если можно уточнить: дело в том, что вам не нравится цвет, который наши функции генерируют для --tertiary в вашей текущей тёмной схеме?

Чего именно вы хотите добиться с помощью класса body, что, по вашему мнению, сейчас невозможно сделать?

Да, именно так :slight_smile:

Теперь, когда я прочитал этот вопрос… я не уверен, поскольку, насколько я знаю, единственный способ заменить сгенерированный цвет — это

:root {
  --primary-medium: #666666;
}

Но поскольку это селектор root, класс на элементе html или body не может нацелиться на цветовую схему до :root.
Так что… я не знаю.

Если коротко, идея заключалась бы в том, чтобы изменить конкретный сгенерированный цвет для конкретной цветовой схемы. :person_shrugging:

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

Если хотите, есть своего рода скрытый обходной путь.

Вы можете создать папку и поместить в неё только файл about.json.

Я сам поступил так, чтобы создать цветовую схему solarized light, поскольку хотел задать собственные варианты, а не полагаться на встроенные функции цветов.

Вот сам файл about.json, который я создал.

Затем вы установите эту «тему», что, в свою очередь, применит эту цветовую схему к вашему форуму. После этого вы сможете сделать её доступной для использования и в других темах.

{
  "name": "Solarized Light",
  "component": false,
  "license_url": null,
  "about_url": null,
  "authors": null,
  "theme_version": null,
  "minimum_discourse_version": null,
  "maximum_discourse_version": null,
  "assets": {
  },
  "color_schemes": {
    "Solarized Light": {
      "primary": "002B36",
      "primary-high": "4C6869",
      "primary-medium": "7E918C",
      "primary-low-mid": "A4AFA5",
      "primary-low": "D6D8C7",
      "primary-very-low": "F0ECD7",
      "secondary": "FCF6E1",
      "secondary-very-high": "E8E6D3",
      "secondary-high": "97A59D",
      "secondary-medium": "6C8280",
      "secondary-low": "325458",
      "tertiary": "0088cc",
      "tertiary-high": "329ED0",
      "tertiary-medium": "7EBFD7",
      "tertiary-low": "D6E6DE",
      "quaternary": "e45735",
      "header_background": "FCF6E1",
      "header_primary": "002B36",
      "highlight": "ffff4d",
      "highlight-high": "BCAA7F",
      "highlight-medium": "E3D0A3",
      "highlight-low": "FDF9AD",
      "danger": "e45735",
      "danger-low": "F8D9C2",
      "success": "009900",
      "success-medium": "4CB544",
      "success-low": "CFE5B9",
      "love": "fa6c8d",
      "love-low": "FCDDD2"
    }
  },
  "modifiers": {
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}

Помню, что видел это давным-давно, когда я глубже погружался в настройку своих установок Discourse!

Определённо хорошее обходное решение. Спасибо. Я буду считать это правильным решением, даже если его могут посчитать немного неуклюжим.