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

[Discourse]

Этот компонент темы устарел. Пожалуйста, ознакомьтесь с информацией по ссылке: Dark/light mode toggle now available in core

	Краткое описание	Переключатель тёмного/светлого режима добавляет в меню-бургер кликабельную кнопку для переключения цветовой схемы. Переключатель позволяет выбрать светлую или тёмную цветовую схему для одной темы.
	Ссылка на репозиторий	https://github.com/discourse/discourse-color-scheme-toggle
	Новичок в темах Discourse?	Руководство для начинающих по использованию тем Discourse

Установить этот компонент темы

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

 Поддержка  Ошибка  UX  Функция

Возможности

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

Вы можете выбрать отображение переключателя в новой боковой панели Discourse или в заголовке рядом с другими иконками.

Боковая панель

Заголовок

Важные шаги

Для корректной работы необходимо, чтобы в разделе /admin/customize/colors было включено как минимум два варианта цветовой схемы. Как минимум для двух цветов должна быть включена опция «Цветовая схема может быть выбрана пользователями».

Необходимо установить цветовую схему по умолчанию для тёмного режима: /admin/site_settings/category/basic?filter=dark

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

Настройки

Название	Описание
svg icons
add color scheme toggle to header	Добавить кнопку переключения цветовой схемы в заголовок сайта

Перевод	Значение по умолчанию
toggle_button_title	Переключить цветовую схему

Размещено нами? Компоненты тем доступны для использования в наших тарифах Standard, Business и Enterprise.

[chrisbagsrocks]

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

[jordan.vidrine]

Администратор может включить этот компонент для всего сайта.

Далее, в зависимости от настроек, установленных администратором при настройке компонента, переключатель будет либо в меню пользователя (гамбургер-меню), либо в заголовке форума. Все пользователи смогут им пользоваться после включения администратором.

[chrisbagsrocks]

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

[jordan.vidrine]

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

Возможно, вам также потребуется добавить выбор здесь: /admin/site_settings/category/basic?filter=dark

Я обновил инструкции, чтобы отразить это дополнение. Извините за путаницу!

[bekircem]

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

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

[jordan.vidrine]

Хм, я думаю, это происходит потому, что я проверяю настройки схемы пользователя prefers-dark на основе настроек браузера и системы.

Можешь открыть консоль инспектора и посмотреть, появляется ли что-то при попытке использовать переключатель?

Мне, возможно, придётся заняться этим вопросом.

[poyrazdursuncan (Dursun Can)]

Предупреждения на domain.com/logs ;

Тема/компонент переключения тёмной/светлой темы вызывает ошибки

initialize@https://develcoder.com/theme-javascripts/1d5669cf8344e0837406cef0be37bb086b5968f5.js?__ws=develcoder.com:153:73

initialize@https://develcoder.com/assets/application-01686ed6ee22a989833acbbce970ba63.js:1:11855

https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268273

each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:429458

walk@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:428478

each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427828

topsort@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427874

_runInitializer@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268501

runInstanceInitializers@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268222

_bootSync@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:252462

didBecomeReady@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:257791

invoke@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418024

flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:417018

flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418946

_end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424401

end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:421081

_run@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424937

u@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26509


https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26807

[Mr.X_Mr.X]

У меня то же самое. Компонент темной темы вызывает ошибки.

[jordan.vidrine]

@poyrazdursuncan

Тема/компонент переключения тёмного/светлого режима вызывает ошибки

@Mr.X_Mr.X

У меня то же самое. Компонент переключения тёмного/светлого режима вызывает ошибки.

Хм… не совсем понимаю, откуда это берётся, так как у меня нет кода, который мог бы это отправлять. Единственное место, где я обрабатываю ошибки, находится здесь:

https://github.dev/discourse/discourse-color-scheme-toggle/blob/3474a80d81d89f1264be5d55652dc65b5aea68e2/javascripts/discourse/initializers/dark-light-toggle-hamburger.js#L56-L59

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

[Arta_S (Arta)]

Здравствуйте,

У меня возникла проблема. После добавления темы иконки переключения не появились в гамбургер-меню. Их даже нет в базовом коде. Кроме того, в вашем демо кнопки не работают, то есть не переключают между светлой и тёмной темой.

У кого-нибудь ещё есть такая же проблема?

[jordan.vidrine]

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

[Arta_S (Arta)]

Вот видео:

Моя главная проблема в том, что на моём форуме я даже не вижу этих опций в меню-гамбургере:

[jordan.vidrine]

У вас не открыта вкладка console в записи экрана, поэтому трудно понять, возникают ли какие-либо ошибки.

Вы убедились, что выполнили каждый шаг в оригинальном сообщении по этой теме?

В разделе /admin/customize/colors должно быть включено как минимум два варианта цветовой схемы.
Темная тема должна быть включена по адресу: /admin/site_settings/category/basic?filter=dark.

И есть ли у вас, как у пользователя, в настройках профиля выбраны две цветовые схемы: одна для светлой темы, а другая для темной?

[Arta_S (Arta)]

@jordan.vidrine

Вы убедились, что выполнили каждый шаг в исходном сообщении этой темы?

Здравствуйте,

Да, всё было выполнено правильно. Сегодня всё отображается корректно. Проблема была в файлах cookie. Было странно, что в других браузерах (где я никогда не посещал форум) также показывалось, что данные отсутствуют. Теперь всё в порядке. Спасибо и извините за возникшую путаницу.

Единственный момент: все пользователи, включая гостей, видят переключатель в заголовке. Но как администратор, когда я авторизован, я не вижу переключатели. Это намеренно? Может ли это быть связано с кэшем сервера или чем-то подобным?

[jordan.vidrine]

Хм, это интересно. Вы выбрали тёмную или светлую цветовую схему в настройках пользователя?

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

[Arta_S (Arta)]

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

[agungor]

Мне очень нравится этот компонент! Но у меня возникла небольшая проблема.

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

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

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

<div class="title"><a href="/" data-auto-route="true"><picture><source srcset="<ссылка на изображение>" media="(prefers-color-scheme: dark)"><img src="<ссылка на изображение>" id="site-logo" class="logo-big"></picture></a></div>

Я заметил часть media=“(prefers-color-scheme: dark)”, хотя мы сейчас находимся в светлом режиме, установленном переключателем.

Должен добавить, что логотип сайта обычно нормально переключается между светлым и тёмным режимами, когда опция «Включить автоматическую цветовую схему тёмного режима» в Discourse снята. Но это предотвращает отображение компонента переключения тёмного/светлого режима

Кроме того, если моя настройка темы в Discourse установлена на тёмную через Настройки > Интерфейс > Тема, и мои системные настройки также установлены на тёмный режим, переключатель не переключается между светлым и тёмным режимами — он всегда остаётся в тёмной теме.

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

[MattiaB (Mattia)]

@agungor

Когда я делаю то же самое с компонентом переключения тёмного/светлого режима и если в Discourse моя настройка темы установлена на «Светлая», переключатель действительно позволяет мне перейти в светлый режим (что, на мой взгляд, даже лучше), но логотип сайта в шапке остаётся в тёмном режиме и его трудно разглядеть в светлом режиме.

У меня то же самое! Вы нашли решение?

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

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

Вот как выглядит HTML в этом случае:

Добавлена дополнительная строка: <source srcset="https://radixtalk.com/uploads/default/original/1X/19838ecb731d3f87d9db76c927e793ab2e159f1e.png" media="(prefers-color-scheme: dark)">, которая «блокирует» загрузку правильного логотипа. Если удалить эту строку через «Inspect Element» и оставить только <img src="https://radixtalk.com/uploads/default/original/1X/237090c67d33a1a38f9f031336dab420c4c4a37d.png" alt="RadixTalk" id="site-logo" class="logo-small" width="36">, то появляется правильный логотип.

Надеюсь, эта информация была полезна.

[agungor]

@Mattia

У меня то же самое! Ты нашёл решение?

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