feat: Add (and default to-) darkmode. Can toggle to lightmode with flag.

Author: sermuns

Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "meread"
-version = "0.2.1"
+version = "0.3.0"
 description = "preview github flavored markdown locally"
 repository = "https://github.com/sermuns/meread"
 license = "WTFPL"

Cargo.toml

@@ -0,0 +1,21 @@
+:root {
+	--borderColor-default: #d1d9e0;
+	--borderColor-muted: #d1d9e0b3;
+
+	--bgColor-neutral-muted: #818b981f;
+	--bgColor-default: #fff;
+	--bgColor-muted: #f6f8fa;
+
+	--fgColor-default: #1f2328;
+	--fgColor-muted: #59636e;
+}
+
+/* --borderColor-default: #3d444d; */
+/* --borderColor-muted: #3d444db3; */
+/**/
+/* --bgColor-default: #0d1117; */
+/* --bgColor-muted: #151b23; */
+/**/
+/* --fgColor-default: #f0f6fc; */
+/* --fgColor-muted: #9198a1; */
+/* --fgColor-accent: #4493f8; */

assets/styles-light.css

@@ -26,12 +26,21 @@
 }
 
 :root {
+	--borderColor-default: #3d444d;
+	--borderColor-muted: #3d444db3;
+
+	--bgColor-default: #0d1117;
+	--bgColor-muted: #151b23;
+	--bgColor-neutral-muted: #656c7633;
+
+	--fgColor-default: #f0f6fc;
+	--fgColor-muted: #9198a1;
+	--fgColor-accent: #4493f8;
+
+	color: var(--fgColor-default);
+	background-color: var(--bgColor-default);
 	font-family: "Noto Sans", sans-serif;
-	font-size: 16px;
-	--borderColor-default: #d1d9e0;
-	--borderColor-muted: #d1d9e0b3;
-	--bgColor-default: #fff;
-	--bgColor-muted: #f6f8fa;
+	font-size: 17px;
 }
 
 * {
@@ -81,9 +90,9 @@ code {
 	border-radius: 6px;
 }
 
-p > code {
-	color: rgb(31, 35, 40);
-	background-color: #f0f1f2;
+p > code,
+p > a > code {
+	background-color: var(--bgColor-neutral-muted);
 }
 
 /* footnote */
@@ -99,6 +108,7 @@ sup > a {
 h1,
 h2 {
 	border-bottom: 1px solid var(--borderColor-default);
+	padding-bottom: .3em;
 }
 
 section.footnotes {
@@ -114,7 +124,7 @@ section.footnotes {
 }
 
 a {
-	color: #0969da;
+	color: var(--fgColor-accent);
 	text-underline-offset: 0.2rem;
 	cursor: pointer;
 }
@@ -140,3 +150,9 @@ table {
 		}
 	}
 }
+
+hr {
+	height: 0.25em;
+	background-color: var(--borderColor-default);
+	border: 0;
+}

assets/styles.css

@@ -60,12 +60,13 @@ struct RenderedMarkdown {
 }
 
 impl RenderedMarkdown {
-    fn new(path: &Path) -> Result<Self> {
+    fn new(path: &Path, light: bool) -> Result<Self> {
         let markdown_content = fs::read_to_string(path).context("Failed to read markdown file")?;
 
         let rendered_markdown = render_markdown(
             &markdown_content,
             path.file_name().unwrap().to_str().unwrap(),
+            light,
         )?;
 
         Ok(Self {
@@ -74,13 +75,14 @@ impl RenderedMarkdown {
         })
     }
 
-    fn rebuild(&mut self) -> Result<()> {
+    fn rebuild(&mut self, light: bool) -> Result<()> {
         let markdown_content =
             fs::read_to_string(&self.path).context("Failed to read markdown file")?;
 
         self.content = render_markdown(
             &markdown_content,
             self.path.file_name().unwrap().to_str().unwrap(),
+            light,
         )?;
 
         Ok(())
@@ -144,6 +146,7 @@ async fn main() -> Result<()> {
         let rendered_html = render_markdown(
             &markdown_content,
             markdown_file_path.file_name().unwrap().to_str().unwrap(), // FIXME: horrible unwrap chain..
+            args.light,
         )?;
 
         fs::create_dir_all(export_dir).context("Failed to create export directory")?;
@@ -161,7 +164,10 @@ async fn main() -> Result<()> {
         return Ok(());
     }
 
-    let state = Arc::new(RwLock::new(RenderedMarkdown::new(&markdown_file_path)?));
+    let state = Arc::new(RwLock::new(RenderedMarkdown::new(
+        &markdown_file_path,
+        args.light,
+    )?));
 
     use notify::EventKind::{Create, Modify, Remove};
     use notify_debouncer_full::{DebounceEventResult, new_debouncer};
@@ -185,7 +191,7 @@ async fn main() -> Result<()> {
                     let state = Arc::clone(&state);
 
                     rt.spawn(async move {
-                        match state.write().await.rebuild() {
+                        match state.write().await.rebuild(args.light) {
                             Ok(_) => {
                                 let _ = RELOAD_TX.send("reload".to_string());
                             }
@@ -204,7 +210,7 @@ async fn main() -> Result<()> {
         .watch(root_path.as_path(), notify::RecursiveMode::Recursive)
         .with_context(|| format!("Failed to watch path: {}", root_path.display()))?;
 
-    state.write().await.rebuild()?;
+    state.write().await.rebuild(args.light)?;
 
     let app = Router::new()
         .route("/", get(serve))
@@ -268,6 +274,7 @@ async fn append_livereload_script(request: Request, next: Next) -> Response {
 struct HtmlTemplate<'a> {
     title: &'a str,
     contents: &'a str,
+    light: bool,
 }
 
 struct ComrakConfig {
@@ -333,7 +340,11 @@ fn init_comrak_config(light: bool) {
     let _ = COMRAK_CONFIG.set(ComrakConfig { options, plugins });
 }
 
-fn render_markdown(markdown_content: &str, title: &str) -> Result<String, askama::Error> {
+fn render_markdown(
+    markdown_content: &str,
+    title: &str,
+    light: bool,
+) -> Result<String, askama::Error> {
     let comrak_config = COMRAK_CONFIG.get().unwrap();
 
     let rendered_markdown = comrak::markdown_to_html_with_plugins(
@@ -345,6 +356,7 @@ fn render_markdown(markdown_content: &str, title: &str) -> Result<String, askama
     HtmlTemplate {
         title,
         contents: &rendered_markdown,
+        light,
     }
     .render()
 }

src/main.rs

@@ -4,6 +4,9 @@
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<link rel="stylesheet" href="/styles.css" />
+		{%if light%}
+		<link rel="stylesheet" href="/styles-light.css" />
+		{%endif%}
 		<script src="/script.js"></script>
 		<title>{{ title }}</title>
 	</head>