From 86e90e52118dfea8ba654056d1dc4acca19c1773 Mon Sep 17 00:00:00 2001
From: Renat <renat1994renat@mail.ru>
Date: Thu, 19 Mar 2026 03:54:19 +0500
Subject: [PATCH] feat: refine dark theme experience

---
 package.json                       |   2 +-
 src-tauri/Cargo.lock               |   2 +-
 src/App.css                        | 386 ++++++++++++++++++++
 src/App.tsx                        | 550 ++++++++++++++++++-----------
 src/components/AccountCard.tsx     | 128 +++----
 src/components/AddAccountModal.tsx | 115 +++---
 src/components/UpdateChecker.tsx   |  78 ++--
 src/components/UsageBar.tsx        |  46 +--
 8 files changed, 923 insertions(+), 384 deletions(-)

diff --git a/package.json b/package.json
index f302c55..048c221 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "tauri": "sh ./scripts/tauri.sh"
+    "tauri": "tauri"
   },
   "dependencies": {
     "@tauri-apps/api": "^2.10.0",
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index f062a82..639debf 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -526,7 +526,7 @@ dependencies = [
 
 [[package]]
 name = "codex-switcher"
-version = "0.1.5"
+version = "0.1.6"
 dependencies = [
  "anyhow",
  "base64 0.22.1",
diff --git a/src/App.css b/src/App.css
index f1d8c73..fb84385 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1 +1,387 @@
 @import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+  --theme-bg: #f8fafc;
+  --theme-surface: #ffffff;
+  --theme-surface-elevated: #f3f6fa;
+  --theme-surface-hover: #e9eef5;
+
+  --theme-border-subtle: #d8e0ea;
+  --theme-border-strong: #b8c4d3;
+
+  --theme-text-primary: #11151b;
+  --theme-text-secondary: #526072;
+  --theme-text-muted: #708096;
+  --theme-text-on-light: #11151b;
+
+  --theme-primary-bg: #11151b;
+  --theme-primary-hover: #202735;
+  --theme-primary-text: #ffffff;
+
+  --theme-secondary-bg: #ffffff;
+  --theme-secondary-hover: #f1f5f9;
+  --theme-secondary-border: #d6dde8;
+  --theme-secondary-text: #2d3748;
+
+  --theme-warning-bg: #fff3df;
+  --theme-warning-hover: #fde8c3;
+  --theme-warning-border: #edcd90;
+  --theme-warning-text: #8b662f;
+
+  --theme-danger-bg: #fff0f1;
+  --theme-danger-hover: #f7dde1;
+  --theme-danger-border: #e8c3c9;
+  --theme-danger-text: #9d4c57;
+
+  --theme-success-bg: #edf5ef;
+  --theme-success-border: #cbdbcf;
+  --theme-success-text: #567560;
+
+  --theme-disabled-bg: #eef2f6;
+  --theme-disabled-border: #dde4ec;
+  --theme-disabled-text: #94a3b8;
+
+  --theme-track: #e1e7ef;
+  --theme-progress-good: #7a8f7d;
+  --theme-progress-warn: #b18d5f;
+  --theme-progress-danger: #b26d73;
+
+  --theme-selected-bg: #edf1f6;
+  --theme-selected-text: #11151b;
+  --theme-focus-ring: 0 0 0 3px rgba(17, 21, 27, 0.08);
+}
+
+html,
+body,
+#root {
+  min-height: 100%;
+}
+
+html {
+  color-scheme: light;
+}
+
+html.dark {
+  color-scheme: dark;
+  --theme-bg: #0c0f14;
+  --theme-surface: #151a22;
+  --theme-surface-elevated: #1b212b;
+  --theme-surface-hover: #222a36;
+
+  --theme-border-subtle: #2a3240;
+  --theme-border-strong: #394354;
+
+  --theme-text-primary: #e7ebf0;
+  --theme-text-secondary: #9aa3b2;
+  --theme-text-muted: #6f7b8c;
+  --theme-text-on-light: #11151b;
+
+  --theme-primary-bg: #d7dce3;
+  --theme-primary-hover: #e2e6ec;
+  --theme-primary-text: #11151b;
+
+  --theme-secondary-bg: #1a2029;
+  --theme-secondary-hover: #232b36;
+  --theme-secondary-border: #313b4a;
+  --theme-secondary-text: #d4dae3;
+
+  --theme-warning-bg: rgba(167, 125, 58, 0.16);
+  --theme-warning-hover: rgba(167, 125, 58, 0.24);
+  --theme-warning-border: rgba(167, 125, 58, 0.32);
+  --theme-warning-text: #d2ae72;
+
+  --theme-danger-bg: rgba(164, 85, 92, 0.16);
+  --theme-danger-hover: rgba(164, 85, 92, 0.24);
+  --theme-danger-border: rgba(164, 85, 92, 0.3);
+  --theme-danger-text: #e0a1a8;
+
+  --theme-success-bg: rgba(96, 124, 103, 0.16);
+  --theme-success-border: rgba(96, 124, 103, 0.3);
+  --theme-success-text: #a8c2ae;
+
+  --theme-disabled-bg: #161b23;
+  --theme-disabled-border: #222a35;
+  --theme-disabled-text: #566274;
+
+  --theme-track: #232c39;
+  --theme-progress-good: #7e9383;
+  --theme-progress-warn: #b99967;
+  --theme-progress-danger: #b56e74;
+
+  --theme-selected-bg: rgba(215, 220, 227, 0.08);
+  --theme-selected-text: #e7ebf0;
+  --theme-focus-ring: 0 0 0 3px rgba(215, 220, 227, 0.14);
+}
+
+body {
+  margin: 0;
+  background-color: var(--theme-bg);
+  color: var(--theme-text-primary);
+  font-family:
+    Inter,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+  transition:
+    background-color 180ms ease,
+    color 180ms ease;
+}
+
+html.dark body {
+  background-color: var(--theme-bg);
+  color: var(--theme-text-primary);
+}
+
+.theme-shell {
+  background-color: var(--theme-bg);
+  color: var(--theme-text-primary);
+}
+
+.theme-panel {
+  border: 1px solid var(--theme-border-subtle);
+  background-color: var(--theme-surface);
+}
+
+.theme-panel-elevated {
+  border: 1px solid var(--theme-border-subtle);
+  background-color: var(--theme-surface-elevated);
+}
+
+.theme-button-primary,
+.theme-button-secondary,
+.theme-button-warning,
+.theme-button-danger,
+.theme-menu-item,
+.theme-select-button,
+.theme-select-option,
+.theme-field {
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.theme-button-primary:focus-visible,
+.theme-button-secondary:focus-visible,
+.theme-button-warning:focus-visible,
+.theme-button-danger:focus-visible,
+.theme-menu-item:focus-visible,
+.theme-select-button:focus-visible,
+.theme-select-option:focus-visible,
+.theme-field:focus-visible {
+  outline: none;
+  box-shadow: var(--theme-focus-ring);
+}
+
+.theme-button-primary {
+  background-color: var(--theme-primary-bg);
+  color: var(--theme-primary-text);
+}
+
+.theme-button-primary:hover:not(:disabled) {
+  background-color: var(--theme-primary-hover);
+}
+
+.theme-button-secondary {
+  border: 1px solid var(--theme-secondary-border);
+  background-color: var(--theme-secondary-bg);
+  color: var(--theme-secondary-text);
+}
+
+.theme-button-secondary:hover:not(:disabled) {
+  border-color: var(--theme-border-strong);
+  background-color: var(--theme-secondary-hover);
+}
+
+.theme-button-warning {
+  border: 1px solid var(--theme-warning-border);
+  background-color: var(--theme-warning-bg);
+  color: var(--theme-warning-text);
+}
+
+.theme-button-warning:hover:not(:disabled) {
+  background-color: var(--theme-warning-hover);
+}
+
+.theme-button-danger {
+  border: 1px solid var(--theme-danger-border);
+  background-color: var(--theme-danger-bg);
+  color: var(--theme-danger-text);
+}
+
+.theme-button-danger:hover:not(:disabled) {
+  background-color: var(--theme-danger-hover);
+}
+
+.theme-button-primary:disabled,
+.theme-button-secondary:disabled,
+.theme-button-warning:disabled,
+.theme-button-danger:disabled {
+  cursor: not-allowed;
+  opacity: 0.68;
+}
+
+.theme-button-disabled {
+  border: 1px solid var(--theme-disabled-border);
+  background-color: var(--theme-disabled-bg);
+  color: var(--theme-disabled-text);
+}
+
+.theme-menu-item {
+  color: var(--theme-secondary-text);
+}
+
+.theme-menu-item:hover:not(:disabled) {
+  background-color: var(--theme-surface-hover);
+}
+
+.theme-status-chip {
+  border: 1px solid var(--theme-border-subtle);
+  background-color: var(--theme-surface-elevated);
+  color: var(--theme-text-secondary);
+}
+
+.theme-status-chip--warning {
+  border-color: var(--theme-warning-border);
+  background-color: var(--theme-warning-bg);
+  color: var(--theme-warning-text);
+}
+
+.theme-status-chip--success {
+  border-color: var(--theme-success-border);
+  background-color: var(--theme-success-bg);
+  color: var(--theme-success-text);
+}
+
+.theme-card {
+  border: 1px solid var(--theme-border-subtle);
+  background-color: var(--theme-surface);
+}
+
+.theme-card--active {
+  border-color: var(--theme-border-strong);
+  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
+}
+
+html.dark .theme-card--active {
+  background-image: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.03),
+    rgba(255, 255, 255, 0)
+  );
+  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
+}
+
+.theme-card--inactive:hover {
+  border-color: var(--theme-border-strong);
+}
+
+.theme-plan-badge {
+  border: 1px solid var(--theme-secondary-border);
+  background-color: var(--theme-surface-elevated);
+  color: var(--theme-secondary-text);
+}
+
+.theme-plan-badge--success {
+  border-color: var(--theme-success-border);
+  background-color: var(--theme-success-bg);
+  color: var(--theme-success-text);
+}
+
+.theme-plan-badge--warning {
+  border-color: var(--theme-warning-border);
+  background-color: var(--theme-warning-bg);
+  color: var(--theme-warning-text);
+}
+
+.theme-field {
+  border: 1px solid var(--theme-secondary-border);
+  background-color: var(--theme-surface-elevated);
+  color: var(--theme-text-primary);
+}
+
+.theme-field::placeholder {
+  color: var(--theme-text-muted);
+}
+
+.theme-field:focus-visible {
+  border-color: var(--theme-border-strong);
+}
+
+.theme-progress-track {
+  background-color: var(--theme-track);
+}
+
+.theme-progress-fill--good {
+  background-color: var(--theme-progress-good);
+}
+
+.theme-progress-fill--warn {
+  background-color: var(--theme-progress-warn);
+}
+
+.theme-progress-fill--danger {
+  background-color: var(--theme-progress-danger);
+}
+
+.theme-select-button {
+  border: 1px solid var(--theme-secondary-border);
+  background-color: var(--theme-secondary-bg);
+  color: var(--theme-secondary-text);
+}
+
+.theme-select-button:hover:not(:disabled) {
+  border-color: var(--theme-border-strong);
+  background-color: var(--theme-secondary-hover);
+}
+
+.theme-select-menu {
+  border: 1px solid var(--theme-border-subtle);
+  background-color: var(--theme-surface-elevated);
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
+}
+
+html.dark .theme-select-menu {
+  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
+}
+
+.theme-select-option {
+  color: var(--theme-secondary-text);
+}
+
+.theme-select-option:hover:not(:disabled) {
+  background-color: var(--theme-surface-hover);
+}
+
+.theme-select-option--active {
+  background-color: var(--theme-selected-bg);
+  color: var(--theme-selected-text);
+}
+
+.theme-scrim {
+  background-color: rgba(2, 6, 23, 0.55);
+}
+
+.theme-toast-success {
+  border: 1px solid var(--theme-success-border);
+  background-color: var(--theme-success-bg);
+  color: var(--theme-success-text);
+}
+
+.theme-toast-warning {
+  border: 1px solid var(--theme-warning-border);
+  background-color: var(--theme-warning-bg);
+  color: var(--theme-warning-text);
+}
+
+.theme-toast-danger {
+  border: 1px solid var(--theme-danger-border);
+  background-color: var(--theme-danger-bg);
+  color: var(--theme-danger-text);
+}
diff --git a/src/App.tsx b/src/App.tsx
index f0ffdaa..d8c4e5e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,49 @@ import { AccountCard, AddAccountModal, UpdateChecker } from "./components";
 import type { CodexProcessInfo } from "./types";
 import "./App.css";
 
+type Theme = "light" | "dark";
+type OtherAccountsSort =
+  | "deadline_asc"
+  | "deadline_desc"
+  | "remaining_desc"
+  | "remaining_asc";
+
+const THEME_STORAGE_KEY = "codex-switcher-theme";
+const OTHER_ACCOUNTS_SORT_OPTIONS: Array<{ value: OtherAccountsSort; label: string }> = [
+  { value: "deadline_asc", label: "Reset: earliest to latest" },
+  { value: "deadline_desc", label: "Reset: latest to earliest" },
+  { value: "remaining_desc", label: "% remaining: highest to lowest" },
+  { value: "remaining_asc", label: "% remaining: lowest to highest" },
+];
+
+const shellClass = "theme-shell min-h-screen transition-colors";
+const panelClass = "theme-panel";
+const softButtonClass =
+  "theme-button-secondary whitespace-nowrap rounded-lg px-4 py-2 text-sm font-medium disabled:opacity-50";
+const primaryButtonClass =
+  "theme-button-primary whitespace-nowrap rounded-lg px-4 py-2 text-sm font-medium disabled:opacity-50";
+const warningButtonClass =
+  "theme-button-warning whitespace-nowrap rounded-lg px-4 py-2 text-sm font-medium disabled:opacity-50";
+const menuItemClass =
+  "theme-menu-item w-full rounded-xl px-3 py-2 text-left text-sm disabled:opacity-50";
+
+function getInitialTheme(): Theme {
+  if (typeof window === "undefined") return "light";
+
+  try {
+    const savedTheme = window.localStorage.getItem(THEME_STORAGE_KEY);
+    if (savedTheme === "light" || savedTheme === "dark") {
+      return savedTheme;
+    }
+  } catch (error) {
+    console.error("Failed to read theme preference:", error);
+  }
+
+  return window.matchMedia?.("(prefers-color-scheme: dark)")?.matches
+    ? "dark"
+    : "light";
+}
+
 function App() {
   const {
     accounts,
@@ -30,6 +73,7 @@ function App() {
     saveMaskedAccountIds,
   } = useAccounts();
 
+  const [theme, setTheme] = useState<Theme>(() => getInitialTheme());
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
   const [isConfigModalOpen, setIsConfigModalOpen] = useState(false);
   const [configModalMode, setConfigModalMode] = useState<"slim_export" | "slim_import">(
@@ -54,20 +98,16 @@ function App() {
     isError: boolean;
   } | null>(null);
   const [maskedAccounts, setMaskedAccounts] = useState<Set<string>>(new Set());
-  const [otherAccountsSort, setOtherAccountsSort] = useState<
-    "deadline_asc" | "deadline_desc" | "remaining_desc" | "remaining_asc"
-  >("deadline_asc");
+  const [otherAccountsSort, setOtherAccountsSort] = useState<OtherAccountsSort>("deadline_asc");
   const [isActionsMenuOpen, setIsActionsMenuOpen] = useState(false);
+  const [isSortMenuOpen, setIsSortMenuOpen] = useState(false);
   const actionsMenuRef = useRef<HTMLDivElement | null>(null);
+  const sortMenuRef = useRef<HTMLDivElement | null>(null);
 
   const toggleMask = (accountId: string) => {
     setMaskedAccounts((prev) => {
       const next = new Set(prev);
-      if (next.has(accountId)) {
-        next.delete(accountId);
-      } else {
-        next.add(accountId);
-      }
+      next.has(accountId) ? next.delete(accountId) : next.add(accountId);
       void saveMaskedAccountIds(Array.from(next));
       return next;
     });
@@ -79,7 +119,9 @@ function App() {
   const toggleMaskAll = () => {
     setMaskedAccounts((prev) => {
       const shouldMaskAll = !accounts.every((account) => prev.has(account.id));
-      const next = shouldMaskAll ? new Set(accounts.map((account) => account.id)) : new Set<string>();
+      const next = shouldMaskAll
+        ? new Set(accounts.map((account) => account.id))
+        : new Set<string>();
       void saveMaskedAccountIds(Array.from(next));
       return next;
     });
@@ -89,47 +131,68 @@ function App() {
     try {
       const info = await invoke<CodexProcessInfo>("check_codex_processes");
       setProcessInfo(info);
+      return info;
     } catch (err) {
       console.error("Failed to check processes:", err);
+      return null;
     }
   }, []);
 
-  // Check processes on mount and periodically
   useEffect(() => {
-    checkProcesses();
-    const interval = setInterval(checkProcesses, 3000); // Check every 3 seconds
+    const root = document.documentElement;
+    root.classList.toggle("dark", theme === "dark");
+    try {
+      window.localStorage.setItem(THEME_STORAGE_KEY, theme);
+    } catch (error) {
+      console.error("Failed to save theme preference:", error);
+    }
+  }, [theme]);
+
+  useEffect(() => {
+    void checkProcesses();
+    const interval = setInterval(() => void checkProcesses(), 3000);
     return () => clearInterval(interval);
   }, [checkProcesses]);
 
-  // Load masked accounts from storage on mount
   useEffect(() => {
     loadMaskedAccountIds().then((ids) => {
-      if (ids.length > 0) {
-        setMaskedAccounts(new Set(ids));
-      }
+      if (ids.length > 0) setMaskedAccounts(new Set(ids));
     });
   }, [loadMaskedAccountIds]);
 
   useEffect(() => {
-    if (!isActionsMenuOpen) return;
+    if (!isActionsMenuOpen && !isSortMenuOpen) return;
 
     const handleClickOutside = (event: MouseEvent) => {
-      if (!actionsMenuRef.current) return;
-      if (!actionsMenuRef.current.contains(event.target as Node)) {
+      const target = event.target as Node;
+
+      if (actionsMenuRef.current && !actionsMenuRef.current.contains(target)) {
         setIsActionsMenuOpen(false);
       }
+
+      if (sortMenuRef.current && !sortMenuRef.current.contains(target)) {
+        setIsSortMenuOpen(false);
+      }
+    };
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsActionsMenuOpen(false);
+        setIsSortMenuOpen(false);
+      }
     };
 
     document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [isActionsMenuOpen]);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isActionsMenuOpen, isSortMenuOpen]);
 
   const handleSwitch = async (accountId: string) => {
-    // Check processes before switching
-    await checkProcesses();
-    if (processInfo && !processInfo.can_switch) {
-      return;
-    }
+    const info = await checkProcesses();
+    if (info && !info.can_switch) return;
 
     try {
       setSwitchingId(accountId);
@@ -243,8 +306,7 @@ function App() {
       showWarmupToast(`Slim text exported (${accounts.length} accounts).`);
     } catch (err) {
       console.error("Failed to export slim text:", err);
-      const message = err instanceof Error ? err.message : String(err);
-      setConfigModalError(message);
+      setConfigModalError(err instanceof Error ? err.message : String(err));
       showWarmupToast("Slim export failed", true);
     } finally {
       setIsExportingSlim(false);
@@ -276,8 +338,7 @@ function App() {
       );
     } catch (err) {
       console.error("Failed to import slim text:", err);
-      const message = err instanceof Error ? err.message : String(err);
-      setConfigModalError(message);
+      setConfigModalError(err instanceof Error ? err.message : String(err));
       showWarmupToast("Slim import failed", true);
     } finally {
       setIsImportingSlim(false);
@@ -290,16 +351,10 @@ function App() {
       const selected = await save({
         title: "Export Full Encrypted Account Config",
         defaultPath: "codex-switcher-full.cswf",
-        filters: [
-          {
-            name: "Codex Switcher Full Backup",
-            extensions: ["cswf"],
-          },
-        ],
+        filters: [{ name: "Codex Switcher Full Backup", extensions: ["cswf"] }],
       });
 
       if (!selected) return;
-
       await exportAccountsFullEncryptedFile(selected);
       showWarmupToast("Full encrypted file exported.");
     } catch (err) {
@@ -316,16 +371,10 @@ function App() {
       const selected = await open({
         multiple: false,
         title: "Import Full Encrypted Account Config",
-        filters: [
-          {
-            name: "Codex Switcher Full Backup",
-            extensions: ["cswf"],
-          },
-        ],
+        filters: [{ name: "Codex Switcher Full Backup", extensions: ["cswf"] }],
       });
 
       if (!selected || Array.isArray(selected)) return;
-
       const summary = await importAccountsFullEncryptedFile(selected);
       setMaskedAccounts(new Set());
       showWarmupToast(
@@ -339,29 +388,32 @@ function App() {
     }
   };
 
-  const activeAccount = accounts.find((a) => a.is_active);
-  const otherAccounts = accounts.filter((a) => !a.is_active);
+  const activeAccount = accounts.find((account) => account.is_active);
+  const otherAccounts = accounts.filter((account) => !account.is_active);
   const hasRunningProcesses = processInfo && processInfo.count > 0;
 
   const sortedOtherAccounts = useMemo(() => {
     const getResetDeadline = (resetAt: number | null | undefined) =>
       resetAt ?? Number.POSITIVE_INFINITY;
-
-    const getRemainingPercent = (usedPercent: number | null | undefined) => {
-      if (usedPercent === null || usedPercent === undefined) {
-        return Number.NEGATIVE_INFINITY;
-      }
-      return Math.max(0, 100 - usedPercent);
-    };
+    const getRemainingPercent = (usedPercent: number | null | undefined) =>
+      usedPercent === null || usedPercent === undefined
+        ? Number.NEGATIVE_INFINITY
+        : Math.max(0, 100 - usedPercent);
 
     return [...otherAccounts].sort((a, b) => {
-      if (otherAccountsSort === "deadline_asc" || otherAccountsSort === "deadline_desc") {
+      if (
+        otherAccountsSort === "deadline_asc" ||
+        otherAccountsSort === "deadline_desc"
+      ) {
         const deadlineDiff =
           getResetDeadline(a.usage?.primary_resets_at) -
           getResetDeadline(b.usage?.primary_resets_at);
         if (deadlineDiff !== 0) {
-          return otherAccountsSort === "deadline_asc" ? deadlineDiff : -deadlineDiff;
+          return otherAccountsSort === "deadline_asc"
+            ? deadlineDiff
+            : -deadlineDiff;
         }
+
         const remainingDiff =
           getRemainingPercent(b.usage?.primary_used_percent) -
           getRemainingPercent(a.usage?.primary_used_percent);
@@ -378,6 +430,7 @@ function App() {
       if (otherAccountsSort === "remaining_asc" && remainingDiff !== 0) {
         return -remainingDiff;
       }
+
       const deadlineDiff =
         getResetDeadline(a.usage?.primary_resets_at) -
         getResetDeadline(b.usage?.primary_resets_at);
@@ -386,32 +439,53 @@ function App() {
     });
   }, [otherAccounts, otherAccountsSort]);
 
+  const selectedSortLabel =
+    OTHER_ACCOUNTS_SORT_OPTIONS.find((option) => option.value === otherAccountsSort)?.label ??
+    OTHER_ACCOUNTS_SORT_OPTIONS[0].label;
+
   return (
-    <div className="min-h-screen bg-gray-50">
-      {/* Header */}
-      <header className="sticky top-0 z-40 bg-white border-b border-gray-200">
-        <div className="max-w-5xl mx-auto px-6 py-4">
+    <div className={shellClass}>
+      <header
+        className="sticky top-0 z-40 border-b backdrop-blur"
+        style={{
+          borderColor: "var(--theme-border-subtle)",
+          backgroundColor:
+            theme === "dark" ? "rgba(21, 26, 34, 0.9)" : "rgba(255, 255, 255, 0.9)",
+        }}
+      >
+        <div className="mx-auto max-w-5xl px-6 py-4">
           <div className="grid grid-cols-1 gap-3 md:grid-cols-[minmax(0,1fr)_max-content] md:items-center md:gap-4">
-            <div className="flex items-center gap-3 min-w-0 flex-1">
-              <div className="h-10 w-10 rounded-xl bg-gray-900 flex items-center justify-center text-white font-bold text-lg">
+            <div className="flex min-w-0 items-center gap-3">
+              <div
+                className="flex h-10 w-10 items-center justify-center rounded-xl text-lg font-bold"
+                style={{
+                  backgroundColor: "var(--theme-primary-bg)",
+                  color: "var(--theme-primary-text)",
+                }}
+              >
                 C
               </div>
               <div className="min-w-0">
-                <div className="flex items-center gap-2 flex-wrap">
-                  <h1 className="text-xl font-bold text-gray-900 tracking-tight">
+                <div className="flex flex-wrap items-center gap-2">
+                  <h1 className="text-xl font-bold tracking-tight text-slate-900 dark:text-[var(--theme-text-primary)]">
                     Codex Switcher
                   </h1>
                   {processInfo && (
                     <span
-                      className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs border ${hasRunningProcesses
-                          ? "bg-amber-50 text-amber-700 border-amber-200"
-                          : "bg-green-50 text-green-700 border-green-200"
-                        }`}
+                      className={`theme-status-chip inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-xs ${
+                        hasRunningProcesses
+                          ? "theme-status-chip--warning"
+                          : "theme-status-chip--success"
+                      }`}
                     >
                       <span
-                        className={`inline-block w-1.5 h-1.5 rounded-full ${hasRunningProcesses ? "bg-amber-500" : "bg-green-500"
-                          }`}
-                      ></span>
+                        className="h-1.5 w-1.5 rounded-full"
+                        style={{
+                          backgroundColor: hasRunningProcesses
+                            ? "var(--theme-warning-text)"
+                            : "var(--theme-success-text)",
+                        }}
+                      />
                       <span>
                         {hasRunningProcesses
                           ? `${processInfo.count} Codex running`
@@ -420,86 +494,123 @@ function App() {
                     </span>
                   )}
                 </div>
-                <p className="text-xs text-gray-500">
+                <p className="text-xs text-slate-500 dark:text-slate-400">
                   Multi-account manager for Codex CLI
                 </p>
               </div>
             </div>
 
-            <div className="flex flex-wrap items-center gap-2 shrink-0 md:ml-4 md:w-max md:flex-nowrap md:justify-end">
+            <div className="flex flex-wrap items-center gap-2 md:ml-4 md:w-max md:flex-nowrap md:justify-end">
               <button
                 onClick={toggleMaskAll}
-                className="h-10 px-4 py-2 text-sm font-medium rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-700 transition-colors shrink-0 whitespace-nowrap"
-                title={allMasked ? "Show all account names and emails" : "Hide all account names and emails"}
+                className={softButtonClass}
+                title={
+                  allMasked
+                    ? "Show all account names and emails"
+                    : "Hide all account names and emails"
+                }
               >
-                <span className="flex items-center gap-2">
-                  {allMasked ? (
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-                      />
-                    </svg>
-                  ) : (
-                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                    </svg>
-                  )}
-                  {allMasked ? "Show All" : "Hide All"}
-                </span>
+                {allMasked ? "Show All" : "Hide All"}
               </button>
               <button
                 onClick={handleRefresh}
                 disabled={isRefreshing}
-                className="h-10 px-4 py-2 text-sm font-medium rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-700 transition-colors disabled:opacity-50 shrink-0 whitespace-nowrap"
+                className={softButtonClass}
               >
-                {isRefreshing ? "↻ Refreshing..." : "↻ Refresh All"}
+                {isRefreshing ? "Refreshing..." : "Refresh All"}
               </button>
               <button
                 onClick={handleWarmupAll}
                 disabled={isWarmingAll || accounts.length === 0}
-                className="h-10 px-4 py-2 text-sm font-medium rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-700 transition-colors disabled:opacity-50 shrink-0 whitespace-nowrap"
+                className={warningButtonClass}
                 title="Send minimal traffic using all accounts"
               >
-                {isWarmingAll ? (
-                  <span className="flex items-center gap-2">
-                    <span className="animate-pulse">⚡</span> Warming...
-                  </span>
-                ) : (
-                  <span className="flex items-center gap-2">
-                    <span>⚡</span> Warm-up All
-                  </span>
-                )}
+                {isWarmingAll ? "Warming..." : "Warm-up All"}
               </button>
-
               <div className="relative" ref={actionsMenuRef}>
                 <button
-                  onClick={() => setIsActionsMenuOpen((prev) => !prev)}
-                  className="h-10 px-4 py-2 text-sm font-medium rounded-lg bg-gray-900 hover:bg-gray-800 text-white transition-colors shrink-0 whitespace-nowrap"
+                  onClick={() => {
+                    setIsSortMenuOpen(false);
+                    setIsActionsMenuOpen((prev) => !prev);
+                  }}
+                  className={primaryButtonClass}
                 >
-                  Account ▾
+                  Account
                 </button>
                 {isActionsMenuOpen && (
-                  <div className="absolute right-0 mt-2 w-56 rounded-xl border border-gray-200 bg-white shadow-xl p-2 z-50">
+                  <div
+                    className={`absolute right-0 z-50 mt-2 w-72 rounded-2xl p-2 ${panelClass}`}
+                    style={{ backgroundColor: "var(--theme-surface-elevated)" }}
+                  >
                     <button
                       onClick={() => {
                         setIsActionsMenuOpen(false);
                         setIsAddModalOpen(true);
                       }}
-                      className="w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-100 text-gray-700"
+                      className={menuItemClass}
                     >
                       + Add Account
                     </button>
+                    <div
+                      className="my-2 h-px"
+                      style={{ backgroundColor: "var(--theme-border-subtle)" }}
+                    />
+                    <button
+                      type="button"
+                      role="switch"
+                      aria-checked={theme === "dark"}
+                      onClick={() =>
+                        setTheme((current) => (current === "dark" ? "light" : "dark"))
+                      }
+                      className="theme-menu-item flex w-full items-center justify-between rounded-xl px-3 py-2 text-left"
+                    >
+                      <span>
+                        <span className="block text-sm font-medium text-slate-800 dark:text-[var(--theme-text-primary)]">
+                          Dark theme
+                        </span>
+                        <span className="block text-xs text-slate-500 dark:text-[var(--theme-text-secondary)]">
+                          Toggle the interface palette
+                        </span>
+                      </span>
+                      <span
+                        className="relative inline-flex h-6 w-11 items-center rounded-full border transition-colors"
+                        style={{
+                          backgroundColor:
+                            theme === "dark"
+                              ? "var(--theme-primary-bg)"
+                              : "var(--theme-secondary-border)",
+                          borderColor:
+                            theme === "dark"
+                              ? "var(--theme-primary-bg)"
+                              : "var(--theme-border-strong)",
+                        }}
+                      >
+                        <span
+                          className={`inline-block h-5 w-5 rounded-full shadow-sm transition-transform ${
+                            theme === "dark"
+                              ? "translate-x-5"
+                              : "translate-x-1"
+                          }`}
+                          style={{
+                            backgroundColor:
+                              theme === "dark"
+                                ? "var(--theme-text-on-light)"
+                                : "var(--theme-surface)",
+                          }}
+                        />
+                      </span>
+                    </button>
+                    <div
+                      className="my-2 h-px"
+                      style={{ backgroundColor: "var(--theme-border-subtle)" }}
+                    />
                     <button
                       onClick={() => {
                         setIsActionsMenuOpen(false);
                         void handleExportSlimText();
                       }}
                       disabled={isExportingSlim}
-                      className="w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-100 text-gray-700 disabled:opacity-50"
+                      className={menuItemClass}
                     >
                       {isExportingSlim ? "Exporting..." : "Export Slim Text"}
                     </button>
@@ -509,7 +620,7 @@ function App() {
                         openImportSlimTextModal();
                       }}
                       disabled={isImportingSlim}
-                      className="w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-100 text-gray-700 disabled:opacity-50"
+                      className={menuItemClass}
                     >
                       {isImportingSlim ? "Importing..." : "Import Slim Text"}
                     </button>
@@ -519,9 +630,11 @@ function App() {
                         void handleExportFullFile();
                       }}
                       disabled={isExportingFull}
-                      className="w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-100 text-gray-700 disabled:opacity-50"
+                      className={menuItemClass}
                     >
-                      {isExportingFull ? "Exporting..." : "Export Full Encrypted File"}
+                      {isExportingFull
+                        ? "Exporting..."
+                        : "Export Full Encrypted File"}
                     </button>
                     <button
                       onClick={() => {
@@ -529,9 +642,11 @@ function App() {
                         void handleImportFullFile();
                       }}
                       disabled={isImportingFull}
-                      className="w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-100 text-gray-700 disabled:opacity-50"
+                      className={menuItemClass}
                     >
-                      {isImportingFull ? "Importing..." : "Import Full Encrypted File"}
+                      {isImportingFull
+                        ? "Importing..."
+                        : "Import Full Encrypted File"}
                     </button>
                   </div>
                 )}
@@ -541,50 +656,51 @@ function App() {
         </div>
       </header>
 
-      {/* Main Content */}
-      <main className="max-w-5xl mx-auto px-6 py-8">
+      <main className="mx-auto max-w-5xl px-6 py-8">
         {loading && accounts.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-20">
-            <div className="animate-spin h-10 w-10 border-2 border-gray-900 border-t-transparent rounded-full mb-4"></div>
-            <p className="text-gray-500">Loading accounts...</p>
+            <div className="mb-4 h-10 w-10 animate-spin rounded-full border-2 border-slate-900 border-t-transparent dark:border-slate-100" />
+            <p className="text-slate-500 dark:text-slate-400">Loading accounts...</p>
           </div>
         ) : error ? (
-          <div className="text-center py-20">
-            <div className="text-red-600 mb-2">Failed to load accounts</div>
-            <p className="text-sm text-gray-500">{error}</p>
+          <div className="py-20 text-center">
+            <div className="mb-2 text-red-600 dark:text-red-400">
+              Failed to load accounts
+            </div>
+            <p className="text-sm text-slate-500 dark:text-slate-400">{error}</p>
           </div>
         ) : accounts.length === 0 ? (
-          <div className="text-center py-20">
-            <div className="h-16 w-16 rounded-2xl bg-gray-100 flex items-center justify-center mx-auto mb-4">
-              <span className="text-3xl">👤</span>
+          <div className="py-20 text-center">
+            <div
+              className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl text-2xl"
+              style={{
+                backgroundColor: "var(--theme-surface-elevated)",
+                color: "var(--theme-text-secondary)",
+              }}
+            >
+              A
             </div>
-            <h2 className="text-xl font-semibold text-gray-900 mb-2">
+            <h2 className="mb-2 text-xl font-semibold text-slate-900 dark:text-slate-50">
               No accounts yet
             </h2>
-            <p className="text-gray-500 mb-6">
+            <p className="mb-6 text-slate-500 dark:text-slate-400">
               Add your first Codex account to get started
             </p>
-            <button
-              onClick={() => setIsAddModalOpen(true)}
-              className="px-6 py-3 text-sm font-medium rounded-lg bg-gray-900 hover:bg-gray-800 text-white transition-colors"
-            >
+            <button onClick={() => setIsAddModalOpen(true)} className={primaryButtonClass}>
               Add Account
             </button>
           </div>
         ) : (
           <div className="space-y-8">
-            {/* Active Account */}
             {activeAccount && (
               <section>
-                <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider mb-4">
+                <h2 className="mb-4 text-sm font-medium uppercase tracking-wider text-slate-500 dark:text-slate-400">
                   Active Account
                 </h2>
                 <AccountCard
                   account={activeAccount}
-                  onSwitch={() => { }}
-                  onWarmup={() =>
-                    handleWarmupAccount(activeAccount.id, activeAccount.name)
-                  }
+                  onSwitch={() => {}}
+                  onWarmup={() => handleWarmupAccount(activeAccount.id, activeAccount.name)}
                   onDelete={() => handleDelete(activeAccount.id)}
                   onRefresh={() => refreshSingleUsage(activeAccount.id)}
                   onRename={(newName) => renameAccount(activeAccount.id, newName)}
@@ -596,45 +712,34 @@ function App() {
                 />
               </section>
             )}
-
-            {/* Other Accounts */}
             {otherAccounts.length > 0 && (
               <section>
-                <div className="flex items-center justify-between gap-3 mb-4">
-                  <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wider">
+                <div className="mb-4 flex items-center justify-between gap-3">
+                  <h2 className="text-sm font-medium uppercase tracking-wider text-slate-500 dark:text-slate-400">
                     Other Accounts ({otherAccounts.length})
                   </h2>
                   <div className="flex items-center gap-2">
-                    <label htmlFor="other-accounts-sort" className="text-xs text-gray-500">
+                    <label
+                      htmlFor="other-accounts-sort"
+                      className="text-xs text-slate-500 dark:text-slate-400"
+                    >
                       Sort
                     </label>
-                    <div className="relative">
-                      <select
+                    <div className="relative" ref={sortMenuRef}>
+                      <button
                         id="other-accounts-sort"
-                        value={otherAccountsSort}
-                        onChange={(e) =>
-                          setOtherAccountsSort(
-                            e.target.value as
-                              | "deadline_asc"
-                              | "deadline_desc"
-                              | "remaining_desc"
-                              | "remaining_asc"
-                          )
-                        }
-                        className="appearance-none font-sans text-xs sm:text-sm font-medium pl-3 pr-9 py-2 rounded-xl border border-gray-300 bg-gradient-to-b from-white to-gray-50 text-gray-700 shadow-sm hover:border-gray-400 hover:shadow focus:outline-none focus:ring-2 focus:ring-gray-300 focus:border-gray-400 transition-all"
+                        type="button"
+                        aria-haspopup="listbox"
+                        aria-expanded={isSortMenuOpen}
+                        onClick={() => {
+                          setIsActionsMenuOpen(false);
+                          setIsSortMenuOpen((prev) => !prev);
+                        }}
+                        className="theme-select-button flex min-w-[16rem] items-center justify-between rounded-xl px-3 py-2 text-left text-xs font-medium sm:text-sm"
                       >
-                        <option value="deadline_asc">Reset: earliest to latest</option>
-                        <option value="deadline_desc">Reset: latest to earliest</option>
-                        <option value="remaining_desc">
-                          % remaining: highest to lowest
-                        </option>
-                        <option value="remaining_asc">
-                          % remaining: lowest to highest
-                        </option>
-                      </select>
-                      <span className="pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500">
+                        <span>{selectedSortLabel}</span>
                         <svg
-                          className="h-4 w-4"
+                          className={`h-4 w-4 transition-transform ${isSortMenuOpen ? "rotate-180" : ""}`}
                           viewBox="0 0 20 20"
                           fill="none"
                           stroke="currentColor"
@@ -642,13 +747,54 @@ function App() {
                         >
                           <path d="M6 8l4 4 4-4" strokeLinecap="round" strokeLinejoin="round" />
                         </svg>
-                      </span>
-      <UpdateChecker />
-
-    </div>
+                      </button>
+                      {isSortMenuOpen && (
+                        <div
+                          role="listbox"
+                          aria-labelledby="other-accounts-sort"
+                          className="theme-select-menu absolute right-0 z-30 mt-2 w-72 rounded-2xl p-1"
+                        >
+                          {OTHER_ACCOUNTS_SORT_OPTIONS.map((option) => {
+                            const selected = option.value === otherAccountsSort;
+                            return (
+                              <button
+                                key={option.value}
+                                type="button"
+                                role="option"
+                                aria-selected={selected}
+                                onClick={() => {
+                                  setOtherAccountsSort(option.value);
+                                  setIsSortMenuOpen(false);
+                                }}
+                                className={`theme-select-option flex w-full items-center justify-between rounded-xl px-3 py-2 text-left text-sm ${
+                                  selected ? "theme-select-option--active" : ""
+                                }`}
+                              >
+                                <span>{option.label}</span>
+                                {selected && (
+                                  <svg
+                                    className="h-4 w-4"
+                                    viewBox="0 0 20 20"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    strokeWidth="2"
+                                  >
+                                    <path
+                                      d="M5 10.5l3 3 7-7"
+                                      strokeLinecap="round"
+                                      strokeLinejoin="round"
+                                    />
+                                  </svg>
+                                )}
+                              </button>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
                   </div>
                 </div>
-                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
                   {sortedOtherAccounts.map((account) => (
                     <AccountCard
                       key={account.id}
@@ -671,35 +817,28 @@ function App() {
           </div>
         )}
       </main>
-
-      {/* Refresh Success Toast */}
       {refreshSuccess && (
-        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 px-4 py-3 bg-green-600 text-white rounded-lg shadow-lg text-sm flex items-center gap-2">
-          <span>✓</span> Usage refreshed successfully
+        <div className="theme-toast-success fixed bottom-6 left-1/2 -translate-x-1/2 rounded-lg px-4 py-3 text-sm shadow-lg">
+          Usage refreshed successfully
         </div>
       )}
-
-      {/* Warm-up Toast */}
       {warmupToast && (
         <div
-          className={`fixed bottom-20 left-1/2 -translate-x-1/2 px-4 py-3 rounded-lg shadow-lg text-sm ${
+          className={`fixed bottom-20 left-1/2 -translate-x-1/2 rounded-lg px-4 py-3 text-sm shadow-lg ${
             warmupToast.isError
-              ? "bg-red-600 text-white"
-              : "bg-amber-100 text-amber-900 border border-amber-300"
+              ? "theme-toast-danger"
+              : "theme-toast-warning"
           }`}
         >
           {warmupToast.message}
         </div>
       )}
-
-      {/* Delete Confirmation Toast */}
       {deleteConfirmId && (
-        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 px-4 py-3 bg-red-600 text-white rounded-lg shadow-lg text-sm">
+        <div className="theme-toast-danger fixed bottom-6 left-1/2 -translate-x-1/2 rounded-lg px-4 py-3 text-sm shadow-lg">
           Click delete again to confirm removal
         </div>
       )}
 
-      {/* Add Account Modal */}
       <AddAccountModal
         isOpen={isAddModalOpen}
         onClose={() => setIsAddModalOpen(false)}
@@ -709,28 +848,33 @@ function App() {
         onCancelOAuth={cancelOAuthLogin}
       />
 
-      {/* Import/Export Config Modal */}
       {isConfigModalOpen && (
-        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
-          <div className="bg-white border border-gray-200 rounded-2xl w-full max-w-2xl mx-4 shadow-xl">
-            <div className="flex items-center justify-between p-5 border-b border-gray-100">
-              <h2 className="text-lg font-semibold text-gray-900">
+        <div className="theme-scrim fixed inset-0 z-50 flex items-center justify-center px-4">
+          <div
+            className={`w-full max-w-2xl rounded-2xl shadow-xl shadow-slate-900/15 dark:shadow-slate-950/60 ${panelClass}`}
+            style={{ backgroundColor: "var(--theme-surface)" }}
+          >
+            <div
+              className="flex items-center justify-between border-b p-5"
+              style={{ borderColor: "var(--theme-border-subtle)" }}
+            >
+              <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-50">
                 {configModalMode === "slim_export" ? "Export Slim Text" : "Import Slim Text"}
               </h2>
               <button
                 onClick={() => setIsConfigModalOpen(false)}
-                className="text-gray-400 hover:text-gray-600 transition-colors"
+                className="text-slate-400 transition-colors hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300"
               >
-                ✕
+                Close
               </button>
             </div>
-            <div className="p-5 space-y-4">
+            <div className="space-y-4 p-5">
               {configModalMode === "slim_import" ? (
-                <p className="text-sm text-amber-700 bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
+                <p className="theme-toast-warning rounded-lg px-3 py-2 text-sm">
                   Existing accounts are kept. Only missing accounts are imported.
                 </p>
               ) : (
-                <p className="text-sm text-gray-500">
+                <p className="text-sm text-slate-500 dark:text-slate-400">
                   This slim string contains account secrets. Keep it private.
                 </p>
               )}
@@ -745,18 +889,21 @@ function App() {
                       : "Export string will appear here"
                     : "Paste config string here"
                 }
-                className="w-full h-48 px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg text-sm text-gray-800 placeholder-gray-400 focus:outline-none focus:border-gray-400 focus:ring-1 focus:ring-gray-400 font-mono"
+                className="theme-field h-48 w-full rounded-lg px-4 py-3 font-mono text-sm"
               />
               {configModalError && (
-                <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm">
+                <div className="theme-toast-danger rounded-lg p-3 text-sm">
                   {configModalError}
                 </div>
               )}
             </div>
-            <div className="flex gap-3 p-5 border-t border-gray-100">
+            <div
+              className="flex gap-3 border-t p-5"
+              style={{ borderColor: "var(--theme-border-subtle)" }}
+            >
               <button
                 onClick={() => setIsConfigModalOpen(false)}
-                className="px-4 py-2.5 text-sm font-medium rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-700 transition-colors"
+                className={softButtonClass}
               >
                 Close
               </button>
@@ -773,7 +920,7 @@ function App() {
                     }
                   }}
                   disabled={!configPayload || isExportingSlim}
-                  className="px-4 py-2.5 text-sm font-medium rounded-lg bg-gray-900 hover:bg-gray-800 text-white transition-colors disabled:opacity-50"
+                  className={primaryButtonClass}
                 >
                   {configCopied ? "Copied" : "Copy String"}
                 </button>
@@ -781,7 +928,7 @@ function App() {
                 <button
                   onClick={handleImportSlimText}
                   disabled={isImportingSlim}
-                  className="px-4 py-2.5 text-sm font-medium rounded-lg bg-gray-900 hover:bg-gray-800 text-white transition-colors disabled:opacity-50"
+                  className={primaryButtonClass}
                 >
                   {isImportingSlim ? "Importing..." : "Import Missing Accounts"}
                 </button>
@@ -791,6 +938,7 @@ function App() {
         </div>
       )}
 
+      <UpdateChecker />
     </div>
   );
 }
diff --git a/src/components/AccountCard.tsx b/src/components/AccountCard.tsx
index 7e1483e..026eb7f 100644
--- a/src/components/AccountCard.tsx
+++ b/src/components/AccountCard.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, type KeyboardEvent, type ReactNode } from "react";
 import type { AccountWithUsage } from "../types";
 import { UsageBar } from "./UsageBar";
 
@@ -27,10 +27,16 @@ function formatLastRefresh(date: Date | null): string {
   return date.toLocaleDateString();
 }
 
-function BlurredText({ children, blur }: { children: React.ReactNode; blur: boolean }) {
+function BlurredText({
+  children,
+  blur,
+}: {
+  children: ReactNode;
+  blur: boolean;
+}) {
   return (
     <span
-      className={`transition-all duration-200 select-none ${blur ? "blur-sm" : ""}`}
+      className={`select-none transition-all duration-200 ${blur ? "blur-sm" : ""}`}
       style={blur ? { userSelect: "none" } : undefined}
     >
       {children}
@@ -90,9 +96,9 @@ export function AccountCard({
     setIsEditing(false);
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
+  const handleKeyDown = (e: KeyboardEvent) => {
     if (e.key === "Enter") {
-      handleRename();
+      void handleRename();
     } else if (e.key === "Escape") {
       setEditName(account.name);
       setIsEditing(false);
@@ -106,34 +112,38 @@ export function AccountCard({
       : "Unknown";
 
   const planColors: Record<string, string> = {
-    pro: "bg-indigo-50 text-indigo-700 border-indigo-200",
-    plus: "bg-emerald-50 text-emerald-700 border-emerald-200",
-    team: "bg-blue-50 text-blue-700 border-blue-200",
-    enterprise: "bg-amber-50 text-amber-700 border-amber-200",
-    free: "bg-gray-50 text-gray-600 border-gray-200",
-    api_key: "bg-orange-50 text-orange-700 border-orange-200",
+    pro: "theme-plan-badge",
+    plus: "theme-plan-badge theme-plan-badge--success",
+    team: "theme-plan-badge",
+    enterprise: "theme-plan-badge theme-plan-badge--warning",
+    free: "theme-plan-badge",
+    api_key: "theme-plan-badge theme-plan-badge--warning",
   };
 
   const planKey = account.plan_type?.toLowerCase() || "api_key";
   const planColorClass = planColors[planKey] || planColors.free;
 
-
   return (
     <div
-      className={`relative rounded-xl border p-5 transition-all duration-200 ${
+      className={`theme-card relative rounded-xl p-5 transition-all duration-200 ${
         account.is_active
-          ? "bg-white border-emerald-400 shadow-sm"
-          : "bg-white border-gray-200 hover:border-gray-300"
+          ? "theme-card--active"
+          : "theme-card--inactive"
       }`}
     >
-      {/* Header */}
-      <div className="flex items-start justify-between mb-3">
-        <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-2 mb-1">
+      <div className="mb-3 flex items-start justify-between">
+        <div className="min-w-0 flex-1">
+          <div className="mb-1 flex items-center gap-2">
             {account.is_active && (
               <span className="flex h-2 w-2">
-                <span className="animate-ping absolute inline-flex h-2 w-2 rounded-full bg-green-400 opacity-75"></span>
-                <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500"></span>
+                <span
+                  className="absolute inline-flex h-2 w-2 animate-ping rounded-full opacity-50"
+                  style={{ backgroundColor: "var(--theme-text-secondary)" }}
+                />
+                <span
+                  className="relative inline-flex h-2 w-2 rounded-full"
+                  style={{ backgroundColor: "var(--theme-primary-bg)" }}
+                />
               </span>
             )}
             {isEditing ? (
@@ -142,13 +152,13 @@ export function AccountCard({
                 type="text"
                 value={editName}
                 onChange={(e) => setEditName(e.target.value)}
-                onBlur={handleRename}
+                onBlur={() => void handleRename()}
                 onKeyDown={handleKeyDown}
-                className="font-semibold text-gray-900 bg-gray-100 px-2 py-0.5 rounded border border-gray-300 focus:outline-none focus:border-gray-500 w-full"
+                className="theme-field w-full rounded px-2 py-0.5 font-semibold"
               />
             ) : (
               <h3
-                className="font-semibold text-gray-900 truncate cursor-pointer hover:text-gray-600"
+                className="cursor-pointer truncate font-semibold text-gray-900 hover:text-gray-600 dark:text-slate-100 dark:hover:text-slate-300"
                 onClick={() => {
                   if (masked) return;
                   setEditName(account.name);
@@ -161,68 +171,76 @@ export function AccountCard({
             )}
           </div>
           {account.email && (
-            <p className="text-sm text-gray-500 truncate">
+            <p className="truncate text-sm text-gray-500 dark:text-slate-400">
               <BlurredText blur={masked}>{account.email}</BlurredText>
             </p>
           )}
         </div>
 
         <div className="flex items-center gap-2">
-          {/* Eye toggle */}
           {onToggleMask && (
             <button
               onClick={onToggleMask}
-              className="p-1 text-gray-400 hover:text-gray-600 transition-colors"
+              className="p-1 text-gray-400 transition-colors hover:text-gray-600 dark:text-slate-500 dark:hover:text-slate-300"
               title={masked ? "Show info" : "Hide info"}
             >
               {masked ? (
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+                <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
+                  />
                 </svg>
               ) : (
-                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                  />
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                  />
                 </svg>
               )}
             </button>
           )}
-          {/* Plan badge */}
-          <span
-            className={`px-2.5 py-1 text-xs font-medium rounded-full border ${planColorClass}`}
-          >
+          <span className={`rounded-full border px-2.5 py-1 text-xs font-medium ${planColorClass}`}>
             {planDisplay}
           </span>
         </div>
       </div>
 
-      {/* Usage */}
       <div className="mb-3">
         <UsageBar usage={account.usage} loading={isRefreshing || account.usageLoading} />
       </div>
 
-      {/* Last refresh time */}
-      <div className="text-xs text-gray-400 mb-3">
+      <div className="mb-3 text-xs text-gray-400 dark:text-slate-500">
         Last updated: {formatLastRefresh(lastRefresh)}
       </div>
 
-      {/* Actions */}
       <div className="flex gap-2">
         {account.is_active ? (
           <button
             disabled
-            className="flex-1 px-4 py-2 text-sm font-medium rounded-lg bg-gray-100 text-gray-500 border border-gray-200 cursor-default"
+            className="theme-button-disabled flex-1 cursor-default rounded-lg px-4 py-2 text-sm font-medium"
           >
-            ✓ Active
+            Active
           </button>
         ) : (
           <button
             onClick={onSwitch}
             disabled={switching || switchDisabled}
-            className={`flex-1 px-4 py-2 text-sm font-medium rounded-lg transition-colors disabled:opacity-50 ${
+            className={`flex-1 rounded-lg px-4 py-2 text-sm font-medium disabled:opacity-50 ${
               switchDisabled
-                ? "bg-gray-200 text-gray-400 cursor-not-allowed"
-                : "bg-gray-900 hover:bg-gray-800 text-white"
+                ? "theme-button-disabled"
+                : "theme-button-primary"
             }`}
             title={switchDisabled ? "Close all Codex processes first" : undefined}
           >
@@ -234,33 +252,25 @@ export function AccountCard({
             void onWarmup();
           }}
           disabled={warmingUp}
-          className={`px-3 py-2 text-sm rounded-lg transition-colors ${
-            warmingUp
-              ? "bg-amber-100 text-amber-500"
-              : "bg-amber-50 hover:bg-amber-100 text-amber-700"
-          }`}
+          className="theme-button-warning rounded-lg px-3 py-2 text-sm"
           title={warmingUp ? "Sending warm-up request..." : "Send minimal warm-up request"}
         >
-          ⚡
+          Warm
         </button>
         <button
           onClick={handleRefresh}
           disabled={isRefreshing}
-          className={`px-3 py-2 text-sm rounded-lg transition-colors ${
-            isRefreshing
-              ? "bg-gray-200 text-gray-400"
-              : "bg-gray-100 hover:bg-gray-200 text-gray-600"
-          }`}
+          className={`rounded-lg px-3 py-2 text-sm ${isRefreshing ? "theme-button-disabled" : "theme-button-secondary"}`}
           title="Refresh usage"
         >
-          <span className={isRefreshing ? "animate-spin inline-block" : ""}>↻</span>
+          <span className={isRefreshing ? "inline-block animate-spin" : ""}>Sync</span>
         </button>
         <button
           onClick={onDelete}
-          className="px-3 py-2 text-sm rounded-lg bg-red-50 hover:bg-red-100 text-red-600 transition-colors"
+          className="theme-button-danger rounded-lg px-3 py-2 text-sm"
           title="Remove account"
         >
-          ✕
+          Delete
         </button>
       </div>
     </div>
diff --git a/src/components/AddAccountModal.tsx b/src/components/AddAccountModal.tsx
index 72f30e2..8c0fbb6 100644
--- a/src/components/AddAccountModal.tsx
+++ b/src/components/AddAccountModal.tsx
@@ -27,8 +27,8 @@ export function AddAccountModal({
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [oauthPending, setOauthPending] = useState(false);
-  const [authUrl, setAuthUrl] = useState<string>("");
-  const [copied, setCopied] = useState<boolean>(false);
+  const [authUrl, setAuthUrl] = useState("");
+  const [copied, setCopied] = useState(false);
   const isPrimaryDisabled = loading || (activeTab === "oauth" && oauthPending);
 
   const resetForm = () => {
@@ -42,7 +42,7 @@ export function AddAccountModal({
 
   const handleClose = () => {
     if (oauthPending) {
-      onCancelOAuth();
+      void onCancelOAuth();
     }
     resetForm();
     onClose();
@@ -62,7 +62,6 @@ export function AddAccountModal({
       setOauthPending(true);
       setLoading(false);
 
-      // Wait for completion
       await onCompleteOAuth();
       handleClose();
     } catch (err) {
@@ -76,12 +75,7 @@ export function AddAccountModal({
     try {
       const selected = await open({
         multiple: false,
-        filters: [
-          {
-            name: "JSON",
-            extensions: ["json"],
-          },
-        ],
+        filters: [{ name: "JSON", extensions: ["json"] }],
         title: "Select auth.json file",
       });
 
@@ -117,21 +111,27 @@ export function AddAccountModal({
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
-      <div className="bg-white border border-gray-200 rounded-2xl w-full max-w-md mx-4 shadow-xl">
-        {/* Header */}
-        <div className="flex items-center justify-between p-5 border-b border-gray-100">
-          <h2 className="text-lg font-semibold text-gray-900">Add Account</h2>
+    <div className="theme-scrim fixed inset-0 z-50 flex items-center justify-center px-4">
+      <div
+        className="theme-panel w-full max-w-md rounded-2xl shadow-xl shadow-slate-900/15 dark:shadow-slate-950/60"
+        style={{ backgroundColor: "var(--theme-surface)" }}
+      >
+        <div
+          className="flex items-center justify-between border-b p-5"
+          style={{ borderColor: "var(--theme-border-subtle)" }}
+        >
+          <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-50">
+            Add Account
+          </h2>
           <button
             onClick={handleClose}
-            className="text-gray-400 hover:text-gray-600 transition-colors"
+            className="text-slate-400 transition-colors hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300"
           >
-            ✕
+            Close
           </button>
         </div>
 
-        {/* Tabs */}
-        <div className="flex border-b border-gray-100">
+        <div className="flex border-b" style={{ borderColor: "var(--theme-border-subtle)" }}>
           {(["oauth", "import"] as Tab[]).map((tab) => (
             <button
               key={tab}
@@ -146,21 +146,25 @@ export function AddAccountModal({
                 setActiveTab(tab);
                 setError(null);
               }}
-              className={`flex-1 px-4 py-3 text-sm font-medium transition-colors ${activeTab === tab
-                  ? "text-gray-900 border-b-2 border-gray-900 -mb-px"
-                  : "text-gray-400 hover:text-gray-600"
-                }`}
+              className={`flex-1 px-4 py-3 text-sm font-medium transition-colors ${
+                activeTab === tab
+                  ? "border-b-2 text-slate-900 dark:text-[var(--theme-text-primary)]"
+                  : "text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300"
+              }`}
+              style={
+                activeTab === tab
+                  ? { borderColor: "var(--theme-primary-bg)" }
+                  : undefined
+              }
             >
               {tab === "oauth" ? "ChatGPT Login" : "Import File"}
             </button>
           ))}
         </div>
 
-        {/* Content */}
-        <div className="p-5 space-y-4">
-          {/* Account Name (always shown) */}
+        <div className="space-y-4 p-5">
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-2">
+            <label className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
               Account Name
             </label>
             <input
@@ -168,44 +172,45 @@ export function AddAccountModal({
               value={name}
               onChange={(e) => setName(e.target.value)}
               placeholder="e.g., Work Account"
-              className="w-full px-4 py-2.5 bg-white border border-gray-200 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:border-gray-400 focus:ring-1 focus:ring-gray-400 transition-colors"
+              className="theme-field w-full rounded-lg px-4 py-2.5"
             />
           </div>
 
-          {/* Tab-specific content */}
           {activeTab === "oauth" && (
-            <div className="text-sm text-gray-500">
+            <div className="text-sm text-slate-500 dark:text-slate-400">
               {oauthPending ? (
-                <div className="text-center py-4">
-                  <div className="animate-spin h-8 w-8 border-2 border-gray-900 border-t-transparent rounded-full mx-auto mb-3"></div>
-                  <p className="text-gray-700 font-medium mb-2">Waiting for browser login...</p>
-                  <p className="text-xs text-gray-500 mb-4">
-                    Please open the following link in your browser to proceed:
+                <div className="py-4 text-center">
+                  <div className="mx-auto mb-3 h-8 w-8 animate-spin rounded-full border-2 border-slate-900 border-t-transparent dark:border-slate-100" />
+                  <p className="mb-2 font-medium text-slate-700 dark:text-slate-200">
+                    Waiting for browser login...
                   </p>
-                  <div className="flex items-center gap-2 mb-2 bg-gray-50 p-2 rounded-lg border border-gray-200">
+                  <p className="mb-4 text-xs text-slate-500 dark:text-slate-400">
+                    Open the following link in your browser to continue:
+                  </p>
+                  <div className="theme-panel-elevated mb-2 flex items-center gap-2 rounded-lg p-2">
                     <input
                       type="text"
                       readOnly
                       value={authUrl}
-                      className="flex-1 bg-transparent border-none text-xs text-gray-600 focus:outline-none focus:ring-0 truncate"
+                      className="flex-1 truncate bg-transparent text-xs text-slate-600 focus:outline-none dark:text-slate-300"
                     />
                     <button
                       onClick={() => {
-                        navigator.clipboard.writeText(authUrl);
+                        void navigator.clipboard.writeText(authUrl);
                         setCopied(true);
                         setTimeout(() => setCopied(false), 2000);
                       }}
-                      className={`px-3 py-1.5 border rounded text-xs font-medium transition-colors shrink-0 
-                        ${copied
-                          ? "bg-green-50 border-green-200 text-green-700"
-                          : "bg-white border-gray-200 text-gray-700 hover:bg-gray-50"
-                        }`}
+                      className={`shrink-0 rounded px-3 py-1.5 text-xs font-medium ${
+                        copied
+                          ? "theme-toast-success"
+                          : "theme-button-secondary"
+                      }`}
                     >
                       {copied ? "Copied!" : "Copy"}
                     </button>
                     <button
                       onClick={() => openUrl(authUrl)}
-                      className="px-3 py-1.5 bg-gray-900 border border-gray-900 rounded text-xs font-medium text-white hover:bg-gray-800 transition-colors shrink-0"
+                      className="theme-button-primary shrink-0 rounded px-3 py-1.5 text-xs font-medium"
                     >
                       Open
                     </button>
@@ -213,8 +218,8 @@ export function AddAccountModal({
                 </div>
               ) : (
                 <p>
-                  Click the button below to generate a login link.
-                  You will need to open it in your browser to authenticate.
+                  Click the button below to generate a login link. You will need to
+                  open it in your browser to authenticate.
                 </p>
               )}
             </div>
@@ -222,46 +227,44 @@ export function AddAccountModal({
 
           {activeTab === "import" && (
             <div>
-              <label className="block text-sm font-medium text-gray-700 mb-2">
+              <label className="mb-2 block text-sm font-medium text-slate-700 dark:text-slate-300">
                 Select auth.json file
               </label>
               <div className="flex gap-2">
-                <div className="flex-1 px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-lg text-sm text-gray-600 truncate">
+                <div className="theme-panel-elevated flex-1 truncate rounded-lg px-4 py-2.5 text-sm text-slate-600 dark:text-slate-300">
                   {filePath || "No file selected"}
                 </div>
                 <button
                   onClick={handleSelectFile}
-                  className="px-4 py-2.5 bg-gray-100 hover:bg-gray-200 border border-gray-200 rounded-lg text-sm font-medium text-gray-700 transition-colors whitespace-nowrap"
+                  className="theme-button-secondary whitespace-nowrap rounded-lg px-4 py-2.5 text-sm font-medium"
                 >
                   Browse...
                 </button>
               </div>
-              <p className="text-xs text-gray-400 mt-2">
+              <p className="mt-2 text-xs text-slate-400 dark:text-slate-500">
                 Import credentials from an existing Codex auth.json file
               </p>
             </div>
           )}
 
-          {/* Error */}
           {error && (
-            <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-red-600 text-sm">
+            <div className="theme-toast-danger rounded-lg p-3 text-sm">
               {error}
             </div>
           )}
         </div>
 
-        {/* Footer */}
-        <div className="flex gap-3 p-5 border-t border-gray-100">
+        <div className="flex gap-3 border-t p-5" style={{ borderColor: "var(--theme-border-subtle)" }}>
           <button
             onClick={handleClose}
-            className="flex-1 px-4 py-2.5 text-sm font-medium rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-700 transition-colors"
+            className="theme-button-secondary flex-1 rounded-lg px-4 py-2.5 text-sm font-medium"
           >
             Cancel
           </button>
           <button
             onClick={activeTab === "oauth" ? handleOAuthLogin : handleImportFile}
             disabled={isPrimaryDisabled}
-            className="flex-1 px-4 py-2.5 text-sm font-medium rounded-lg bg-gray-900 hover:bg-gray-800 text-white transition-colors disabled:opacity-50"
+            className="theme-button-primary flex-1 rounded-lg px-4 py-2.5 text-sm font-medium disabled:opacity-50"
           >
             {loading
               ? "Adding..."
diff --git a/src/components/UpdateChecker.tsx b/src/components/UpdateChecker.tsx
index 37f87dd..06b08a3 100644
--- a/src/components/UpdateChecker.tsx
+++ b/src/components/UpdateChecker.tsx
@@ -10,6 +10,11 @@ type UpdateStatus =
   | { kind: "ready" }
   | { kind: "error"; message: string };
 
+const mutedButtonClass =
+  "theme-button-secondary rounded-lg px-3 py-1.5 text-xs font-medium";
+const primaryButtonClass =
+  "theme-button-primary rounded-lg px-3 py-1.5 text-xs font-medium";
+
 export function UpdateChecker() {
   const [status, setStatus] = useState<UpdateStatus>({ kind: "idle" });
   const [dismissed, setDismissed] = useState(false);
@@ -19,11 +24,7 @@ export function UpdateChecker() {
       setStatus({ kind: "checking" });
       setDismissed(false);
       const update = await check();
-      if (update) {
-        setStatus({ kind: "available", update });
-      } else {
-        setStatus({ kind: "idle" });
-      }
+      setStatus(update ? { kind: "available", update } : { kind: "idle" });
     } catch (err) {
       console.error("Update check failed:", err);
       setStatus({ kind: "idle" });
@@ -31,18 +32,17 @@ export function UpdateChecker() {
   }, []);
 
   useEffect(() => {
-    checkForUpdate();
+    void checkForUpdate();
   }, [checkForUpdate]);
 
   const handleDownloadAndInstall = async () => {
     if (status.kind !== "available") return;
-    const { update } = status;
 
     try {
       let downloaded = 0;
       let total: number | null = null;
 
-      await update.downloadAndInstall((event) => {
+      await status.update.downloadAndInstall((event) => {
         switch (event.event) {
           case "Started":
             total = event.data.contentLength ?? null;
@@ -85,31 +85,28 @@ export function UpdateChecker() {
   };
 
   return (
-    <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 max-w-md w-full px-4">
-      <div className="bg-white border border-gray-200 rounded-xl shadow-xl p-4">
+    <div className="fixed bottom-6 left-1/2 z-50 w-full max-w-md -translate-x-1/2 px-4">
+      <div
+        className="theme-panel rounded-xl p-4 shadow-xl shadow-slate-200/50 dark:shadow-slate-950/60"
+        style={{ backgroundColor: "var(--theme-surface)" }}
+      >
         {status.kind === "available" && (
           <div className="flex items-start gap-3">
-            <div className="flex-1 min-w-0">
-              <p className="text-sm font-medium text-gray-900">
+            <div className="min-w-0 flex-1">
+              <p className="text-sm font-medium text-slate-900 dark:text-slate-50">
                 Update available: v{status.update.version}
               </p>
               {status.update.body && (
-                <p className="text-xs text-gray-500 mt-0.5 truncate">
+                <p className="mt-0.5 truncate text-xs text-slate-500 dark:text-slate-400">
                   {status.update.body}
                 </p>
               )}
             </div>
-            <div className="flex items-center gap-2 shrink-0">
-              <button
-                onClick={() => setDismissed(true)}
-                className="px-3 py-1.5 text-xs font-medium rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-600 transition-colors"
-              >
+            <div className="flex shrink-0 items-center gap-2">
+              <button onClick={() => setDismissed(true)} className={mutedButtonClass}>
                 Later
               </button>
-              <button
-                onClick={handleDownloadAndInstall}
-                className="px-3 py-1.5 text-xs font-medium rounded-lg bg-gray-900 hover:bg-gray-800 text-white transition-colors"
-              >
+              <button onClick={handleDownloadAndInstall} className={primaryButtonClass}>
                 Update
               </button>
             </div>
@@ -118,16 +115,18 @@ export function UpdateChecker() {
 
         {status.kind === "downloading" && (
           <div>
-            <div className="flex items-center justify-between mb-2">
-              <p className="text-sm font-medium text-gray-900">Downloading update...</p>
-              <p className="text-xs text-gray-500">
+            <div className="mb-2 flex items-center justify-between">
+              <p className="text-sm font-medium text-slate-900 dark:text-slate-50">
+                Downloading update...
+              </p>
+              <p className="text-xs text-slate-500 dark:text-slate-400">
                 {formatBytes(status.downloaded)}
                 {status.total ? ` / ${formatBytes(status.total)}` : ""}
               </p>
             </div>
-            <div className="w-full bg-gray-100 rounded-full h-1.5">
+            <div className="theme-progress-track h-1.5 w-full rounded-full">
               <div
-                className="bg-gray-900 h-1.5 rounded-full transition-all duration-300"
+                className="theme-button-primary h-1.5 rounded-full transition-all duration-300"
                 style={{
                   width:
                     status.total && status.total > 0
@@ -140,21 +139,15 @@ export function UpdateChecker() {
         )}
 
         {status.kind === "ready" && (
-          <div className="flex items-center justify-between">
-            <p className="text-sm font-medium text-gray-900">
+          <div className="flex items-center justify-between gap-3">
+            <p className="text-sm font-medium text-slate-900 dark:text-slate-50">
               Update ready. Restart to apply.
             </p>
-            <div className="flex items-center gap-2 shrink-0">
-              <button
-                onClick={() => setDismissed(true)}
-                className="px-3 py-1.5 text-xs font-medium rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-600 transition-colors"
-              >
+            <div className="flex shrink-0 items-center gap-2">
+              <button onClick={() => setDismissed(true)} className={mutedButtonClass}>
                 Later
               </button>
-              <button
-                onClick={handleRelaunch}
-                className="px-3 py-1.5 text-xs font-medium rounded-lg bg-gray-900 hover:bg-gray-800 text-white transition-colors"
-              >
+              <button onClick={handleRelaunch} className={primaryButtonClass}>
                 Restart
               </button>
             </div>
@@ -162,14 +155,11 @@ export function UpdateChecker() {
         )}
 
         {status.kind === "error" && (
-          <div className="flex items-center justify-between">
-            <p className="text-sm text-red-600">
+          <div className="flex items-center justify-between gap-3">
+            <p className="text-sm text-red-600 dark:text-red-300">
               Update failed: {status.message}
             </p>
-            <button
-              onClick={() => setDismissed(true)}
-              className="px-3 py-1.5 text-xs font-medium rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-600 transition-colors shrink-0 ml-2"
-            >
+            <button onClick={() => setDismissed(true)} className={mutedButtonClass}>
               Dismiss
             </button>
           </div>
diff --git a/src/components/UsageBar.tsx b/src/components/UsageBar.tsx
index ffb0329..bf4e8f0 100644
--- a/src/components/UsageBar.tsx
+++ b/src/components/UsageBar.tsx
@@ -47,16 +47,13 @@ function RateLimitBar({
   windowMinutes?: number | null;
   resetsAt?: number | null;
 }) {
-  // Calculate remaining percentage
   const remainingPercent = Math.max(0, 100 - usedPercent);
-  
-  // Color based on remaining (green = plenty left, red = almost none left)
   const colorClass =
     remainingPercent <= 10
-      ? "bg-red-500"
+      ? "theme-progress-fill--danger"
       : remainingPercent <= 30
-        ? "bg-amber-500"
-        : "bg-emerald-500";
+        ? "theme-progress-fill--warn"
+        : "theme-progress-fill--good";
 
   const windowLabel = formatWindowDuration(windowMinutes);
   const resetLabel = formatResetTime(resetsAt);
@@ -64,19 +61,21 @@ function RateLimitBar({
 
   return (
     <div className="space-y-1">
-      <div className="flex justify-between text-xs text-gray-500">
-        <span>{label} {windowLabel && `(${windowLabel})`}</span>
+      <div className="flex justify-between text-xs text-gray-500 dark:text-slate-400">
+        <span>
+          {label} {windowLabel && `(${windowLabel})`}
+        </span>
         <span>
           {remainingPercent.toFixed(0)}% left
-          {resetLabel && ` • resets ${resetLabel}`}
+          {resetLabel && ` - resets ${resetLabel}`}
           {resetLabel && exactResetLabel && ` (${exactResetLabel})`}
         </span>
       </div>
-      <div className="h-1.5 bg-gray-100 rounded-full overflow-hidden">
+      <div className="theme-progress-track h-1.5 overflow-hidden rounded-full">
         <div
           className={`h-full transition-all duration-300 ${colorClass}`}
           style={{ width: `${Math.min(remainingPercent, 100)}%` }}
-        ></div>
+        />
       </div>
     </div>
   );
@@ -86,14 +85,14 @@ export function UsageBar({ usage, loading }: UsageBarProps) {
   if (loading && !usage) {
     return (
       <div className="space-y-2">
-        <div className="text-xs text-gray-400 italic animate-pulse">
+        <div className="animate-pulse text-xs italic text-gray-400 dark:text-slate-500">
           Fetching usage...
         </div>
-        <div className="h-1.5 bg-gray-100 rounded-full overflow-hidden animate-pulse">
-          <div className="h-full w-2/3 bg-gray-200"></div>
+        <div className="theme-progress-track h-1.5 animate-pulse overflow-hidden rounded-full">
+          <div className="h-full w-2/3 theme-progress-fill--good opacity-50" />
         </div>
-        <div className="h-1.5 bg-gray-100 rounded-full overflow-hidden animate-pulse">
-          <div className="h-full w-1/2 bg-gray-200"></div>
+        <div className="theme-progress-track h-1.5 animate-pulse overflow-hidden rounded-full">
+          <div className="h-full w-1/2 theme-progress-fill--good opacity-40" />
         </div>
       </div>
     );
@@ -101,7 +100,7 @@ export function UsageBar({ usage, loading }: UsageBarProps) {
 
   if (!usage) {
     return (
-      <div className="text-xs text-gray-400 italic py-1 animate-pulse">
+      <div className="py-1 text-xs italic text-gray-400 dark:text-slate-500">
         Fetching usage...
       </div>
     );
@@ -109,18 +108,21 @@ export function UsageBar({ usage, loading }: UsageBarProps) {
 
   if (usage.error) {
     return (
-      <div className="text-xs text-gray-400 italic py-1">
+      <div className="py-1 text-xs italic text-gray-400 dark:text-slate-500">
         {usage.error}
       </div>
     );
   }
 
-  const hasPrimary = usage.primary_used_percent !== null && usage.primary_used_percent !== undefined;
-  const hasSecondary = usage.secondary_used_percent !== null && usage.secondary_used_percent !== undefined;
+  const hasPrimary =
+    usage.primary_used_percent !== null && usage.primary_used_percent !== undefined;
+  const hasSecondary =
+    usage.secondary_used_percent !== null &&
+    usage.secondary_used_percent !== undefined;
 
   if (!hasPrimary && !hasSecondary) {
     return (
-      <div className="text-xs text-gray-400 italic py-1">
+      <div className="py-1 text-xs italic text-gray-400 dark:text-slate-500">
         No rate limit data
       </div>
     );
@@ -145,7 +147,7 @@ export function UsageBar({ usage, loading }: UsageBarProps) {
         />
       )}
       {usage.credits_balance && (
-        <div className="text-xs text-gray-500">
+        <div className="text-xs text-gray-500 dark:text-slate-400">
           Credits: {usage.credits_balance}
         </div>
       )}