Автоматическое переключение цветовой схемы в тёмном режиме

[pmusaraj (Penar Musaraj)]

Теперь вы можете настроить свой сайт Discourse так, чтобы он автоматически переключал цветовую схему, когда устройство пользователя находится в тёмном режиме. Для быстрого просмотра перейдите на экземпляр try.discourse.org и включите/выключите тёмный режим на вашем устройстве, чтобы увидеть эту новую функцию в действии. (Эта функция не включена на meta.)

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

Чтобы включить эту функцию на вашем экземпляре, выберите цветовую схему тёмного режима в настройках вашего сайта:

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

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

Файлы, загруженные в этих настройках, заменят обычную настройку с тем же именем, если: а) включено автоматическое переключение тёмного режима и устройство пользователя находится в тёмном режиме, или б) пользователь использует тёмную тему (даже если не в тёмном режиме). Сайты, которые ранее использовали https://meta.discourse.org/t/alternative-logos-for-dark-light-themes/88502, теперь могут перейти на использование настроек сайта ядра и удалить этот компонент.

Некоторые пользователи могут не захотеть автоматически переключаться на тёмную цветовую схему, когда их браузер находится в тёмном режиме. Они могут отключить эту функцию, сняв галочку с опции «Включить автоматическую цветовую схему тёмного режима» на экране «Настройки» > «Интерфейс»:

---

Выборщик цветовой схемы, выбранный пользователем

Чтобы использовать эту функцию, вам нужно создать несколько цветовых схем на вашем сайте и отметить их как выбираемые пользователями:

После этого пользователи должны увидеть два выпадающих списка на странице «Настройки» > «Интерфейс»:

См. также Update themes and plugins to support automatic dark mode

[pmusaraj (Penar Musaraj)]

Когда это попадёт в бета-канал, я смогу протестировать. Технически нет причин, по которым это не должно работать, если ChromeOS (как Android, iOS, macOS и т. д.) поддерживает медиазапрос prefer-color-scheme.

Я только что попробовал это на Chromebook в бета-канале. Это работает, но выглядит не доделанным. Мне удалось принудительно включить тёмный режим для всего веб-контента, включая сайты на Discourse (я тестировал на try.discourse.org). Однако, похоже, что веб-контент не переключается при смене темы ОС между тёмной и светлой. Кроме того, экспериментируя с настройками, я довольно часто оказывался в гибридном состоянии, когда часть интерфейса использует светлый режим, а другая — тёмный.

Для тех, кто хочет попробовать это самостоятельно, перейдите по адресу chrome://flags, найдите «Dark» и включите параметры «Dark/light mode of system UI» и «Force Dark Mode for Web Contents».

[manuel (Manuel Kostka)]

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

[pmusaraj (Penar Musaraj)]

@manuel

Но тёмная цветовая схема имеет довольно много багов при использовании этих дополнений.

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

@manuel

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

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

[Alex_P]

@pmusaraj

Некоторые пользователи могут не хотеть автоматически переключаться на тёмную цветовую схему, когда их браузер находится в тёмном режиме. Они могут отключить эту функцию, сняв галочку с опции «Включить автоматическую тёмную цветовую схему» в разделе «Настройки» > «Интерфейс»:

хм, я не вижу этого в последней версии.

[pmusaraj (Penar Musaraj)]

Правильно, флажок отображается, если доступен только один тёмный вариант оформления. Мы недавно внедрили схемы, совместимые с WCAG, что изменило интерфейс на два выпадающих списка, которые вы видите в разделе «Цветовые схемы» на вашем скриншоте.

Пользователи, желающие отключить автоматический тёмный режим, могут нажать на выпадающий список «Тёмный режим» и выбрать «Как в обычном режиме».

[littleviolette]

@pmusaraj

Некоторые пользователи могут не хотеть автоматически переключаться на тёмную цветовую схему, когда их браузер находится в тёмном режиме. Они могут отключить эту функцию, сняв галочку с опции «Включить автоматическую тёмную цветовую схему» на экране «Настройки» > «Интерфейс»:

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

[tobiaseigen]

@pmusaraj

Теперь вы можете настроить свой сайт Discourse так, чтобы он автоматически переключал цветовые схемы, когда устройство пользователя находится в тёмном режиме. Для быстрого предварительного просмотра перейдите на экземпляр try.discourse.org и включите/выключите тёмный режим на вашем устройстве, чтобы увидеть эту новую функцию в действии. (Эта функция пока не включена на meta.)

Это всё ещё лучший способ протестировать эту функцию? Я не вижу никаких изменений в теме на try, когда захожу с помощью своего Chromebook и включаю/выключаю тёмный режим. Даже обновление веб-страницы ничего не даёт. У меня установлена последняя версия ChromeOS. Я также попробовал создать тестовую учётную запись и сделал то же самое, но изменений не произошло.

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

P.S. — мне очень нравится функция записи экрана в ChromeOS. Просто супер!

[codinghorror (Jeff Atwood)]

Получается, что это работает на Windows и iOS, но не на ChromeOS? Именно это и показали тесты? Это наводит меня на мысль, что ChromeOS, возможно, требует обновления или работает не совсем так же, как все остальные? Есть какие-то мысли, @pmusaraj?

[pmusaraj (Penar Musaraj)]

Да, это действительно проблема ChromeOS. Везде, где поддерживается тёмная тема (macOS, Windows, iOS, Android и различные дистрибутивы Linux), всё работает отлично. С нашей стороны здесь делать нечего.

[anon73664359]

@pmusaraj

(Эта функция ещё не включена на meta.)

Неужели её уже можно включить?

[codinghorror (Jeff Atwood)]

Хм, хороший вопрос. Как мы можем это проверить, @pmusaraj, в Meta? Я включил «тёмный режим» для приложений в Windows 10, и теперь Twitter (веб-версия/Chrome) отображается в тёмной теме, но Meta — нет.

[pmusaraj (Penar Musaraj)]

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

[codinghorror (Jeff Atwood)]

А, я понял. Работает ли это с установкой Discourse по умолчанию? Могу ли я заставить это работать с https://discourse.codinghorror.com/?

[pmusaraj (Penar Musaraj)]

Да, это работает при стандартной установке. Например, это работает на https://try.discourse.org.

На https://discourse.codinghorror.com/ вам, возможно, придется переключить настройку (по умолчанию она установлена в «Нет»):

[codinghorror (Jeff Atwood)]

А, понятно. Моя установка довольно старая и имела только одну цветовую схему — светлую. Я добавил новую цветовую схему на основе тёмной по умолчанию, и это сработало — я могу подтвердить, что переключение тёмной и светлой цветовых схем в настройках Windows теперь автоматически влияет на Discourse!

Но работает ли это из коробки для новой установки Discourse? Надеюсь, что да?

[pmusaraj (Penar Musaraj)]

Да, по умолчанию добавлено несколько цветовых схем (Светлая, Темная, Светлая для WCAG, Темная для WCAG). Однако настройка по умолчанию отключена: новым администраторам нужно найти её, чтобы включить.

[codinghorror (Jeff Atwood)]

Может, стоит поставить целью включить эту настройку по умолчанию в этом релизе? Если мы поставим логотипы по умолчанию в тёмной версии, всё будет хорошо?

[Kchalk]

Эта функция очень полезна, спасибо, что включили её в ядро.

Я подготовил GIF, чтобы продемонстрировать её работу в Windows. Discourse переключается мгновенно, быстрее, чем сама операционная система

Дополнительные детали здесь на моём экземпляре, если интересно.

https://forums.chalk.sg/t/prefer-a-dark-theme-try-out-dark-mode/110/2

[JimPas]

@codinghorror

Можно ли заставить это работать с https://discourse.codinghorror.com/ ?

@codinghorror

Могу подтвердить, что переключение темной и светлой цветовых схем в настройках Windows теперь автоматически влияет на Discourse!

Теперь я могу читать в два раза больше.