Add high contrast theme

public/css/themes/high_contrast.css

@@ -0,0 +1,37 @@
+body {
+    --bg_color: #000000;
+    --fg_color: #FFFFFF;
+    --fg_faded: #FFFFFFD4;
+    --fg_dark: var(--accent);
+    --fg_nav: var(--accent);
+
+    --bg_panel: #0C0C0C;
+    --bg_elements: #000000;
+    --bg_overlays: var(--bg_panel);
+    --bg_hover: #131313;
+
+    --grey: #E2E2E2;
+    --dark_grey: #4E4E4E;
+    --darker_grey: #272727;
+    --darkest_grey: #212121;
+    --border_grey: #7D7D7D;
+
+    --accent: #FF6C60;
+    --accent_light: #FFACA0;
+    --accent_dark: #909090;
+    --accent_border: #FF6C6091;
+
+    --play_button: var(--accent);
+    --play_button_hover: var(--accent_light);
+
+    --more_replies_dots: #A7A7A7;
+    --error_red: #420A05;
+
+    --verified_blue: #1DA1F2;
+    --icon_text: var(--fg_color);
+
+    --tab: var(--fg_color);
+    --tab_selected: var(--accent);
+
+    --profile_stat: var(--fg_color);
+}

src/routes/preferences.nim

@@ -10,7 +10,8 @@ export preferences
 
 proc findThemes*(dir: string): seq[string] =
   for kind, path in walkDir(dir / "css" / "themes"):
-    result.add path.splitFile.name.capitalizeAscii
+    let theme = path.splitFile.name
+    result.add theme.capitalizeAscii.replace("_", " ")
   sort(result)
 
 proc createPrefRouter*(cfg: Config) =

src/views/general.nim

@@ -1,4 +1,4 @@
-import uri, strutils
+import uri, strutils, strformat
 import karax/[karaxdsl, vdom]
 
 import renderutils
@@ -31,12 +31,13 @@ proc renderNavbar*(title, rss: string; req: Request): VNode =
 proc renderMain*(body: VNode; req: Request; cfg: Config; titleText=""; desc="";
                  rss=""; `type`="article"; video=""; images: seq[string] = @[]): string =
   let prefs = getPrefs(req.cookies.getOrDefault("preferences"), cfg)
-  let theme = "/css/themes/" & toLowerAscii(prefs.theme) & ".css"
+  let theme = toLowerAscii(prefs.theme).replace(" ", "_")
   let node = buildHtml(html(lang="en")):
     head:
       link(rel="stylesheet", `type`="text/css", href="/css/style.css")
       link(rel="stylesheet", `type`="text/css", href="/css/fontello.css")
-      link(rel="stylesheet", `type`="text/css", href=theme)
+      if theme.len > 0:
+        link(rel="stylesheet", `type`="text/css", href=(&"/css/themes/{theme}.css"))
 
       link(rel="apple-touch-icon", sizes="180x180", href="/apple-touch-icon.png")
       link(rel="icon", type="image/png", sizes="32x32", href="/favicon-32x32.png")