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

@ -42,10 +42,11 @@ class Stylesheet::Manager
cache.clear_regex(/#{plugin}/)
end
def self.color_scheme_cache_key(color_scheme, theme_id = nil)
def self.color_scheme_cache_key(color_scheme, theme_id = nil, dark: false)
color_scheme_name = Slug.for(color_scheme.name) + color_scheme&.id.to_s
theme_string = theme_id ? "_theme#{theme_id}" : ""
"#{COLOR_SCHEME_STYLESHEET}_#{color_scheme_name}_#{theme_string}_#{Discourse.current_hostname}"
dark_string = dark ? "_dark" : ""
"#{COLOR_SCHEME_STYLESHEET}_#{color_scheme_name}_#{theme_string}_#{Discourse.current_hostname}#{dark_string}"
end
def self.precompile_css
@ -114,14 +115,17 @@ class Stylesheet::Manager
theme = manager.get_theme(theme_id)
[theme_color_scheme, *color_schemes].compact.uniq.each do |scheme|
$stderr.puts "precompile target: #{COLOR_SCHEME_STYLESHEET} #{theme.name} (#{scheme.name})"
Stylesheet::Manager::Builder.new(
target: COLOR_SCHEME_STYLESHEET,
theme: theme,
color_scheme: scheme,
manager: manager,
).compile(force: true)
[true, false].each do |dark|
mode = dark ? "dark" : "light"
$stderr.puts "precompile target: #{COLOR_SCHEME_STYLESHEET} #{theme.name} (#{scheme.name}) (#{mode})"
Stylesheet::Manager::Builder.new(
target: COLOR_SCHEME_STYLESHEET,
theme: theme,
color_scheme: scheme,
manager: manager,
dark:,
).compile(force: true)
end
end
clear_color_scheme_cache!
@ -336,7 +340,7 @@ class Stylesheet::Manager
end
end
def color_scheme_stylesheet_details(color_scheme_id = nil, media)
def color_scheme_stylesheet_details(color_scheme_id = nil, media, dark: false)
theme_id = @theme_id || SiteSetting.default_theme_id
color_scheme =
@ -353,10 +357,10 @@ class Stylesheet::Manager
target = COLOR_SCHEME_STYLESHEET.to_sym
current_hostname = Discourse.current_hostname
cache_key = self.class.color_scheme_cache_key(color_scheme, theme_id)
cache_key = self.class.color_scheme_cache_key(color_scheme, theme_id, dark:)
cache.defer_get_set(cache_key) do
stylesheet = { color_scheme_id: color_scheme.id }
stylesheet = { color_scheme_id: color_scheme.id, dark: }
theme = get_theme(theme_id)
@ -366,6 +370,7 @@ class Stylesheet::Manager
theme: get_theme(theme_id),
color_scheme: color_scheme,
manager: self,
dark:,
)
builder.compile unless File.exist?(builder.stylesheet_fullpath)
@ -376,8 +381,8 @@ class Stylesheet::Manager
end
end
def color_scheme_stylesheet_preload_tag(color_scheme_id = nil, media = "all")
stylesheet = color_scheme_stylesheet_details(color_scheme_id, media)
def color_scheme_stylesheet_preload_tag(color_scheme_id = nil, media = "all", dark: false)
stylesheet = color_scheme_stylesheet_details(color_scheme_id, media, dark:)
return "" if !stylesheet
@ -386,8 +391,13 @@ class Stylesheet::Manager
%[<link href="#{href}" rel="preload" as="style"/>].html_safe
end
def color_scheme_stylesheet_link_tag(color_scheme_id = nil, media = "all", preload_callback = nil)
stylesheet = color_scheme_stylesheet_details(color_scheme_id, media)
def color_scheme_stylesheet_link_tag(
color_scheme_id = nil,
media = "all",
preload_callback = nil,
dark: false
)
stylesheet = color_scheme_stylesheet_details(color_scheme_id, media, dark:)
return "" if !stylesheet