mirror of
https://github.com/discourse/discourse.git
synced 2025-02-21 04:43:55 +08:00
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:
parent
9e9abe0a82
commit
a21f064fad
@ -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?
|
||||
|
@ -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 %>">
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
Loading…
x
Reference in New Issue
Block a user