Accept command-line arg that specifies which color scheme to use for the status web-ui.

Author: ctsrc

Cargo.lock

@@ -27,4 +27,5 @@ tokio-stream = "0.1.15"
 async-stream = "0.3.5"
 opener = "0.7.2"
 anyhow = "1.0.86"
-askama = "0.12.1"
+askama = { version = "0.12.1", features = ["serde-json"] }
+serde = { version = "1.0.209", features = ["derive"] }

Cargo.toml

@@ -36,13 +36,45 @@ For example:
 
 Open the status page and the project main page in your web browser.
 
-Alternatively, provide the `--open` option (`-o` for short) to have http-horse
-attempt to open the status and project pages in your system default web browser:
+#### Automatically open status and project pages in browser
+
+As an alternative to manually opening the project and status pages in a web browser,
+you can provide the `--open` option (`-o` for short) to have http-horse attempt to
+automatically open the status and project pages in your system default web browser:
 
 ```zsh
 RUST_LOG=debug cargo run -- --open ./example_web_project/out/
 ```
 
+#### Status web-UI color scheme
+
+The status web-UI comes with five different built-in color schemes:
+
+- Midnight Purple (Dark Mode)
+- Slate Green (Dark Mode)
+- Abyss Blue (Dark Mode)
+- Graphite & Copper (Dark Mode)
+- Crimson & Charcoal (Dark Mode)
+
+The default color scheme for the status web-UI is *Graphite & Copper* (Dark Mode).
+
+You can provide the `--color-scheme` argument (`-c` for short) with a value
+that specifies which color scheme the status web-UI should use.
+
+The possible values for the color scheme argument are:
+
+- `midnight-purple`
+- `slate-green`
+- `abyss-blue`
+- `graphite-and-copper` (the default)
+- `crimson-and-charcoal`
+
+Example:
+
+```zsh
+RUST_LOG=debug cargo run -- -c crimson-and-charcoal --open ./example_web_project/out/
+```
+
 ### Edit a web source file
 
 Make a change to one or more of the HTML, CSS, JS, or other web files.

README.md

@@ -2,7 +2,7 @@ use anyhow::{anyhow, Context};
 use askama::Template;
 use async_stream::stream;
 use bytes::Bytes;
-use clap::{crate_version, Parser};
+use clap::{crate_version, Parser, ValueEnum};
 use futures_util::TryStreamExt;
 use http_body_util::{combinators::BoxBody, BodyExt, Either, Full, StreamBody};
 use hyper::{
@@ -14,6 +14,7 @@ use hyper::{
     Method, Request, Response, StatusCode,
 };
 use hyper_util::rt::TokioIo;
+use serde::{Deserialize, Serialize};
 use std::{
     io::ErrorKind,
     net::{IpAddr, SocketAddr},
@@ -31,6 +32,7 @@ use tracing::{debug, error, info, warn};
 #[template(path = "status-webui/index.htm")]
 struct StatusWebUiIndex<'a> {
     project_dir: &'a str,
+    color_scheme: ColorScheme,
 }
 
 static INTERNAL_INDEX_PAGE: OnceLock<Vec<u8>> = OnceLock::new();
@@ -79,6 +81,9 @@ struct Cli {
     /// Port to serve status on
     #[arg(short = 'q', long, default_value_t = 0)]
     status_listen_port: u16,
+    /// Color theme to use for status web-ui
+    #[arg(value_enum, short = 'c', long, default_value_t = ColorScheme::GraphiteAndCopper)]
+    color_scheme: ColorScheme,
     /*
      * Positional arguments
      */
@@ -87,6 +92,22 @@ struct Cli {
     dir: String,
 }
 
+/// Color theme to use for status web-ui
+#[derive(ValueEnum, Debug, Copy, Clone, Serialize, Deserialize)]
+#[serde(rename_all = "kebab-case")]
+enum ColorScheme {
+    /// Midnight Purple (Dark Mode)
+    MidnightPurple,
+    /// Slate Green (Dark Mode)
+    SlateGreen,
+    /// Abyss Blue (Dark Mode)
+    AbyssBlue,
+    /// Graphite & Copper (Dark Mode)
+    GraphiteAndCopper,
+    /// Crimson & Charcoal (Dark Mode)
+    CrimsonAndCharcoal,
+}
+
 static PROJECT_DIR: OnceLock<PathBuf> = OnceLock::new();
 
 #[tokio::main]
@@ -129,7 +150,10 @@ async fn main() -> anyhow::Result<()> {
         .inspect_err(|e| error!(os_string = ?e, "Fatal: Failed to convert PathBuf to String."))
         .map_err(|_| anyhow!("Failed to convert PathBuf to String."))?;
 
-    let internal_index_page = StatusWebUiIndex { project_dir: &pdir };
+    let internal_index_page = StatusWebUiIndex {
+        project_dir: &pdir,
+        color_scheme: args.color_scheme,
+    };
     let internal_index_page_rendered = internal_index_page.render()?.as_bytes().to_vec();
     INTERNAL_INDEX_PAGE
         .set(internal_index_page_rendered)

src/main.rs

@@ -1,15 +1,15 @@
 <!doctype html>
-<html lang=en>
+<html lang=en data-color-scheme={{ color_scheme|json|safe }}>
 <meta charset=utf-8>
-<title>Project {{ project_dir }} – http-horse</title>
+<title>Project {{ project_dir|safe }} – http-horse</title>
 <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel=stylesheet href=/style/main.css>
 
 <div id=outer-main>
 <header id=header-main>
   <h1>http-horse 🐴</h1>
-  <h2>Project <code>{{ project_dir }}</code></h2>
+  <h2>Project <code>{{ project_dir|safe }}</code></h2>
 </header>
 
 <div id=inner-main>