Add dark/light theme toggle via tray right-click menu

desktop/src-tauri/src/lib.rs

@@ -98,9 +98,10 @@ fn build_tray_tauri(app: &AppHandle) -> tauri::Result<()> {
     };
 
     let refresh = MenuItem::with_id(app, "refresh", "Refresh", true, None::<&str>)?;
+    let theme = MenuItem::with_id(app, "toggle_theme", "Toggle Dark/Light", true, None::<&str>)?;
     let report = MenuItem::with_id(app, "report", "Open Full Report", true, None::<&str>)?;
     let quit = MenuItem::with_id(app, "quit", "Quit CodeBurn", true, None::<&str>)?;
-    let menu = Menu::with_items(app, &[&refresh, &report, &quit])?;
+    let menu = Menu::with_items(app, &[&refresh, &theme, &report, &quit])?;
 
     tray.set_menu(Some(menu))?;
     tray.set_show_menu_on_left_click(false)?;
@@ -112,6 +113,11 @@ fn build_tray_tauri(app: &AppHandle) -> tauri::Result<()> {
                 let _ = window.emit("codeburn://refresh", ());
             }
         }
+        "toggle_theme" => {
+            if let Some(window) = app.get_webview_window("popover") {
+                let _ = window.emit("codeburn://toggle-theme", ());
+            }
+        }
         "report" => {
             let _ = cli::spawn_in_terminal(app, &["report"]);
         }

desktop/src/App.tsx

@@ -85,6 +85,20 @@ export function App() {
     return () => { unlisten.then(fn => fn()) }
   }, [refresh])
 
+  useEffect(() => {
+    const saved = localStorage.getItem('codeburn-theme')
+    if (saved) document.documentElement.setAttribute('data-theme', saved)
+
+    const unlisten = listen('codeburn://toggle-theme', () => {
+      const current = document.documentElement.getAttribute('data-theme')
+      const isDark = current === 'dark' || (!current && window.matchMedia('(prefers-color-scheme: dark)').matches)
+      const next = isDark ? 'light' : 'dark'
+      document.documentElement.setAttribute('data-theme', next)
+      localStorage.setItem('codeburn-theme', next)
+    })
+    return () => { unlisten.then(fn => fn()) }
+  }, [])
+
   const applyCurrency = async (code: string) => {
     try {
       const applied = await invoke<CurrencyState>('set_currency', { code })

desktop/src/styles.css

@@ -27,7 +27,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:not([data-theme="light"]) {
     --surface: #1C1816;
     --surface-elevated: #2A2320;
     --text-primary: #FAF7F3;
@@ -36,6 +36,14 @@
   }
 }
 
+:root[data-theme="dark"] {
+  --surface: #1C1816;
+  --surface-elevated: #2A2320;
+  --text-primary: #FAF7F3;
+  --text-secondary: #B5A49A;
+  --text-tertiary: #8A7A70;
+}
+
 * { box-sizing: border-box; }
 
 html, body, #root {