Переключатель темной/светлой темы

[Discourse]

этот компонент темы устарел. Пожалуйста, см. Dark/light mode toggle now available in core

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

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

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

 Поддержка  Ошибка  Интерфейс  Функция

Возможности

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

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

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

Заголовок

Важные шаги

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

Для темного режима необходимо установить цветовую схему по умолчанию: /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

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

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