separate light and dark theme

.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)
+# Set the default theme (options: light, dark, black, dracula, nord, laserwave, violet, gold, rosebox, gruvboxdark, gruvboxlight)
-REDLIB_DEFAULT_THEME=system
+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)

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:

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": {

src/config.rs

@@ -24,9 +24,13 @@ pub struct Config {
 	#[serde(alias = "LIBREDDIT_SFW_ONLY")]
 	pub(crate) sfw_only: Option<String>,
 
-	#[serde(rename = "REDLIB_DEFAULT_THEME")]
+	#[serde(rename = "REDLIB_DEFAULT_THEME_LIGHT")]
-	#[serde(alias = "LIBREDDIT_DEFAULT_THEME")]
+	#[serde(alias = "LIBREDDIT_DEFAULT_THEME_LIGHT")]
-	pub(crate) default_theme: Option<String>,
+	pub(crate) default_theme_light: Option<String>,
+
+	#[serde(rename = "REDLIB_DEFAULT_THEME_DARK")]
+	#[serde(alias = "LIBREDDIT_DEFAULT_THEME_DARK")]
+	pub(crate) default_theme_dark: Option<String>,
 
 	#[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<String> {
 	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(),

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,

src/main.rs

@@ -84,8 +84,28 @@ async fn style() -> Result<Response<Body>, 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();
+		let theme: Vec<&str> = file.as_ref().split(".css").collect();
-		res.push_str(std::str::from_utf8(theme.data.as_ref()).unwrap());
+		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()

src/settings.rs

@@ -21,8 +21,9 @@ struct SettingsTemplate {
 
 // CONSTANTS
 
-const PREFS: [&str; 18] = [
+const PREFS: [&str; 19] = [
-	"theme",
+	"theme_light",
+	"theme_dark",
 	"front_page",
 	"layout",
 	"wide",

src/utils.rs

@@ -605,7 +605,8 @@ pub struct Params {
 pub struct Preferences {
 	#[serde(skip)]
 	pub available_themes: Vec<String>,
-	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<Body>) -> Self {
 		// Read available theme names from embedded css files.
-		// Always make the default "system" theme available.
+		let mut themes = Vec::new();
-		let mut themes = vec!["system".to_string()];
 		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"),

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 {

templates/base.html

@@ -34,7 +34,8 @@
 	<body class="
 		{% if prefs.layout != "" %}{{ prefs.layout }}{% endif %}
 		{% if prefs.wide == "on" %} wide{% endif %}
-		{% if prefs.theme != "system" %} {{ prefs.theme }}{% endif %}
+		{{ prefs.theme_light }}_light
+		{{ prefs.theme_dark }}_dark
 		{% if prefs.fixed_navbar == "on" %} fixed_navbar{% endif %}">
 		<!-- NAVIGATION BAR -->
 		<nav class="

templates/settings.html

@@ -18,9 +18,15 @@
 			<fieldset>
 				<legend>Appearance</legend>
 				<div class="prefs-group">
-					<label for="theme">Theme:</label>
+					<label for="theme_light">Light Theme:</label>
-					<select name="theme" id="theme"> 
+					<select name="theme_light" id="theme_light"> 
-						{% call utils::options(prefs.theme, prefs.available_themes, "system") %}
+						{% call utils::options(prefs.theme_light, prefs.available_themes, "light") %}
+					</select>
+				</div>
+				<div class="prefs-group">
+					<label for="theme_dark">Dark Theme:</label>
+					<select name="theme_dark" id="theme_dark"> 
+						{% call utils::options(prefs.theme_dark, prefs.available_themes, "dark") %}
 					</select>
 				</div>
 			</fieldset>