Fix #77: add button to switch between light and dark mode

In order to do so, a few things have changed: caching is gone, style.css
is not a template anymore, a cookie value is extracted on each request
and a new `/theme` change route has been added.

Author: matze

CHANGELOG.md

@@ -6,6 +6,8 @@
 
 - `WASTEBIN_THEME` configuration key to change the default theme from `ayu` to
   `base16ocean`, `coldark`, `gruvbox`, `monokai`, `onehalf` or `solarized`.
+- UI button to switch between light and dark mode and cookie to store the
+  preference. By default the system setting is used.
 
 ### Changed
 

Cargo.lock

@@ -10,7 +10,6 @@ askama_axum = { version = "0.4" }
 async-compression = { version = "0.4", features = ["tokio", "zstd"] }
 axum = { version = "0.7", features = ["json", "query"] }
 axum-extra = { version = "0.9", features = ["cookie-signed", "typed-header"] }
-axum-response-cache = { version = "0.2.0", default-features = false, features = ["axum07"] }
 bytes = "1"
 cached = { version = "0.54.0", default-features = false }
 chacha20poly1305 = "0.10.1"

Cargo.toml

@@ -1,10 +1,9 @@
-use askama::Template;
 use axum::response::{IntoResponse, Response};
 use axum_extra::{headers, TypedHeader};
 use sha2::{Digest, Sha256};
 use std::io::Cursor;
 use std::time::Duration;
-use syntect::highlighting::{Color, ThemeSet};
+use syntect::highlighting::{self, ThemeSet};
 use syntect::html::{css_for_theme_with_class_style, ClassStyle};
 use two_face::theme::EmbeddedThemeName;
 
@@ -87,59 +86,35 @@ pub struct Css {
     pub dark: Asset,
 }
 
+/// Generate the highlighting colors for `theme` and add main foreground and background colors
+/// based on the theme.
+fn combined_css(theme: &highlighting::Theme) -> Vec<u8> {
+    let fg = theme.settings.foreground.expect("existing color");
+    let bg = theme.settings.background.expect("existing color");
+
+    let main_colors = format!(
+        ":root {{
+  --main-bg-color: rgb({}, {}, {}, {});
+  --main-fg-color: rgb({}, {}, {}, {});
+}}",
+        bg.r, bg.g, bg.b, bg.a, fg.r, fg.g, fg.b, fg.a
+    );
+
+    format!(
+        "{main_colors} {}",
+        css_for_theme_with_class_style(theme, ClassStyle::Spaced).expect("generating CSS")
+    )
+    .into_bytes()
+}
+
 impl Css {
     /// Create CSS assets for `theme`.
     pub fn new(theme: Theme) -> Self {
-        #[derive(Template)]
-        #[template(path = "style.css", escape = "none")]
-        struct StyleCss {
-            light_background: Color,
-            light_foreground: Color,
-            dark_background: Color,
-            dark_foreground: Color,
-            light_asset: Asset,
-            dark_asset: Asset,
-        }
-
         let light_theme = light_theme(theme);
         let dark_theme = dark_theme(theme);
-
-        // SAFETY: all supported color themes have a defined foreground and background color.
-        let light_foreground = light_theme.settings.foreground.expect("existing color");
-        let light_background = light_theme.settings.background.expect("existing color");
-        let dark_foreground = dark_theme.settings.foreground.expect("existing color");
-        let dark_background = dark_theme.settings.background.expect("existing color");
-
-        let light = Asset::new_hashed(
-            "light",
-            Kind::Css,
-            css_for_theme_with_class_style(&light_theme, ClassStyle::Spaced)
-                .expect("generating CSS")
-                .into_bytes(),
-        );
-
-        let dark = Asset::new_hashed(
-            "dark",
-            Kind::Css,
-            css_for_theme_with_class_style(&dark_theme, ClassStyle::Spaced)
-                .expect("generating CSS")
-                .into_bytes(),
-        );
-
-        let style = StyleCss {
-            light_background,
-            light_foreground,
-            dark_background,
-            dark_foreground,
-            light_asset: light.clone(),
-            dark_asset: dark.clone(),
-        };
-
-        let style = Asset::new_hashed(
-            "style",
-            Kind::Css,
-            style.render().expect("rendering style css").into_bytes(),
-        );
+        let style = Asset::new_hashed("style", Kind::Css, include_str!("style.css").into());
+        let light = Asset::new_hashed("light", Kind::Css, combined_css(&light_theme));
+        let dark = Asset::new_hashed("dark", Kind::Css, combined_css(&dark_theme));
 
         Self { style, light, dark }
     }

src/assets.rs

@@ -1,3 +1,4 @@
+use crate::handlers::extract::Theme;
 use crate::handlers::html::{make_error, ErrorResponse};
 use crate::{Database, Error, Page};
 use axum::extract::{Path, State};
@@ -8,6 +9,7 @@ pub async fn get(
     Path(id): Path<String>,
     State(db): State<Database>,
     State(page): State<Page>,
+    theme: Option<Theme>,
     jar: SignedCookieJar,
 ) -> Result<Redirect, ErrorResponse> {
     async {
@@ -30,7 +32,7 @@ pub async fn get(
         Ok(Redirect::to("/"))
     }
     .await
-    .map_err(|err| make_error(err, page.clone()))
+    .map_err(|err| make_error(err, page.clone(), theme))
 }
 
 #[cfg(test)]

src/handlers/delete.rs

@@ -1,6 +1,6 @@
 use crate::cache::Key;
 use crate::db::read::Entry;
-use crate::handlers::extract::Password;
+use crate::handlers::extract::{Password, Theme};
 use crate::handlers::html::{make_error, ErrorResponse, PasswordInput};
 use crate::{Database, Error, Page};
 use axum::extract::{Path, State};
@@ -13,6 +13,7 @@ pub async fn get(
     Path(id): Path<String>,
     State(db): State<Database>,
     State(page): State<Page>,
+    theme: Option<Theme>,
     password: Option<Password>,
 ) -> Result<Response, ErrorResponse> {
     async {
@@ -26,14 +27,15 @@ pub async fn get(
             Ok(Entry::Expired) => Err(Error::NotFound),
             Err(Error::NoPassword) => Ok(PasswordInput {
                 page: page.clone(),
+                theme: theme.clone(),
                 id: key.id.to_string(),
             }
             .into_response()),
             Err(err) => Err(err),
         }
     }
     .await
-    .map_err(|err| make_error(err, page))
+    .map_err(|err| make_error(err, page, theme))
 }
 
 fn get_download(text: String, id: &str, extension: &str) -> impl IntoResponse {