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

FIX: Add theme-color <meta> tag when a dark scheme is selected (#18747)

Browse Source 
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:
Osama Sayegh
2022-10-26 07:18:05 +03:00
committed by GitHub
parent d680d019a2
commit 787d512c03
3 changed files with 43 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
spec/helpers/application_helper_spec.rb
View File

@ -739,4 +739,34 @@ RSpec.describe ApplicationHelper do
expect(helper.html_lang).to eq(I18n.locale.to_s)
end
end
describe "#discourse_theme_color_meta_tags" do
before do
light = Fabricate(:color_scheme)
light.color_scheme_colors << ColorSchemeColor.new(name: "header_background", hex: "abcdef")
light.save!
helper.request.cookies["color_scheme_id"] = light.id
dark = Fabricate(:color_scheme)
dark.color_scheme_colors << ColorSchemeColor.new(name: "header_background", hex: "defabc")
dark.save!
helper.request.cookies["dark_scheme_id"] = dark.id
end
it "renders theme-color meta for the light scheme with media=all and another one for the dark scheme with media=(prefers-color-scheme: dark)" do
expect(helper.discourse_theme_color_meta_tags).to eq(<<~HTML)
<meta name="theme-color" media="all" content="#abcdef">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#defabc">
HTML
end
it "doesn't render theme-color meta tag for the dark scheme if none is set" do
SiteSetting.default_dark_mode_color_scheme_id = -1
helper.request.cookies.delete("dark_scheme_id")
expect(helper.discourse_theme_color_meta_tags).to eq(<<~HTML)
<meta name="theme-color" media="all" content="#abcdef">
HTML
end
end
end