Dark Mode Automatic Theme Switcher

:warning: Discourse now supports Automatic Dark Mode color scheme switching in core, this component is now deprecated and should no longer be used.

Repository:

https://github.com/pmusaraj/discourse-dark-mode

Installation instructions: Installing a theme or theme component

What this does?

This component allows automatic switching to a dark theme when the browser is set to dark mode. This works for logged-in users only on all browsers that support the prefers-color-scheme media query.

By default, this component is enabled and individual users can turn it off in their Preferences > Interface screen. Admins can also set the component to be default off, in which case users will see a button to enable automatic switching in their interface preferences

How it works?

If the browser is in dark mode, this component will reload Discourse with the dark theme enabled. If the browser returns to light mode, this component will reload with the default enabled theme.

It will also reload if dark mode is toggled while user is on the site (as shown in video above).

(If you have more than two themes enabled, and the user has selected a theme other than default or dark, this component will do nothing, i.e. it will respect the user’s choice.)

Configuration

  • Make sure you have a dark theme installed, and that it is selectable by users
  • Add this component to both the default theme and the dark theme (very important, if you don’t add it to both themes, users won’t be able to switch back to the default theme)
  • In the component settings, enter the id of your dark theme in dark theme id
28 лайков

Awesome, although flux is overkill just to toggle dark mode on the mac. Night Owl will do the same thing without interfering with anything else.

4 лайка

Я только что выпустил небольшое обновление для этого компонента темы, чтобы обеспечить его совместимость с iOS 13 (которая выйдет вместе с режимом «Тёмная тема», а также с возможностью автоматически включать его по вечерам).

9 лайков

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

1 лайк

Спасибо!

ID — это номер темы в URL, когда вы выбрали её в админ-панели. Например, в URL /admin/customize/themes/39 это 39.

1 лайк

Отлично, работает как по волшебству, спасибо! Очень надеюсь, что это станет частью стандартной установки discourse.

2 лайка

Google Chrome теперь поддерживает тёмный режим на iOS 13 и iPadOS 13. Однако я не уверен насчёт поддержки тёмного режима в Google Chrome на MacOS Mojave или MacOS Catalina.

Когда появится поддержка Google Chrome?

Это уже должно работать в Chrome — «под капотом» используется медиа-запрос prefers-color-scheme, и поддержка браузерами сейчас довольно хорошая: Can I use... Support tables for HTML5, CSS3, etc

О, это хорошие новости! :grinning:

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

1 лайк

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

1 лайк

У меня не работает :-/

На будущее: было бы здорово, если бы был выпадающий список для выбора нужной темы.

Функция “prefers-color-scheme” также поддерживается в Windows. Последняя версия Chrome Beta и последняя версия Firefox поддерживают этот медиа-запрос.

5 лайков

Этот компонент, похоже, вызывает проблему в версии 2.4.0.beta11+39. На странице входа в моё сообщество, доступное только для зарегистрированных пользователей (https://mydomain/login), отображается пустой экран. При отключении компонента всё работает нормально.

Я не могу воспроизвести это локально с последней версией Discourse и последней версией компонента. Когда экран входа пуст, есть ли ошибка в консоли браузера?

Обновление: проблема, с которой столкнулся Томас, теперь исправлена в компоненте. Спасибо за сообщение!

4 лайка

+1 за то, что вы сделали это частью ядра Discourse

4 лайка