From 439065c4a906e048c6f352a8549369dffd4545c0 Mon Sep 17 00:00:00 2001
From: root <root@else-if.org>
Date: Tue, 10 Mar 2026 09:26:06 +0000
Subject: [PATCH] stylesw

---
 internal/server/static/style.css    | 380 ++++++++++++++--------------
 internal/server/templates/base.html |   6 +
 2 files changed, 196 insertions(+), 190 deletions(-)

diff --git a/internal/server/static/style.css b/internal/server/static/style.css
index 0c82a96..569c85d 100644
--- a/internal/server/static/style.css
+++ b/internal/server/static/style.css
@@ -1,35 +1,35 @@
 * { margin: 0; padding: 0; box-sizing: border-box; }
 
 :root {
-  --bg: #fafafa;
-  --fg: #1a1a1a;
-  --sidebar-bg: #f0f0f0;
+  --bg: #f8f5f0;
+  --fg: #2a2a2a;
+  --sidebar-bg: #f0eae2;
   --sidebar-w: 280px;
-  --accent: #2563eb;
-  --border: #ddd;
-  --code-bg: #f6f8fa;
-  --code-fg: #24292e;
+  --accent: #7b3f8d;
+  --border: #d0c8d8;
+  --code-bg: #eee8f3;
+  --code-fg: #4a3660;
 }
 
 [data-theme="dark"] {
-  --bg: #1a1a2e;
-  --fg: #e0e0e0;
-  --sidebar-bg: #16213e;
-  --accent: #60a5fa;
-  --border: #333;
-  --code-bg: #0d1117;
-  --code-fg: #e0e0e0;
+  --bg: #1a1520;
+  --fg: #d5d0dc;
+  --sidebar-bg: #221c2c;
+  --accent: #c49dd4;
+  --border: #3a3048;
+  --code-bg: #1e1830;
+  --code-fg: #b89cd0;
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    --bg: #1a1a2e;
-    --fg: #e0e0e0;
-    --sidebar-bg: #16213e;
-    --accent: #60a5fa;
-    --border: #333;
-    --code-bg: #0d1117;
-    --code-fg: #e0e0e0;
+    --bg: #1a1520;
+    --fg: #d5d0dc;
+    --sidebar-bg: #221c2c;
+    --accent: #c49dd4;
+    --border: #3a3048;
+    --code-bg: #1e1830;
+    --code-fg: #b89cd0;
   }
 }
 
@@ -262,185 +262,185 @@ body {
 }
 
 /* ------------------------------------------------------------------ */
-/* Syntax highlighting — light theme (github)                         */
+/* Syntax highlighting — light theme (purple)                         */
 /* ------------------------------------------------------------------ */
 .hl-chroma { background-color: transparent; }
-.hl-chroma .hl-err { color: #a61717; background-color: #e3d2d2 }
-.hl-chroma .hl-k { color: #0550ae; font-weight: bold }
-.hl-chroma .hl-kc { color: #0550ae; font-weight: bold }
-.hl-chroma .hl-kd { color: #0550ae; font-weight: bold }
-.hl-chroma .hl-kn { color: #0550ae; font-weight: bold }
-.hl-chroma .hl-kp { color: #0550ae; font-weight: bold }
-.hl-chroma .hl-kr { color: #0550ae; font-weight: bold }
-.hl-chroma .hl-kt { color: #445588; font-weight: bold }
-.hl-chroma .hl-na { color: #008080 }
-.hl-chroma .hl-nb { color: #0086b3 }
-.hl-chroma .hl-bp { color: #999999 }
-.hl-chroma .hl-nc { color: #445588; font-weight: bold }
-.hl-chroma .hl-no { color: #008080 }
-.hl-chroma .hl-nd { color: #3c5d5d; font-weight: bold }
-.hl-chroma .hl-ni { color: #800080 }
-.hl-chroma .hl-ne { color: #990000; font-weight: bold }
-.hl-chroma .hl-nf { color: #6f42c1 }
-.hl-chroma .hl-nl { color: #990000; font-weight: bold }
-.hl-chroma .hl-nn { color: #555555 }
-.hl-chroma .hl-nt { color: #22863a }
-.hl-chroma .hl-nv { color: #008080 }
-.hl-chroma .hl-vc { color: #008080 }
-.hl-chroma .hl-vg { color: #008080 }
-.hl-chroma .hl-vi { color: #008080 }
-.hl-chroma .hl-s { color: #032f62 }
-.hl-chroma .hl-sa { color: #032f62 }
-.hl-chroma .hl-sb { color: #032f62 }
-.hl-chroma .hl-sc { color: #032f62 }
-.hl-chroma .hl-dl { color: #032f62 }
-.hl-chroma .hl-sd { color: #032f62 }
-.hl-chroma .hl-s2 { color: #032f62 }
-.hl-chroma .hl-se { color: #032f62 }
-.hl-chroma .hl-sh { color: #032f62 }
-.hl-chroma .hl-si { color: #032f62 }
-.hl-chroma .hl-sx { color: #032f62 }
-.hl-chroma .hl-sr { color: #009926 }
-.hl-chroma .hl-s1 { color: #032f62 }
-.hl-chroma .hl-ss { color: #990073 }
-.hl-chroma .hl-m { color: #005cc5 }
-.hl-chroma .hl-mb { color: #005cc5 }
-.hl-chroma .hl-mf { color: #005cc5 }
-.hl-chroma .hl-mh { color: #005cc5 }
-.hl-chroma .hl-mi { color: #005cc5 }
-.hl-chroma .hl-il { color: #005cc5 }
-.hl-chroma .hl-mo { color: #005cc5 }
-.hl-chroma .hl-o { color: #d73a49 }
-.hl-chroma .hl-ow { color: #d73a49 }
-.hl-chroma .hl-c { color: #6a737d; font-style: italic }
-.hl-chroma .hl-ch { color: #6a737d; font-style: italic }
-.hl-chroma .hl-cm { color: #6a737d; font-style: italic }
-.hl-chroma .hl-c1 { color: #6a737d; font-style: italic }
-.hl-chroma .hl-cs { color: #6a737d; font-weight: bold; font-style: italic }
-.hl-chroma .hl-cp { color: #6a737d; font-weight: bold; font-style: italic }
-.hl-chroma .hl-cpf { color: #6a737d; font-weight: bold; font-style: italic }
-.hl-chroma .hl-gd { color: #b31d28; background-color: #ffeef0 }
-.hl-chroma .hl-gi { color: #22863a; background-color: #f0fff4 }
+.hl-chroma .hl-err { color: #a61717; background-color: #f0dde0 }
+.hl-chroma .hl-k { color: #6b3fa0; font-weight: bold }
+.hl-chroma .hl-kc { color: #6b3fa0; font-weight: bold }
+.hl-chroma .hl-kd { color: #6b3fa0; font-weight: bold }
+.hl-chroma .hl-kn { color: #6b3fa0; font-weight: bold }
+.hl-chroma .hl-kp { color: #6b3fa0; font-weight: bold }
+.hl-chroma .hl-kr { color: #6b3fa0; font-weight: bold }
+.hl-chroma .hl-kt { color: #5a4a66; font-weight: bold }
+.hl-chroma .hl-na { color: #2e7d6e }
+.hl-chroma .hl-nb { color: #4a6b8a }
+.hl-chroma .hl-bp { color: #8a8292 }
+.hl-chroma .hl-nc { color: #5a4a66; font-weight: bold }
+.hl-chroma .hl-no { color: #2e7d6e }
+.hl-chroma .hl-nd { color: #4a6b8a; font-weight: bold }
+.hl-chroma .hl-ni { color: #7b3f8d }
+.hl-chroma .hl-ne { color: #993344; font-weight: bold }
+.hl-chroma .hl-nf { color: #7b3f8d }
+.hl-chroma .hl-nl { color: #993344; font-weight: bold }
+.hl-chroma .hl-nn { color: #5a4a66 }
+.hl-chroma .hl-nt { color: #2e7d6e }
+.hl-chroma .hl-nv { color: #2e7d6e }
+.hl-chroma .hl-vc { color: #2e7d6e }
+.hl-chroma .hl-vg { color: #2e7d6e }
+.hl-chroma .hl-vi { color: #2e7d6e }
+.hl-chroma .hl-s { color: #8b5530 }
+.hl-chroma .hl-sa { color: #8b5530 }
+.hl-chroma .hl-sb { color: #8b5530 }
+.hl-chroma .hl-sc { color: #8b5530 }
+.hl-chroma .hl-dl { color: #8b5530 }
+.hl-chroma .hl-sd { color: #8b5530 }
+.hl-chroma .hl-s2 { color: #8b5530 }
+.hl-chroma .hl-se { color: #8b5530 }
+.hl-chroma .hl-sh { color: #8b5530 }
+.hl-chroma .hl-si { color: #8b5530 }
+.hl-chroma .hl-sx { color: #8b5530 }
+.hl-chroma .hl-sr { color: #2e7d6e }
+.hl-chroma .hl-s1 { color: #8b5530 }
+.hl-chroma .hl-ss { color: #7b3f8d }
+.hl-chroma .hl-m { color: #4a3660 }
+.hl-chroma .hl-mb { color: #4a3660 }
+.hl-chroma .hl-mf { color: #4a3660 }
+.hl-chroma .hl-mh { color: #4a3660 }
+.hl-chroma .hl-mi { color: #4a3660 }
+.hl-chroma .hl-il { color: #4a3660 }
+.hl-chroma .hl-mo { color: #4a3660 }
+.hl-chroma .hl-o { color: #c0392b }
+.hl-chroma .hl-ow { color: #c0392b }
+.hl-chroma .hl-c { color: #8a8292; font-style: italic }
+.hl-chroma .hl-ch { color: #8a8292; font-style: italic }
+.hl-chroma .hl-cm { color: #8a8292; font-style: italic }
+.hl-chroma .hl-c1 { color: #8a8292; font-style: italic }
+.hl-chroma .hl-cs { color: #8a8292; font-weight: bold; font-style: italic }
+.hl-chroma .hl-cp { color: #8a8292; font-weight: bold; font-style: italic }
+.hl-chroma .hl-cpf { color: #8a8292; font-weight: bold; font-style: italic }
+.hl-chroma .hl-gd { color: #993344; background-color: #f8e8ec }
+.hl-chroma .hl-gi { color: #2e7d6e; background-color: #e8f4f0 }
 .hl-chroma .hl-ge { font-style: italic }
 .hl-chroma .hl-gs { font-weight: bold }
-.hl-chroma .hl-gh { color: #999999 }
-.hl-chroma .hl-gu { color: #aaaaaa }
+.hl-chroma .hl-gh { color: #8a8292 }
+.hl-chroma .hl-gu { color: #a898b8 }
 
 /* ------------------------------------------------------------------ */
-/* Syntax highlighting — dark theme (monokai)                         */
+/* Syntax highlighting — dark theme (purple)                          */
 /* ------------------------------------------------------------------ */
-[data-theme="dark"] .hl-chroma .hl-err { color: #960050; background-color: #1e0010 }
-[data-theme="dark"] .hl-chroma .hl-k { color: #66d9ef; font-weight: normal }
-[data-theme="dark"] .hl-chroma .hl-kc { color: #66d9ef; font-weight: normal }
-[data-theme="dark"] .hl-chroma .hl-kd { color: #66d9ef; font-weight: normal }
-[data-theme="dark"] .hl-chroma .hl-kn { color: #f92672; font-weight: normal }
-[data-theme="dark"] .hl-chroma .hl-kp { color: #66d9ef; font-weight: normal }
-[data-theme="dark"] .hl-chroma .hl-kr { color: #66d9ef; font-weight: normal }
-[data-theme="dark"] .hl-chroma .hl-kt { color: #66d9ef; font-weight: normal }
-[data-theme="dark"] .hl-chroma .hl-na { color: #a6e22e }
-[data-theme="dark"] .hl-chroma .hl-nb { color: #f8f8f2 }
-[data-theme="dark"] .hl-chroma .hl-bp { color: #f8f8f2 }
-[data-theme="dark"] .hl-chroma .hl-nc { color: #a6e22e; font-weight: normal }
-[data-theme="dark"] .hl-chroma .hl-no { color: #66d9ef }
-[data-theme="dark"] .hl-chroma .hl-nd { color: #a6e22e; font-weight: normal }
-[data-theme="dark"] .hl-chroma .hl-ni { color: #f8f8f2 }
-[data-theme="dark"] .hl-chroma .hl-ne { color: #a6e22e; font-weight: normal }
-[data-theme="dark"] .hl-chroma .hl-nf { color: #a6e22e }
-[data-theme="dark"] .hl-chroma .hl-nl { color: #f8f8f2 }
-[data-theme="dark"] .hl-chroma .hl-nn { color: #f8f8f2 }
-[data-theme="dark"] .hl-chroma .hl-nt { color: #f92672 }
-[data-theme="dark"] .hl-chroma .hl-nv { color: #f8f8f2 }
-[data-theme="dark"] .hl-chroma .hl-vc { color: #f8f8f2 }
-[data-theme="dark"] .hl-chroma .hl-vg { color: #f8f8f2 }
-[data-theme="dark"] .hl-chroma .hl-vi { color: #f8f8f2 }
-[data-theme="dark"] .hl-chroma .hl-s { color: #e6db74 }
-[data-theme="dark"] .hl-chroma .hl-sa { color: #e6db74 }
-[data-theme="dark"] .hl-chroma .hl-sb { color: #e6db74 }
-[data-theme="dark"] .hl-chroma .hl-sc { color: #e6db74 }
-[data-theme="dark"] .hl-chroma .hl-dl { color: #e6db74 }
-[data-theme="dark"] .hl-chroma .hl-sd { color: #e6db74 }
-[data-theme="dark"] .hl-chroma .hl-s2 { color: #e6db74 }
-[data-theme="dark"] .hl-chroma .hl-se { color: #ae81ff }
-[data-theme="dark"] .hl-chroma .hl-sh { color: #e6db74 }
-[data-theme="dark"] .hl-chroma .hl-si { color: #e6db74 }
-[data-theme="dark"] .hl-chroma .hl-sx { color: #e6db74 }
-[data-theme="dark"] .hl-chroma .hl-sr { color: #e6db74 }
-[data-theme="dark"] .hl-chroma .hl-s1 { color: #e6db74 }
-[data-theme="dark"] .hl-chroma .hl-ss { color: #e6db74 }
-[data-theme="dark"] .hl-chroma .hl-m { color: #ae81ff }
-[data-theme="dark"] .hl-chroma .hl-mb { color: #ae81ff }
-[data-theme="dark"] .hl-chroma .hl-mf { color: #ae81ff }
-[data-theme="dark"] .hl-chroma .hl-mh { color: #ae81ff }
-[data-theme="dark"] .hl-chroma .hl-mi { color: #ae81ff }
-[data-theme="dark"] .hl-chroma .hl-il { color: #ae81ff }
-[data-theme="dark"] .hl-chroma .hl-mo { color: #ae81ff }
-[data-theme="dark"] .hl-chroma .hl-o { color: #f92672; font-weight: normal }
-[data-theme="dark"] .hl-chroma .hl-ow { color: #f92672; font-weight: normal }
-[data-theme="dark"] .hl-chroma .hl-c { color: #75715e; font-style: italic }
-[data-theme="dark"] .hl-chroma .hl-ch { color: #75715e; font-style: italic }
-[data-theme="dark"] .hl-chroma .hl-cm { color: #75715e; font-style: italic }
-[data-theme="dark"] .hl-chroma .hl-c1 { color: #75715e; font-style: italic }
-[data-theme="dark"] .hl-chroma .hl-cs { color: #75715e; font-style: italic }
-[data-theme="dark"] .hl-chroma .hl-cp { color: #75715e; font-style: italic }
-[data-theme="dark"] .hl-chroma .hl-cpf { color: #75715e; font-style: italic }
-[data-theme="dark"] .hl-chroma .hl-gd { color: #f92672 }
-[data-theme="dark"] .hl-chroma .hl-gi { color: #a6e22e }
+[data-theme="dark"] .hl-chroma .hl-err { color: #e86050; background-color: #2a1520 }
+[data-theme="dark"] .hl-chroma .hl-k { color: #c8a8e8; font-weight: normal }
+[data-theme="dark"] .hl-chroma .hl-kc { color: #c8a8e8; font-weight: normal }
+[data-theme="dark"] .hl-chroma .hl-kd { color: #c8a8e8; font-weight: normal }
+[data-theme="dark"] .hl-chroma .hl-kn { color: #e086a0; font-weight: normal }
+[data-theme="dark"] .hl-chroma .hl-kp { color: #c8a8e8; font-weight: normal }
+[data-theme="dark"] .hl-chroma .hl-kr { color: #c8a8e8; font-weight: normal }
+[data-theme="dark"] .hl-chroma .hl-kt { color: #8cb8d0; font-weight: normal }
+[data-theme="dark"] .hl-chroma .hl-na { color: #a0d0a0 }
+[data-theme="dark"] .hl-chroma .hl-nb { color: #d5d0dc }
+[data-theme="dark"] .hl-chroma .hl-bp { color: #d5d0dc }
+[data-theme="dark"] .hl-chroma .hl-nc { color: #a0d0a0; font-weight: normal }
+[data-theme="dark"] .hl-chroma .hl-no { color: #8cb8d0 }
+[data-theme="dark"] .hl-chroma .hl-nd { color: #a0d0a0; font-weight: normal }
+[data-theme="dark"] .hl-chroma .hl-ni { color: #d5d0dc }
+[data-theme="dark"] .hl-chroma .hl-ne { color: #a0d0a0; font-weight: normal }
+[data-theme="dark"] .hl-chroma .hl-nf { color: #a0d0a0 }
+[data-theme="dark"] .hl-chroma .hl-nl { color: #d5d0dc }
+[data-theme="dark"] .hl-chroma .hl-nn { color: #d5d0dc }
+[data-theme="dark"] .hl-chroma .hl-nt { color: #e086a0 }
+[data-theme="dark"] .hl-chroma .hl-nv { color: #d5d0dc }
+[data-theme="dark"] .hl-chroma .hl-vc { color: #d5d0dc }
+[data-theme="dark"] .hl-chroma .hl-vg { color: #d5d0dc }
+[data-theme="dark"] .hl-chroma .hl-vi { color: #d5d0dc }
+[data-theme="dark"] .hl-chroma .hl-s { color: #d4b88c }
+[data-theme="dark"] .hl-chroma .hl-sa { color: #d4b88c }
+[data-theme="dark"] .hl-chroma .hl-sb { color: #d4b88c }
+[data-theme="dark"] .hl-chroma .hl-sc { color: #d4b88c }
+[data-theme="dark"] .hl-chroma .hl-dl { color: #d4b88c }
+[data-theme="dark"] .hl-chroma .hl-sd { color: #d4b88c }
+[data-theme="dark"] .hl-chroma .hl-s2 { color: #d4b88c }
+[data-theme="dark"] .hl-chroma .hl-se { color: #b89cd0 }
+[data-theme="dark"] .hl-chroma .hl-sh { color: #d4b88c }
+[data-theme="dark"] .hl-chroma .hl-si { color: #d4b88c }
+[data-theme="dark"] .hl-chroma .hl-sx { color: #d4b88c }
+[data-theme="dark"] .hl-chroma .hl-sr { color: #d4b88c }
+[data-theme="dark"] .hl-chroma .hl-s1 { color: #d4b88c }
+[data-theme="dark"] .hl-chroma .hl-ss { color: #d4b88c }
+[data-theme="dark"] .hl-chroma .hl-m { color: #b89cd0 }
+[data-theme="dark"] .hl-chroma .hl-mb { color: #b89cd0 }
+[data-theme="dark"] .hl-chroma .hl-mf { color: #b89cd0 }
+[data-theme="dark"] .hl-chroma .hl-mh { color: #b89cd0 }
+[data-theme="dark"] .hl-chroma .hl-mi { color: #b89cd0 }
+[data-theme="dark"] .hl-chroma .hl-il { color: #b89cd0 }
+[data-theme="dark"] .hl-chroma .hl-mo { color: #b89cd0 }
+[data-theme="dark"] .hl-chroma .hl-o { color: #e086a0; font-weight: normal }
+[data-theme="dark"] .hl-chroma .hl-ow { color: #e086a0; font-weight: normal }
+[data-theme="dark"] .hl-chroma .hl-c { color: #6b5a78; font-style: italic }
+[data-theme="dark"] .hl-chroma .hl-ch { color: #6b5a78; font-style: italic }
+[data-theme="dark"] .hl-chroma .hl-cm { color: #6b5a78; font-style: italic }
+[data-theme="dark"] .hl-chroma .hl-c1 { color: #6b5a78; font-style: italic }
+[data-theme="dark"] .hl-chroma .hl-cs { color: #6b5a78; font-style: italic }
+[data-theme="dark"] .hl-chroma .hl-cp { color: #6b5a78; font-style: italic }
+[data-theme="dark"] .hl-chroma .hl-cpf { color: #6b5a78; font-style: italic }
+[data-theme="dark"] .hl-chroma .hl-gd { color: #e086a0 }
+[data-theme="dark"] .hl-chroma .hl-gi { color: #a0d0a0 }
 [data-theme="dark"] .hl-chroma .hl-ge { font-style: italic }
 [data-theme="dark"] .hl-chroma .hl-gs { font-weight: bold }
-[data-theme="dark"] .hl-chroma .hl-gh { color: #75715e }
-[data-theme="dark"] .hl-chroma .hl-gu { color: #75715e }
+[data-theme="dark"] .hl-chroma .hl-gh { color: #6b5a78 }
+[data-theme="dark"] .hl-chroma .hl-gu { color: #6b5a78 }
 
 /* Dark syntax when auto-detected via media query */
 @media (prefers-color-scheme: dark) {
-  :root:not([data-theme="light"]) .hl-chroma .hl-err { color: #960050; background-color: #1e0010 }
-  :root:not([data-theme="light"]) .hl-chroma .hl-k { color: #66d9ef; font-weight: normal }
-  :root:not([data-theme="light"]) .hl-chroma .hl-kc { color: #66d9ef; font-weight: normal }
-  :root:not([data-theme="light"]) .hl-chroma .hl-kd { color: #66d9ef; font-weight: normal }
-  :root:not([data-theme="light"]) .hl-chroma .hl-kn { color: #f92672; font-weight: normal }
-  :root:not([data-theme="light"]) .hl-chroma .hl-kp { color: #66d9ef; font-weight: normal }
-  :root:not([data-theme="light"]) .hl-chroma .hl-kr { color: #66d9ef; font-weight: normal }
-  :root:not([data-theme="light"]) .hl-chroma .hl-kt { color: #66d9ef; font-weight: normal }
-  :root:not([data-theme="light"]) .hl-chroma .hl-na { color: #a6e22e }
-  :root:not([data-theme="light"]) .hl-chroma .hl-nb { color: #f8f8f2 }
-  :root:not([data-theme="light"]) .hl-chroma .hl-bp { color: #f8f8f2 }
-  :root:not([data-theme="light"]) .hl-chroma .hl-nc { color: #a6e22e; font-weight: normal }
-  :root:not([data-theme="light"]) .hl-chroma .hl-no { color: #66d9ef }
-  :root:not([data-theme="light"]) .hl-chroma .hl-nd { color: #a6e22e; font-weight: normal }
-  :root:not([data-theme="light"]) .hl-chroma .hl-ne { color: #a6e22e; font-weight: normal }
-  :root:not([data-theme="light"]) .hl-chroma .hl-nf { color: #a6e22e }
-  :root:not([data-theme="light"]) .hl-chroma .hl-nn { color: #f8f8f2 }
-  :root:not([data-theme="light"]) .hl-chroma .hl-nt { color: #f92672 }
-  :root:not([data-theme="light"]) .hl-chroma .hl-nv { color: #f8f8f2 }
-  :root:not([data-theme="light"]) .hl-chroma .hl-s { color: #e6db74 }
-  :root:not([data-theme="light"]) .hl-chroma .hl-sa { color: #e6db74 }
-  :root:not([data-theme="light"]) .hl-chroma .hl-sb { color: #e6db74 }
-  :root:not([data-theme="light"]) .hl-chroma .hl-sc { color: #e6db74 }
-  :root:not([data-theme="light"]) .hl-chroma .hl-dl { color: #e6db74 }
-  :root:not([data-theme="light"]) .hl-chroma .hl-sd { color: #e6db74 }
-  :root:not([data-theme="light"]) .hl-chroma .hl-s2 { color: #e6db74 }
-  :root:not([data-theme="light"]) .hl-chroma .hl-se { color: #ae81ff }
-  :root:not([data-theme="light"]) .hl-chroma .hl-sh { color: #e6db74 }
-  :root:not([data-theme="light"]) .hl-chroma .hl-si { color: #e6db74 }
-  :root:not([data-theme="light"]) .hl-chroma .hl-sx { color: #e6db74 }
-  :root:not([data-theme="light"]) .hl-chroma .hl-sr { color: #e6db74 }
-  :root:not([data-theme="light"]) .hl-chroma .hl-s1 { color: #e6db74 }
-  :root:not([data-theme="light"]) .hl-chroma .hl-ss { color: #e6db74 }
-  :root:not([data-theme="light"]) .hl-chroma .hl-m { color: #ae81ff }
-  :root:not([data-theme="light"]) .hl-chroma .hl-mb { color: #ae81ff }
-  :root:not([data-theme="light"]) .hl-chroma .hl-mf { color: #ae81ff }
-  :root:not([data-theme="light"]) .hl-chroma .hl-mh { color: #ae81ff }
-  :root:not([data-theme="light"]) .hl-chroma .hl-mi { color: #ae81ff }
-  :root:not([data-theme="light"]) .hl-chroma .hl-il { color: #ae81ff }
-  :root:not([data-theme="light"]) .hl-chroma .hl-mo { color: #ae81ff }
-  :root:not([data-theme="light"]) .hl-chroma .hl-o { color: #f92672; font-weight: normal }
-  :root:not([data-theme="light"]) .hl-chroma .hl-ow { color: #f92672; font-weight: normal }
-  :root:not([data-theme="light"]) .hl-chroma .hl-c { color: #75715e; font-style: italic }
-  :root:not([data-theme="light"]) .hl-chroma .hl-ch { color: #75715e; font-style: italic }
-  :root:not([data-theme="light"]) .hl-chroma .hl-cm { color: #75715e; font-style: italic }
-  :root:not([data-theme="light"]) .hl-chroma .hl-c1 { color: #75715e; font-style: italic }
-  :root:not([data-theme="light"]) .hl-chroma .hl-cs { color: #75715e; font-style: italic }
-  :root:not([data-theme="light"]) .hl-chroma .hl-cp { color: #75715e; font-style: italic }
-  :root:not([data-theme="light"]) .hl-chroma .hl-cpf { color: #75715e; font-style: italic }
-  :root:not([data-theme="light"]) .hl-chroma .hl-gd { color: #f92672 }
-  :root:not([data-theme="light"]) .hl-chroma .hl-gi { color: #a6e22e }
+  :root:not([data-theme="light"]) .hl-chroma .hl-err { color: #e86050; background-color: #2a1520 }
+  :root:not([data-theme="light"]) .hl-chroma .hl-k { color: #c8a8e8; font-weight: normal }
+  :root:not([data-theme="light"]) .hl-chroma .hl-kc { color: #c8a8e8; font-weight: normal }
+  :root:not([data-theme="light"]) .hl-chroma .hl-kd { color: #c8a8e8; font-weight: normal }
+  :root:not([data-theme="light"]) .hl-chroma .hl-kn { color: #e086a0; font-weight: normal }
+  :root:not([data-theme="light"]) .hl-chroma .hl-kp { color: #c8a8e8; font-weight: normal }
+  :root:not([data-theme="light"]) .hl-chroma .hl-kr { color: #c8a8e8; font-weight: normal }
+  :root:not([data-theme="light"]) .hl-chroma .hl-kt { color: #8cb8d0; font-weight: normal }
+  :root:not([data-theme="light"]) .hl-chroma .hl-na { color: #a0d0a0 }
+  :root:not([data-theme="light"]) .hl-chroma .hl-nb { color: #d5d0dc }
+  :root:not([data-theme="light"]) .hl-chroma .hl-bp { color: #d5d0dc }
+  :root:not([data-theme="light"]) .hl-chroma .hl-nc { color: #a0d0a0; font-weight: normal }
+  :root:not([data-theme="light"]) .hl-chroma .hl-no { color: #8cb8d0 }
+  :root:not([data-theme="light"]) .hl-chroma .hl-nd { color: #a0d0a0; font-weight: normal }
+  :root:not([data-theme="light"]) .hl-chroma .hl-ne { color: #a0d0a0; font-weight: normal }
+  :root:not([data-theme="light"]) .hl-chroma .hl-nf { color: #a0d0a0 }
+  :root:not([data-theme="light"]) .hl-chroma .hl-nn { color: #d5d0dc }
+  :root:not([data-theme="light"]) .hl-chroma .hl-nt { color: #e086a0 }
+  :root:not([data-theme="light"]) .hl-chroma .hl-nv { color: #d5d0dc }
+  :root:not([data-theme="light"]) .hl-chroma .hl-s { color: #d4b88c }
+  :root:not([data-theme="light"]) .hl-chroma .hl-sa { color: #d4b88c }
+  :root:not([data-theme="light"]) .hl-chroma .hl-sb { color: #d4b88c }
+  :root:not([data-theme="light"]) .hl-chroma .hl-sc { color: #d4b88c }
+  :root:not([data-theme="light"]) .hl-chroma .hl-dl { color: #d4b88c }
+  :root:not([data-theme="light"]) .hl-chroma .hl-sd { color: #d4b88c }
+  :root:not([data-theme="light"]) .hl-chroma .hl-s2 { color: #d4b88c }
+  :root:not([data-theme="light"]) .hl-chroma .hl-se { color: #b89cd0 }
+  :root:not([data-theme="light"]) .hl-chroma .hl-sh { color: #d4b88c }
+  :root:not([data-theme="light"]) .hl-chroma .hl-si { color: #d4b88c }
+  :root:not([data-theme="light"]) .hl-chroma .hl-sx { color: #d4b88c }
+  :root:not([data-theme="light"]) .hl-chroma .hl-sr { color: #d4b88c }
+  :root:not([data-theme="light"]) .hl-chroma .hl-s1 { color: #d4b88c }
+  :root:not([data-theme="light"]) .hl-chroma .hl-ss { color: #d4b88c }
+  :root:not([data-theme="light"]) .hl-chroma .hl-m { color: #b89cd0 }
+  :root:not([data-theme="light"]) .hl-chroma .hl-mb { color: #b89cd0 }
+  :root:not([data-theme="light"]) .hl-chroma .hl-mf { color: #b89cd0 }
+  :root:not([data-theme="light"]) .hl-chroma .hl-mh { color: #b89cd0 }
+  :root:not([data-theme="light"]) .hl-chroma .hl-mi { color: #b89cd0 }
+  :root:not([data-theme="light"]) .hl-chroma .hl-il { color: #b89cd0 }
+  :root:not([data-theme="light"]) .hl-chroma .hl-mo { color: #b89cd0 }
+  :root:not([data-theme="light"]) .hl-chroma .hl-o { color: #e086a0; font-weight: normal }
+  :root:not([data-theme="light"]) .hl-chroma .hl-ow { color: #e086a0; font-weight: normal }
+  :root:not([data-theme="light"]) .hl-chroma .hl-c { color: #6b5a78; font-style: italic }
+  :root:not([data-theme="light"]) .hl-chroma .hl-ch { color: #6b5a78; font-style: italic }
+  :root:not([data-theme="light"]) .hl-chroma .hl-cm { color: #6b5a78; font-style: italic }
+  :root:not([data-theme="light"]) .hl-chroma .hl-c1 { color: #6b5a78; font-style: italic }
+  :root:not([data-theme="light"]) .hl-chroma .hl-cs { color: #6b5a78; font-style: italic }
+  :root:not([data-theme="light"]) .hl-chroma .hl-cp { color: #6b5a78; font-style: italic }
+  :root:not([data-theme="light"]) .hl-chroma .hl-cpf { color: #6b5a78; font-style: italic }
+  :root:not([data-theme="light"]) .hl-chroma .hl-gd { color: #e086a0 }
+  :root:not([data-theme="light"]) .hl-chroma .hl-gi { color: #a0d0a0 }
 }
diff --git a/internal/server/templates/base.html b/internal/server/templates/base.html
index 8b4d12f..bf624b3 100644
--- a/internal/server/templates/base.html
+++ b/internal/server/templates/base.html
@@ -5,6 +5,12 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>{{if .Title}}{{.Title}} - {{end}}{{.SiteTitle}}</title>
 <link rel="stylesheet" href="/static/style.css">
+<script>
+(function(){
+  var t = localStorage.getItem('cs-midi-theme');
+  if (t && t !== 'auto') document.documentElement.setAttribute('data-theme', t);
+})();
+</script>
 </head>
 <body>
 <div class="layout">