From b1a45ed00e517de1fe59d8598489aac568b1eff7 Mon Sep 17 00:00:00 2001
From: Hikari <hikari@nhcarrigan.com>
Date: Sun, 25 Jan 2026 13:44:52 -0800
Subject: [PATCH] feat: add high contrast mode for accessibility

- Add HighContrast variant to Theme enum in Rust backend
- Add high-contrast CSS theme with pure black/white for max contrast
- Use bright saturated colors for syntax highlighting
- Add High Contrast button to theme selector with accessibility tooltip
- Follows WCAG guidelines for contrast ratios

Closes #20
---
 src-tauri/src/config.rs                 |  7 ++++++
 src/app.css                             | 30 +++++++++++++++++++++++++
 src/lib/components/ConfigSidebar.svelte | 14 ++++++++++--
 src/lib/stores/config.ts                |  2 +-
 4 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/src-tauri/src/config.rs b/src-tauri/src/config.rs
index 6800346..69f3e7a 100644
--- a/src-tauri/src/config.rs
+++ b/src-tauri/src/config.rs
@@ -123,6 +123,8 @@ pub enum Theme {
     #[default]
     Dark,
     Light,
+    #[serde(rename = "high-contrast")]
+    HighContrast,
 }
 
 #[cfg(test)]
@@ -185,8 +187,13 @@ mod tests {
     fn test_theme_serialization() {
         let dark = Theme::Dark;
         let light = Theme::Light;
+        let high_contrast = Theme::HighContrast;
 
         assert_eq!(serde_json::to_string(&dark).unwrap(), "\"dark\"");
         assert_eq!(serde_json::to_string(&light).unwrap(), "\"light\"");
+        assert_eq!(
+            serde_json::to_string(&high_contrast).unwrap(),
+            "\"high-contrast\""
+        );
     }
 }
diff --git a/src/app.css b/src/app.css
index 2339269..d6ec46b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -61,6 +61,36 @@
   --hljs-meta: #64748b;
 }
 
+[data-theme="high-contrast"] {
+  --bg-primary: #000000;
+  --bg-secondary: #0a0a0a;
+  --bg-terminal: #000000;
+  --bg-hover: #1a1a1a;
+  --bg-code: #0a0a0a;
+  --accent-primary: #ff4d6d;
+  --accent-secondary: #ff85a1;
+  --text-primary: #ffffff;
+  --text-secondary: #e0e0e0;
+  --text-tertiary: #b0b0b0;
+  --border-color: #ffffff;
+
+  /* Terminal specific colors - bright and saturated */
+  --terminal-user: #00ffff;
+  --terminal-tool: #ff00ff;
+  --terminal-tool-name: #ffaaff;
+  --terminal-error: #ff5555;
+
+  /* Syntax highlighting colors (high contrast) */
+  --hljs-keyword: #ff66ff;
+  --hljs-string: #66ff66;
+  --hljs-number: #ffff00;
+  --hljs-comment: #aaaaaa;
+  --hljs-function: #ff99ff;
+  --hljs-type: #00ffff;
+  --hljs-variable: #ffaa00;
+  --hljs-meta: #cccccc;
+}
+
 html,
 body {
   margin: 0;
diff --git a/src/lib/components/ConfigSidebar.svelte b/src/lib/components/ConfigSidebar.svelte
index 22ce8c1..4d66b31 100644
--- a/src/lib/components/ConfigSidebar.svelte
+++ b/src/lib/components/ConfigSidebar.svelte
@@ -405,7 +405,7 @@
         <div class="flex gap-2">
           <button
             onclick={() => handleThemeChange("dark")}
-            class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'dark'
+            class="flex-1 px-3 py-2 rounded-lg border transition-colors {config.theme === 'dark'
               ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
               : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
           >
@@ -413,12 +413,22 @@
           </button>
           <button
             onclick={() => handleThemeChange("light")}
-            class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'light'
+            class="flex-1 px-3 py-2 rounded-lg border transition-colors {config.theme === 'light'
               ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
               : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
           >
             Light
           </button>
+          <button
+            onclick={() => handleThemeChange("high-contrast")}
+            class="flex-1 px-3 py-2 rounded-lg border transition-colors {config.theme ===
+            'high-contrast'
+              ? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
+              : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
+            title="High contrast mode for improved accessibility"
+          >
+            High Contrast
+          </button>
         </div>
       </div>
 
diff --git a/src/lib/stores/config.ts b/src/lib/stores/config.ts
index 1e5569a..86b069c 100644
--- a/src/lib/stores/config.ts
+++ b/src/lib/stores/config.ts
@@ -1,7 +1,7 @@
 import { writable, derived } from "svelte/store";
 import { invoke } from "@tauri-apps/api/core";
 
-export type Theme = "dark" | "light";
+export type Theme = "dark" | "light" | "high-contrast";
 
 export interface HikariConfig {
   model: string | null;