Привет, проблема, описанная в этих двух темах:
по-прежнему актуальна для меня (я тестирую последнюю/пробную версию размещённого Discourse).
@mk0r Я не могу воспроизвести эту проблему здесь, на Meta. Я использую тему/цветовую схему Grey Amber, которая не является темой по умолчанию для Meta:
И мета-тег theme-color имеет для меня правильный цвет:
<meta name="theme-color" content="#36393e">
#36393e — это цвет фона заголовка схемы Grey Amber. Если я открою Meta в режиме инкогнито без входа в систему, мета-тег theme-color будет иметь цвет фона заголовка цветовой схемы по умолчанию (светлая схема):
<meta name="theme-color" content="#ffffff">
Вы пробовали очистить кэш и файлы cookie браузера для вашего сайта? Если это не поможет, попробуйте воспроизвести эту проблему здесь, на Meta, и поделитесь шагами для её воспроизведения?
2 лайка
Спасибо за проверку, я могу воспроизвести проблему — она связана именно с тёмной темой.
theme-color остаётся таким же, как в режиме по умолчанию/светлой теме, по крайней мере для меня здесь на meta и на моей установке.
Я даже только что попытался добавить это в head:
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
Это отображается в исходном коде, но ни на что не влияет. Возможно, потому что первый мета-тег не указывает prefers-color-scheme: light?
Основная проблема для меня — яркая строка состояния, которая сильно конфликтует с тёмной страницей на мобильном устройстве, и её ярко-белый цвет при обновлении прокруткой.
Только что зарегистрировался, чтобы оставить комментарий, так как думаю, что у меня та же проблема.
Используя то, что вы, вероятно, называете прогрессивным веб-приложением (на Android 13, опция установки приложения при просмотре форума Discourse в Chrome, в данном случае это https://llllllll.co/), приложение корректно отражает системные настройки тёмной темы, но строка состояния остаётся в светлом режиме. Эта проблема отсутствует в Chrome. См. изображение ниже: приложение слева, браузер Chrome справа.
2 лайка
Жаль, что это не привлекает внимания 
Я недостаточно технически подкован, чтобы написать pull request, но мне кажется, что это должно быть довольно простое исправление? Возможно, это кажется придиркой, но есть эстетические и функциональные причины, по которым я надеюсь, что это можно исправить 
На прошлой неделе я ещё раз изучил эту проблему и смог воспроизвести баг следующими шагами:
-
Настройте вашу ОС на использование тёмной темы (в Windows 11 это делается в разделе Параметры → Персонализация → Цвета → Выбор режима).
-
В ваших настройках Discourse выберите разные цветовые схемы для обычного и тёмного режимов, затем перезагрузите страницу.
-
Теперь вы должны увидеть, что выбранная для тёмного режима цветовая схема применилась в интерфейсе (как и ожидалось), однако мета-тег
theme-colorбудет содержать значениеheader_backgroundиз цветовой схемы, выбранной для светлого режима, хотя должно быть значение из тёмной схемы.
Исправить это немного сложно, поскольку на стороне сервера — где и рендерятся все мета-теги — у нас нет контекста относительно того, какую цветовую схему (светлую или тёмную) будет использовать клиент/браузер. Мы просто включаем определения цветов для обеих схем, а затем клиент/браузер выбирает ту, которая соответствует предпочтениям пользователя в соответствии с медиа-запросом prefers-color-scheme.
Однако, похоже, что мета-тег theme-color поддерживает атрибут media, поэтому мы должны иметь возможность добавить ещё один мета-тег theme-color для тёмной схемы с атрибутом media, установленным в (prefers-color-scheme: dark). Я постараюсь реализовать это на этой неделе.
5 лайков
Кажется, что если в первом мета-теге не указать светлый или тёмный режим, а во втором указать тёмный режим, то тёмный режим всё равно будет использовать значения из первого тега. Поэтому, думаю, необходимо явно указать оба тега: один для светлого режима, другой для тёмного.
2 лайка
Да, я думаю, что мое изменение приведет к тому, что мета-тег для светлой схемы будет содержать media="(prefers-color-scheme: light)", а для тёмной схемы — media="(prefers-color-scheme: dark)", и браузеры смогут выбрать тот, который соответствует предпочтениям пользователя.
3 лайка
К сведению @mk0r, я исправил эту проблему 2 дня назад здесь:
3 лайка
Спасибо 
Выглядит действительно круто, но, к сожалению, у меня не работает. Мне кажется, что media="all" переопределяет media="(prefers-color-scheme: dark)" даже в тёмном режиме?
1 лайк
Хм, расскажи, пожалуйста, как ты это тестируешь и какой браузер используешь?
1 лайк
Да, конечно, извините, я забыл.
Я пробовал это на:
Android 12
Chrome 106.0.5249.126 PWA
MacOS 12.4
Chrome 105.0.5195.125 PWA
1 лайк
Я посмотрел на исправление, упомянутое на GitHub, и думаю, что проблема может быть той, что описана в моём предыдущем сообщении:
Возможно, я уже превышаю уровень своих технических знаний, но я только что посмотрел на эти строки:
it "renders theme-color meta for the light scheme with media=all and another one for the dark scheme with media=(prefers-color-scheme: dark)" do
expect(helper.discourse_theme_color_meta_tags).to eq(<<~HTML)
<meta name="theme-color" media="all" content="#abcdef">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#defabc">
HTML
Я полагаю, что meta name="theme-color" media="all" имеет приоритет над meta name="theme-color" media="(prefers-color-scheme: dark)", даже если пользователь находится в тёмном режиме.
Смотрите здесь:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
и
https://web.dev/learn/design/theming/
Я думаю, что для корректной работы на итоговых страницах должны быть следующие строки:
<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
Где эти шестнадцатеричные значения будут заменены на выбранные значения цветовой схемы.
Если установка или тема не имеет отдельной цветовой схемы для тёмного режима, то значения будут просто одинаковыми.
Я понимаю, что это немного придирки, но это действительно имеет значение, поэтому такая правка будет очень кстати. Я думаю, что альтернативой было бы позволить нам выбирать theme-color для all или сразу для тёмного и светлого режимов через интерфейс администратора пользователей. Или вообще не указывать theme-color, чтобы устройство само устанавливало цвет интерфейса браузера и учитывало предпочтения пользователя относительно тёмного/светлого режима.
Надеюсь, это поможет 
2 лайка
К сведению @Don и @mk0r, теперь это должно быть исправлено по-настоящему:
(не уверен, кто такой kaden-stytch на Meta, но кто бы вы ни были, спасибо! 
)
4 лайка
Да, спасибо Теперь всё работает отлично! 
3 лайка
Эта тема была автоматически закрыта через 2 дня. Новые ответы больше не допускаются.