FEATURE: Dark/light mode selector (#31086)

This commit makes the
[color-scheme-toggle](https://github.com/discourse/discourse-color-scheme-toggle)
theme component a core feature with improvements and bug fixes. The
theme component will be updated to become a no-op if the core feature is
enabled.

Noteworthy changes:

* the color mode selector has a new "Auto" option that makes the site
render in the same color mode as the user's system preference
* the splash screen respects the color mode selected by the user
* dark/light variants of category logos and background images are now
picked correctly based on the selected color mode
* a new `interface_color_selector` site setting to disable the selector
or choose its location between the sidebar footer or header

Internal topic: t/139465.

---------

Co-authored-by: Ella <ella.estigoy@gmail.com>
This commit is contained in:
Osama Sayegh
2025-02-07 03:28:34 +03:00
committed by GitHub
parent 8c968c588c
commit 284e708e67
30 changed files with 1065 additions and 111 deletions

View File

@ -169,6 +169,45 @@ RSpec.describe Middleware::AnonymousCache do
expect(helper.cached).to eq(nil)
end
it "includes the forced color mode in the cache key" do
dark_helper =
new_helper("ANON_CACHE_DURATION" => 10, "HTTP_COOKIE" => "forced_color_mode=dark")
dark_helper.cache([200, { "HELLO" => "WORLD" }, ["dark mode"]])
light_helper =
new_helper("ANON_CACHE_DURATION" => 10, "HTTP_COOKIE" => "forced_color_mode=light")
expect(light_helper.cached).to eq(nil)
light_helper.cache([200, { "HELLO" => "WORLD" }, ["light mode"]])
auto_helper = new_helper("ANON_CACHE_DURATION" => 10)
expect(auto_helper.cached).to eq(nil)
auto_helper.cache([200, { "HELLO" => "WORLD" }, ["auto color mode"]])
unknown_helper =
new_helper("ANON_CACHE_DURATION" => 10, "HTTP_COOKIE" => "forced_color_mode=blada")
expect(unknown_helper.cached).to eq(
[200, { "HELLO" => "WORLD", "X-Discourse-Cached" => "true" }, ["auto color mode"]],
)
dark_helper =
new_helper("ANON_CACHE_DURATION" => 10, "HTTP_COOKIE" => "forced_color_mode=dark")
light_helper =
new_helper("ANON_CACHE_DURATION" => 10, "HTTP_COOKIE" => "forced_color_mode=light")
auto_helper = new_helper("ANON_CACHE_DURATION" => 10)
expect(dark_helper.cached).to eq(
[200, { "HELLO" => "WORLD", "X-Discourse-Cached" => "true" }, ["dark mode"]],
)
expect(light_helper.cached).to eq(
[200, { "HELLO" => "WORLD", "X-Discourse-Cached" => "true" }, ["light mode"]],
)
expect(auto_helper.cached).to eq(
[200, { "HELLO" => "WORLD", "X-Discourse-Cached" => "true" }, ["auto color mode"]],
)
end
it "returns cached data for cached requests" do
helper.is_mobile = true
expect(helper.cached).to eq(nil)