mirror of
https://github.com/discourse/discourse.git
synced 2025-02-25 18:55:32 -06:00
FIX: Add theme-color <meta> tag when a dark scheme is selected (#18747)
Meta topic: https://meta.discourse.org/t/meta-theme-color-is-not-respecting-current-color-scheme/239815/7?u=osama. This commit renders an additional `theme-color` `<meta>` tag for the dark scheme if the current user/request has a scheme selected for dark mode. We currently only render one `theme-color` tag which is always based on the user's selected scheme for light mode, but if the user also selects a scheme for dark mode and uses a device that's configured to use/prefer dark mode, the Discourse UI will be in dark mode, but any parts of the browser/OS UI that's colored based on the `theme-color` tag, would use a color from the user's selected light scheme and look inconsistent with the Discourse UI because the `theme-color` tag is based on the user's selected light scheme. The additional `theme-color` tag has `media="(prefers-color-scheme: dark)"` and is based on the user's selected dark scheme which means any browser UI that's colored based on `theme-color` tags should be able to pick the right tag based on the user's preference for light/dark mode.
This commit is contained in:
@@ -625,6 +625,18 @@ module ApplicationHelper
|
||||
result.html_safe
|
||||
end
|
||||
|
||||
def discourse_theme_color_meta_tags
|
||||
result = +<<~HTML
|
||||
<meta name="theme-color" media="all" content="##{ColorScheme.hex_for_name('header_background', scheme_id)}">
|
||||
HTML
|
||||
if dark_scheme_id != -1
|
||||
result << <<~HTML
|
||||
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="##{ColorScheme.hex_for_name('header_background', dark_scheme_id)}">
|
||||
HTML
|
||||
end
|
||||
result.html_safe
|
||||
end
|
||||
|
||||
def dark_color_scheme?
|
||||
return false if scheme_id.blank?
|
||||
ColorScheme.find_by_id(scheme_id)&.is_dark?
|
||||
|
||||
Reference in New Issue
Block a user