DEV: Backend support for light/dark mode in color palettes (#30893)

We're embarking on a project for overhauling the color palette and theme
systems in Discourse. As part of this project, we're making each color
palette include light and dark modes instead of the status quo of
requiring 2 separate color palettes to implement light and dark modes.

This commit is a first step towards that goal; it adds a code path for
generating and serving `color_definitions` stylesheets using the
built-in dark variant of a color palette. All of this code path is
behind a default-off site setting `use_overhauled_theme_color_palette`,
so there's no change in behavior unless the setting is enabled.

Internal topic: t/141467.
This commit is contained in:
Osama Sayegh
2025-01-23 15:54:49 +03:00
committed by GitHub
parent 13f86c99ea
commit 10f34ddf86
10 changed files with 193 additions and 41 deletions

View File

@@ -877,12 +877,20 @@ RSpec.describe ApplicationHelper do
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.color_scheme_colors << ColorSchemeColor.new(
name: "header_background",
hex: "abcdef",
dark_hex: "fedcba",
)
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.color_scheme_colors << ColorSchemeColor.new(
name: "header_background",
hex: "defabc",
dark_hex: "cbafed",
)
dark.save!
helper.request.cookies["dark_scheme_id"] = dark.id
end
@@ -902,6 +910,17 @@ RSpec.describe ApplicationHelper do
<meta name="theme-color" media="all" content="#abcdef">
HTML
end
context "when use_overhauled_theme_color_palette setting is true" do
before { SiteSetting.use_overhauled_theme_color_palette = true }
it "renders a light and dark theme-color meta tag using the light and dark palettes of the same color scheme record" do
expect(helper.discourse_theme_color_meta_tags).to eq(<<~HTML)
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#abcdef">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#fedcba">
HTML
end
end
end
describe "#discourse_color_scheme_meta_tag" do
@@ -944,4 +963,27 @@ RSpec.describe ApplicationHelper do
HTML
end
end
describe "#dark_scheme_id" do
fab!(:dark_scheme) { Fabricate(:color_scheme) }
fab!(:light_scheme) { Fabricate(:color_scheme) }
before do
helper.request.cookies["color_scheme_id"] = light_scheme.id
helper.request.cookies["dark_scheme_id"] = dark_scheme.id
end
it "returns the value set in the dark_scheme_id cookie" do
expect(helper.dark_scheme_id).to eq(dark_scheme.id)
end
context "when use_overhauled_theme_color_palette is true" do
before { SiteSetting.use_overhauled_theme_color_palette = true }
it "returns the same value as #scheme_id" do
expect(helper.dark_scheme_id).to eq(helper.scheme_id)
expect(helper.scheme_id).to eq(light_scheme.id)
end
end
end
end