github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-05-22 22:43:33 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

14
app/helpers/application_helper.rb
View File

@ -678,6 +678,20 @@ module ApplicationHelper
result.html_safe result.html_safe
end 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? def dark_color_scheme?
return false if scheme_id.blank? return false if scheme_id.blank?
ColorScheme.find_by_id(scheme_id)&.is_dark? ColorScheme.find_by_id(scheme_id)&.is_dark?

1
app/views/layouts/_head.html.erb
View File

@ -7,6 +7,7 @@
<link rel="apple-touch-icon" type="image/png" href="<%= ::UrlHelper.absolute(site_apple_touch_icon_url) %>"> <link rel="apple-touch-icon" type="image/png" href="<%= ::UrlHelper.absolute(site_apple_touch_icon_url) %>">
<%- end %> <%- end %>
<%= discourse_theme_color_meta_tags %> <%= 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"> <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? %> <%- if Discourse.base_path.present? %>
<meta name="discourse-base-uri" content="<%= Discourse.base_path %>"> <meta name="discourse-base-uri" content="<%= Discourse.base_path %>">

1
app/views/layouts/finish_installation.html.erb
View File

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

41
spec/helpers/application_helper_spec.rb
View File

@ -903,4 +903,45 @@ RSpec.describe ApplicationHelper do
HTML HTML
end end
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 end