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

Окей, я думаю, проблема была в том, что для каждой цветовой схемы опция «пользователи могут выбрать это…» или что-то в этом роде не была отмечена. Теперь работает.

2 лайка

У меня проблема с шприцем, которая, кажется, затрагивает только 2 категории.

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

После обновления

Если быть более точным, проблема, похоже, касается только темы с логотипами. Другие темы в категории выглядят нормально. Другие темы в этой категории не затронуты. Возможно, это связано с тем, что в этой теме загружены два логотипа?

1 лайк

Исправление: похоже, это происходит и при первой загрузке страницы. Возможно, проблема в определении тёмной темы браузером в Discourse?

2 лайка

Мне не удаётся воспроизвести эту проблему. Не могли бы вы подробно описать шаги, браузер и устройство, которые вы использовали?

2 лайка

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

Воспроизведение:

  1. Установите настройки устройства в светлый режим.
  2. Включите кнопку переключения в боковой панели.
  3. Включите тёмный режим на устройстве.
  4. Отключите тёмный режим на устройстве.

→ Экземпляр Discourse переключается в светлый режим. Ожидаемое поведение: форум остаётся в тёмном режиме, так как пользователь вручную выбрал этот режим.

В целом было бы здорово получить возможность вернуть старое поведение: переключение между тёмным режимом, светлым режимом и автоматическим включением/выключением.

3 лайка

Я использую Android 10, кажется, на LG G8X ThinQ V9ne с чехлом с двойным экраном.

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

@jrgong, объяснение того, как воспроизвести проблему, и предполагаемая причина — это то же самое, что и у меня.

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

1 лайк

Я вижу кратковременную вспышку противоположной цветовой схемы при обновлении страницы или при открытии ссылки в новой вкладке. Также по какой-то причине я наблюдаю похожую вспышку после отправки нового ответа.

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

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

5 лайков

@jordan.vidrine Хотел ещё раз поднять этот вопрос. :slight_smile:

2 лайка

Оно должно отображаться в новом выпадающем меню заголовка. (То, которое является «боковой панелью», но в виде выпадающего меню)

1 лайк

@awesomerobot и @jrgong, просто обновление. Это будет проверено :+1:

2 лайка

К сожалению, этого не произошло. Но теперь я знаю почему.

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

Спасибо! :slight_smile:

2 лайка

Этот компонент может выбирать между светлой и тёмной цветовыми схемами, но он не переключается между светлым и тёмным режимами, как в случае с @media (prefers-color-scheme), который не учитывается.

Компонент темы, который выглядит так:

CSS

@media (prefers-color-scheme: light) {
    .darkonly { display: none; }
}
@media (prefers-color-scheme: dark) {
    .lightonly { display: none; }
}

и HEAD

<script type='text/x-handlebars' data-template-name='/connectors/above-site-header/darkdetector'>
    <span class="darkonly">Тёмная</span><span class="lightonly">Светлая</span>
</script>

Будет показывать текст «светлая», даже если включён тёмный «режим» (или, точнее говоря, будет показывать «тёмная» или «светлая» в зависимости от настройки тёмного режима операционной системы, независимо от выбранной цветовой схемы).

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

3 лайка

Если Discourse работает похоже на Windows XP, попробуйте установить браузер или ОС в светлый режим, а сам Discourse — в тёмный. В Windows XP цветовая схема всегда накладывается поверх настроек по умолчанию.

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

image

Если доступна только одна темная цветовая схема, выбираемая пользователем, выпадающий список «Темная» исчезает, и вместо него появляется флажок «Автоматический темный режим».

Если пользователь думает: «Эй, я не хочу автоматический режим, я хочу использовать переключатель», и снимает флажок «Автоматический», то переключатель исчезает.

Таким образом, чтобы получить ручной переключатель, необходимо включить автоматическое переключение. :thinking:

5 лайков

Таким образом, цвет выреза на iPhone определяется с помощью

<meta name="theme-color" media="(prefers-color-scheme: ...)" content="#...">

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

1 лайк

Полагаю, такое поведение нежелательно:

В настоящее время системная цветовая схема установлена в режим «Тёмная тема». Я использую чёрно-белый логотип для светлой и тёмной тем.

  1. На инстансе я установил тему «Светлая».
  2. Перешёл на страницу темы.
  3. Изначально загружается правильный логотип, однако:
  4. При прокрутке вниз и вверх (шапка должна переключаться: полный логотип → заголовок темы → полный логотип).
  5. При прокрутке обратно вверх (например, когда заголовок темы снова сменяется полным логотипом) отображается неверный логотип (белый на белом).
2 лайка

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

Воспроизведение:

  • чистая установка Discourse «из коробки» на момент сегодняшнего утра
  • вижу это в своём профиле → интерфейс

  • удаляю цветовые схемы Dracula, Solarized Dark и WCAG Dark
  • возвращаюсь в профиль
  • выпадающий список исчезает, появляется заголовок «Тёмный режим» и флажок

Управляется параметрами showDarkColorSchemeSelector и showDarkModeToggle в файле interface.hbs. См. также комментарий в файле interface.js

  @discourseComputed("userSelectableDarkColorSchemes")
  showDarkColorSchemeSelector(darkSchemes) {
    // когда установлен тёмный режим по умолчанию
    // в выпадающем списке два элемента (отключить / использовать режим сайта по умолчанию)
    // но в этом случае мы показываем флажок
    const minToShow = this.defaultDarkSchemeId > 0 ? 2 : 1;
    return darkSchemes && darkSchemes.length > minToShow;
  },
2 лайка

:star_struck: Спасибо за такой подробный ответ. Я лишь «не разрешал» выбирать эти тёмные темы, но теперь я проведу тестирование, полностью удалив их.

1 лайк

Да, вы нашли хороший частный случай. Этот переключатель будет работать в данной ситуации только в том случае, если у пользователя также включена эта персональная настройка в discourse-core.

Мы займемся тем, чтобы это также работало в таком случае.

4 лайка