UX: add color-scheme meta tag to _head (#30245)

Adds the `color-scheme` meta tag to the `_head` partial and removes it from the finish installation template to prevent it from being added twice.
This commit is contained in:
Renato Atilio
2024-12-13 08:10:08 -03:00
committed by GitHub
parent 9e9abe0a82
commit a21f064fad
4 changed files with 56 additions and 1 deletions

View File

@ -678,6 +678,20 @@ module ApplicationHelper
result.html_safe
end
def discourse_color_scheme_meta_tag
scheme =
if dark_scheme_id == -1
# no automatic client-side switching
dark_color_scheme? ? "dark" : "light"
else
# auto-switched based on browser setting
"light dark"
end
<<~HTML.html_safe
<meta name="color-scheme" content="#{scheme}">
HTML
end
def dark_color_scheme?
return false if scheme_id.blank?
ColorScheme.find_by_id(scheme_id)&.is_dark?

View File

@ -7,6 +7,7 @@
<link rel="apple-touch-icon" type="image/png" href="<%= ::UrlHelper.absolute(site_apple_touch_icon_url) %>">
<%- end %>
<%= discourse_theme_color_meta_tags %>
<%= discourse_color_scheme_meta_tag %>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover">
<%- if Discourse.base_path.present? %>
<meta name="discourse-base-uri" content="<%= Discourse.base_path %>">

View File

@ -2,7 +2,6 @@
<head>
<%= discourse_stylesheet_link_tag 'wizard', theme_id: nil %>
<%= discourse_color_scheme_stylesheets %>
<meta name="color-scheme" content="light dark">
<%= render partial: "layouts/head" %>
<title><%= t 'wizard.title' %></title>