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

@ -341,20 +341,15 @@ class Stylesheet::Manager
end
end
def color_scheme_stylesheet_details(color_scheme_id = nil, media, dark: false)
def color_scheme_stylesheet_details(color_scheme_id = nil, dark: false, fallback_to_base: true)
theme_id = @theme_id || SiteSetting.default_theme_id
color_scheme =
begin
ColorScheme.find(color_scheme_id)
rescue StandardError
# don't load fallback when requesting dark color scheme
return false if media != "all"
color_scheme = ColorScheme.find_by(id: color_scheme_id)
get_theme(theme_id)&.color_scheme || ColorScheme.base
end
return false if !color_scheme
if !color_scheme
return if !fallback_to_base
color_scheme = get_theme(theme_id)&.color_scheme || ColorScheme.base
end
target = COLOR_SCHEME_STYLESHEET.to_sym
current_hostname = Discourse.current_hostname
@ -382,8 +377,12 @@ class Stylesheet::Manager
end
end
def color_scheme_stylesheet_preload_tag(color_scheme_id = nil, media = "all", dark: false)
stylesheet = color_scheme_stylesheet_details(color_scheme_id, media, dark:)
def color_scheme_stylesheet_preload_tag(
color_scheme_id = nil,
dark: false,
fallback_to_base: true
)
stylesheet = color_scheme_stylesheet_details(color_scheme_id, dark:, fallback_to_base:)
return "" if !stylesheet
@ -392,21 +391,15 @@ class Stylesheet::Manager
%[<link href="#{href}" rel="preload" as="style"/>].html_safe
end
def color_scheme_stylesheet_link_tag(
def color_scheme_stylesheet_link_tag_href(
color_scheme_id = nil,
media = "all",
preload_callback = nil,
dark: false
dark: false,
fallback_to_base: true
)
stylesheet = color_scheme_stylesheet_details(color_scheme_id, media, dark:)
stylesheet = color_scheme_stylesheet_details(color_scheme_id, dark:, fallback_to_base:)
return "" if !stylesheet
return if !stylesheet
href = stylesheet[:new_href]
preload_callback.call(href, "style") if preload_callback
css_class = media == "all" ? "light-scheme" : "dark-scheme"
%[<link href="#{href}" media="#{media}" rel="stylesheet" class="#{css_class}"/>].html_safe
stylesheet[:new_href]
end
end