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

Компонент темы Переключатель темной/светлой темы, который добавляет переключатель для удобного перехода между светлой и темной темами, был включен в ядро Discourse и может быть активирован через настройку сайта interface color selector.

В дополнение к различным исправлениям ошибок и улучшениям, версия ядра немного отличается от оригинального компонента темы: в ней есть третья опция «Авто», которая заставляет цветовую тему сайта соответствовать системным настройкам устройства пользователя.

Параметры выбора цвета можно настроить через настройку сайта interface color selector: переключатель может отображаться либо в заголовке сайта рядом с иконкой поиска, либо в нижнем колонтитуле боковой панели.

Вот скриншот, когда он находится в нижнем колонтитуле боковой панели:

А это — когда он находится в заголовке:

Существующие пользователи компонента темы

Мы устарели компонент темы и выпустили финальное обновление, которое определяет, доступна ли версия ядра, и предупреждает администраторов о необходимости удалить компонент и активировать версию ядра. Вот скриншот уведомления администратора:

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

43 лайка

Здравствуйте, спасибо за эту новую функцию, но я хотел бы узнать, почему при переключении в тёмный режим кнопки по-прежнему имеют чёрный текст и иконки, а не просто становятся белыми. Как можно сделать так, чтобы текст и иконки на кнопках становились белыми при активном тёмном режиме? Спасибо.

3 лайка

Можете показать скриншот проблемы, с которой вы столкнулись?

5 лайков

Вот пример: когда я переключаю Discourse в тёмный режим, текст некоторых кнопок остаётся чёрным. Мне кажется, логичнее было бы сделать текст белым. Однако я нашёл решение с помощью CSS, которое, как мне кажется, хорошо устраняет эту проблему.

$button-text-color: dark-light-choose(#ffffff, $primary);

:root {
  --button-text-color: #{$button-text-color};
}

.btn-primary {
  color: var(--button-text-color) !important;
  
  .d-icon {
    color: var(--button-text-color) !important;
  }
}
3 лайка

Это наше намеренное дизайнерское решение для основных кнопок (тех, которые имеют синий фон в цветовой палитре по умолчанию), поэтому мы не будем менять это для всех. Тем не менее, Discourse очень гибок и имеет систему темизации для переопределения базовых CSS-стилей.

7 лайков

Я уже настроил параметр, но не вижу соответствующей опции. Не могли бы вы объяснить причину?

4 лайка

Выбраны ли в ваших настройках в разделе /my/preferences/interface светлая и тёмная палитры? Переключатель появится только если выбраны обе палитры — и светлая, и тёмная:

4 лайка

Привет, я не вижу настройки цветовой палитры в своих предпочтениях, только «Тема» и «Тёмный режим»:

3 лайка

Я считаю, что если вы включите флажок «Тёмный режим» (я предполагаю, что «Mode sombre» означает тёмный режим на французском), то переключатель появится у вас. Можете ли вы попробовать это?

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

3 лайка

Очень извиняюсь… где находится настройка для включения этой функции?Её не нужно устанавливать?С новым интерфейсом администратора я немного растерян.

1 лайк

Не отображается на мобильных устройствах / iPhone

На рабочем столе: отлично.

Помню, что в предыдущей версии (версии Компонента) всё отображалось.

Просто показываю, что некоторые iPhone и форумы работают.

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

В противном случае:

  • Discourse недостаточно свежий
  • переключатель не включён в настройках сайта
  • тёмный режим не включён на уровне сайта или в настройках пользователя

Странно, ведь всё работало ещё несколько дней назад.

Я вернусь через пару дней… посмотрим.
Спасибо.

1 лайк

У меня нет этих двух опций… только обычные…

Понял! Но было непросто :slight_smile:
Из-за сочетания нескольких настроек и личных предпочтений… Думаю, стоит упростить возможность применения двух цветовых схем (тёмной и светлой) к теме.

5 лайков

Ну нет, он не появляется в подвале боковой панели.

2 лайка

Если вы перейдете по ссылке /admin/site_settings/category/all_results?filter=interface_color_selector на вашем сайте, вы должны увидеть эту настройку.

Если вы измените системную настройку на вашем телефоне или компьютере с светлой темы на темную (или наоборот), изменится ли интерфейс Discourse в соответствии с системной настройкой или останется без изменений (в светлом или темном режиме)?

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

(({dark_scheme_id, color_scheme_id}) => { return {dark_scheme_id, color_scheme_id}} )((await (await fetch(`/u/${Discourse.User.current().username}.json`)).json()).user.user_option)
Discourse.SiteSettings.default_dark_mode_color_scheme_id

Привет, мои настройки в порядке (внизу боковой панели). Если я переключусь на тёмную тему на мобильном или ПК, ничего не изменится. А насчёт консоли — я не знаю, как её использовать, извините :grimacing:

Но ваши настройки тёмной темы в системных настройках и/или ваших личных настройках, вероятно, не настроены правильно.

1 лайк

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

3 лайка