From 80e0d539faba43c76ac4904e9009ac6d43cace56 Mon Sep 17 00:00:00 2001 From: nieve Date: Tue, 11 Feb 2025 21:55:01 -0500 Subject: [PATCH] separate light and dark theme --- .env.example | 5 ++-- README.md | 2 +- app.json | 5 +++- src/config.rs | 16 +++++++---- src/instance_info.rs | 9 ++++--- src/main.rs | 24 +++++++++++++++-- src/settings.rs | 5 ++-- src/utils.rs | 9 ++++--- static/style.css | 60 ----------------------------------------- templates/base.html | 3 ++- templates/settings.html | 12 ++++++--- 11 files changed, 66 insertions(+), 84 deletions(-) diff --git a/.env.example b/.env.example index 5e60b08..5beeaff 100644 --- a/.env.example +++ b/.env.example @@ -12,8 +12,9 @@ REDLIB_ROBOTS_DISABLE_INDEXING=off REDLIB_PUSHSHIFT_FRONTEND=undelete.pullpush.io # Default user settings -# Set the default theme (options: system, light, dark, black, dracula, nord, laserwave, violet, gold, rosebox, gruvboxdark, gruvboxlight) -REDLIB_DEFAULT_THEME=system +# Set the default theme (options: light, dark, black, dracula, nord, laserwave, violet, gold, rosebox, gruvboxdark, gruvboxlight) +REDLIB_DEFAULT_THEME_LIGHT=light +REDLIB_DEFAULT_THEME_DARK=dark # Set the default front page (options: default, popular, all) REDLIB_DEFAULT_FRONT_PAGE=default # Set the default layout (options: card, clean, compact) diff --git a/README.md b/README.md index 4026791..1285edc 100644 --- a/README.md +++ b/README.md @@ -381,7 +381,7 @@ REDLIB_DEFAULT_SHOW_NSFW=on redlib ``` ```bash -REDLIB_DEFAULT_WIDE=on REDLIB_DEFAULT_THEME=dark redlib -r +REDLIB_DEFAULT_WIDE=on REDLIB_DEFAULT_THEME_DARK=dark redlib -r ``` You can also configure Redlib with a configuration file named `redlib.toml`. For example: diff --git a/app.json b/app.json index c05b26d..840ae8c 100644 --- a/app.json +++ b/app.json @@ -11,7 +11,10 @@ ], "stack": "container", "env": { - "REDLIB_DEFAULT_THEME": { + "REDLIB_DEFAULT_THEME_LIGHT": { + "required": false + }, + "REDLIB_DEFAULT_THEME_DARK": { "required": false }, "REDLIB_DEFAULT_FRONT_PAGE": { diff --git a/src/config.rs b/src/config.rs index 034afc7..7f028db 100644 --- a/src/config.rs +++ b/src/config.rs @@ -24,9 +24,13 @@ pub struct Config { #[serde(alias = "LIBREDDIT_SFW_ONLY")] pub(crate) sfw_only: Option, - #[serde(rename = "REDLIB_DEFAULT_THEME")] - #[serde(alias = "LIBREDDIT_DEFAULT_THEME")] - pub(crate) default_theme: Option, + #[serde(rename = "REDLIB_DEFAULT_THEME_LIGHT")] + #[serde(alias = "LIBREDDIT_DEFAULT_THEME_LIGHT")] + pub(crate) default_theme_light: Option, + + #[serde(rename = "REDLIB_DEFAULT_THEME_DARK")] + #[serde(alias = "LIBREDDIT_DEFAULT_THEME_DARK")] + pub(crate) default_theme_dark: Option, #[serde(rename = "REDLIB_DEFAULT_FRONT_PAGE")] #[serde(alias = "LIBREDDIT_DEFAULT_FRONT_PAGE")] @@ -134,7 +138,8 @@ impl Config { }; Self { sfw_only: parse("REDLIB_SFW_ONLY"), - default_theme: parse("REDLIB_DEFAULT_THEME"), + default_theme_light: parse("REDLIB_DEFAULT_THEME_LIGHT"), + default_theme_dark: parse("REDLIB_DEFAULT_THEME_DARK"), default_front_page: parse("REDLIB_DEFAULT_FRONT_PAGE"), default_layout: parse("REDLIB_DEFAULT_LAYOUT"), default_post_sort: parse("REDLIB_DEFAULT_POST_SORT"), @@ -163,7 +168,8 @@ impl Config { fn get_setting_from_config(name: &str, config: &Config) -> Option { match name { "REDLIB_SFW_ONLY" => config.sfw_only.clone(), - "REDLIB_DEFAULT_THEME" => config.default_theme.clone(), + "REDLIB_DEFAULT_THEME_LIGHT" => config.default_theme_light.clone(), + "REDLIB_DEFAULT_THEME_DARK" => config.default_theme_dark.clone(), "REDLIB_DEFAULT_FRONT_PAGE" => config.default_front_page.clone(), "REDLIB_DEFAULT_LAYOUT" => config.default_layout.clone(), "REDLIB_DEFAULT_COMMENT_SORT" => config.default_comment_sort.clone(), diff --git a/src/instance_info.rs b/src/instance_info.rs index 5f82ce6..479285f 100644 --- a/src/instance_info.rs +++ b/src/instance_info.rs @@ -137,7 +137,8 @@ impl InstanceInfo { Table::from([ ["Hide awards", &convert(&self.config.default_hide_awards)], ["Hide score", &convert(&self.config.default_hide_score)], - ["Theme", &convert(&self.config.default_theme)], + ["Light Theme", &convert(&self.config.default_theme_light)], + ["Dark Theme", &convert(&self.config.default_theme_dark)], ["Front page", &convert(&self.config.default_front_page)], ["Layout", &convert(&self.config.default_layout)], ["Wide", &convert(&self.config.default_wide)], @@ -173,7 +174,8 @@ impl InstanceInfo { Banner: {:?}\n Hide awards: {:?}\n Hide score: {:?}\n - Default theme: {:?}\n + Default light theme: {:?}\n + Default dark theme: {:?}\n Default front page: {:?}\n Default layout: {:?}\n Default wide: {:?}\n @@ -199,7 +201,8 @@ impl InstanceInfo { self.config.banner, self.config.default_hide_awards, self.config.default_hide_score, - self.config.default_theme, + self.config.default_theme_light, + self.config.default_theme_dark, self.config.default_front_page, self.config.default_layout, self.config.default_wide, diff --git a/src/main.rs b/src/main.rs index 8732d20..542f1e8 100644 --- a/src/main.rs +++ b/src/main.rs @@ -84,8 +84,28 @@ async fn style() -> Result, String> { let mut res = include_str!("../static/style.css").to_string(); for file in ThemeAssets::iter() { res.push('\n'); - let theme = ThemeAssets::get(file.as_ref()).unwrap(); - res.push_str(std::str::from_utf8(theme.data.as_ref()).unwrap()); + let theme: Vec<&str> = file.as_ref().split(".css").collect(); + let theme = ".".to_owned() + &theme[0].to_owned(); + let style = ThemeAssets::get(file.as_ref()).unwrap(); + let style = std::str::from_utf8(style.data.as_ref()).unwrap(); + let style_light = &style.replace(&theme, &(theme.clone() + "_light")); + let style_light = &format!( + " + @media (prefers-color-scheme: light) {{ + {style_light} + }} + " + ); + let style_dark = &style.replace(&theme, &(theme.clone() + "_dark")); + let style_dark = &format!( + " + @media (prefers-color-scheme: dark) {{ + {style_dark} + }} + " + ); + res.push_str(style_light); + res.push_str(style_dark); } Ok( Response::builder() diff --git a/src/settings.rs b/src/settings.rs index 4404912..0a8cabc 100644 --- a/src/settings.rs +++ b/src/settings.rs @@ -21,8 +21,9 @@ struct SettingsTemplate { // CONSTANTS -const PREFS: [&str; 18] = [ - "theme", +const PREFS: [&str; 19] = [ + "theme_light", + "theme_dark", "front_page", "layout", "wide", diff --git a/src/utils.rs b/src/utils.rs index c15dcea..4ae3e1a 100644 --- a/src/utils.rs +++ b/src/utils.rs @@ -605,7 +605,8 @@ pub struct Params { pub struct Preferences { #[serde(skip)] pub available_themes: Vec, - pub theme: String, + pub theme_light: String, + pub theme_dark: String, pub front_page: String, pub layout: String, pub wide: String, @@ -645,15 +646,15 @@ impl Preferences { // Build preferences from cookies pub fn new(req: &Request) -> Self { // Read available theme names from embedded css files. - // Always make the default "system" theme available. - let mut themes = vec!["system".to_string()]; + let mut themes = Vec::new(); for file in ThemeAssets::iter() { let chunks: Vec<&str> = file.as_ref().split(".css").collect(); themes.push(chunks[0].to_owned()); } Self { available_themes: themes, - theme: setting(req, "theme"), + theme_light: setting(req, "theme_light"), + theme_dark: setting(req, "theme_dark"), front_page: setting(req, "front_page"), layout: setting(req, "layout"), wide: setting(req, "wide"), diff --git a/static/style.css b/static/style.css index a9d893a..54ea0f9 100644 --- a/static/style.css +++ b/static/style.css @@ -37,66 +37,6 @@ font-weight: 100 900; } -/* Automatic theme selection */ -:root, -.dark { - /* Default & fallback theme (dark) */ - --accent: #d54455; - --green: #5cff85; - --text: white; - --foreground: #222; - --background: #0f0f0f; - --outside: #1f1f1f; - --post: #161616; - --panel-border: 1px solid #333; - --highlighted: #333; - --visited: #aaa; - --shadow: 0 1px 3px rgba(0, 0, 0, 0.5); - --popup: #b80a27; - --spoiler: #ddd; - - /* Hint color theme to browser for scrollbar */ - color-scheme: dark; -} - -/* Browser-defined light theme */ -@media (prefers-color-scheme: light) { - :root { - --accent: #bb2b3b; - --green: #00a229; - --text: black; - --foreground: #f5f5f5; - --background: #ddd; - --outside: #ececec; - --post: #eee; - --panel-border: 1px solid #ccc; - --highlighted: white; - --visited: #555; - --shadow: 0 1px 3px rgba(0, 0, 0, 0.1); - --spoiler: #0f0f0f; - - /* Hint color theme to browser for scrollbar */ - color-scheme: light; - } -} - -/* Other themes are located in the "themes" folder */ - -/* Tokyo Night theme setting */ -.tokyoNight { - --accent: #565f89; - --green: #73daca; - --text: #a9b1d6; - --foreground: #24283b; - --background: #1a1b26; - --outside: #24283b; - --post: #1a1b26; - --panel-border: 1px solid #a9b1d6; - --highlighted: #414868; - --visited: #414868; - --shadow: 0 1px 3px rgba(0, 0, 0, 0.5); -} - /* General */ ::selection { diff --git a/templates/base.html b/templates/base.html index a1c141b..b70ebb0 100644 --- a/templates/base.html +++ b/templates/base.html @@ -34,7 +34,8 @@