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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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>

View File

@ -903,4 +903,45 @@ RSpec.describe ApplicationHelper do
HTML
end
end
describe "#discourse_color_scheme_meta_tag" do
fab!(:color_scheme)
before { SiteSetting.default_dark_mode_color_scheme_id = -1 }
it "renders a 'light' color-scheme if no dark scheme is set and the current scheme is light" do
ColorSchemeRevisor.revise(
color_scheme,
colors: [{ name: "primary", hex: "333333" }, { name: "secondary", hex: "DDDDDD" }],
)
helper.request.cookies["color_scheme_id"] = color_scheme.id
expect(helper.discourse_color_scheme_meta_tag).to eq(<<~HTML)
<meta name="color-scheme" content="light">
HTML
end
it "renders a 'dark' color-scheme if no dark scheme is set and the default scheme is dark" do
ColorSchemeRevisor.revise(
color_scheme,
colors: [{ name: "primary", hex: "F8F8F8" }, { name: "secondary", hex: "232323" }],
)
@scheme_id = color_scheme.id
expect(helper.discourse_color_scheme_meta_tag).to eq(<<~HTML)
<meta name="color-scheme" content="dark">
HTML
end
it "renders a 'light dark' color-scheme if a dark scheme is set" do
dark = Fabricate(:color_scheme)
dark.save!
helper.request.cookies["dark_scheme_id"] = dark.id
expect(helper.discourse_color_scheme_meta_tag).to eq(<<~HTML)
<meta name="color-scheme" content="light dark">
HTML
end
end
end