From 6567493e57142f6b245faca389ebd7b1b550e7b5 Mon Sep 17 00:00:00 2001
From: Naomi Carrigan <commits@nhcarrigan.com>
Date: Wed, 21 Jan 2026 14:38:13 -0800
Subject: [PATCH] fix: better text colours in light mode

---
 src/lib/components/AboutPanel.svelte          | 28 ++++++-----
 .../components/CloseTabConfirmModal.svelte    |  4 +-
 src/lib/components/ConfigSidebar.svelte       | 50 ++++++++++---------
 src/lib/components/HelpPanel.svelte           | 12 +++--
 .../components/KeyboardShortcutsModal.svelte  | 16 +++---
 src/lib/components/PermissionModal.svelte     | 16 +++---
 6 files changed, 68 insertions(+), 58 deletions(-)

diff --git a/src/lib/components/AboutPanel.svelte b/src/lib/components/AboutPanel.svelte
index 4f240b6..7cec772 100644
--- a/src/lib/components/AboutPanel.svelte
+++ b/src/lib/components/AboutPanel.svelte
@@ -40,10 +40,12 @@
     tabindex="-1"
   >
     <div class="flex items-center justify-between mb-4">
-      <h2 id="about-title" class="text-xl font-semibold text-gray-100">About Hikari Desktop</h2>
+      <h2 id="about-title" class="text-xl font-semibold text-[var(--text-primary)]">
+        About Hikari Desktop
+      </h2>
       <button
         onclick={onClose}
-        class="p-1 text-gray-500 hover:text-gray-300 transition-colors"
+        class="p-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
         aria-label="Close"
       >
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -59,16 +61,16 @@
 
     <div class="space-y-4 text-sm">
       <div>
-        <h3 class="font-medium text-gray-200 mb-2">What is Hikari Desktop?</h3>
-        <p class="text-gray-400">
+        <h3 class="font-medium text-[var(--text-primary)] mb-2">What is Hikari Desktop?</h3>
+        <p class="text-[var(--text-secondary)]">
           Hikari Desktop is an AI-powered desktop assistant that brings Claude directly to your
           desktop. Built with love using Tauri, Svelte, and Rust for a fast, native experience.
         </p>
       </div>
 
       <div>
-        <h3 class="font-medium text-gray-200 mb-2">Version</h3>
-        <p class="text-gray-400 mb-1">
+        <h3 class="font-medium text-[var(--text-primary)] mb-2">Version</h3>
+        <p class="text-[var(--text-secondary)] mb-1">
           {appVersion || "Loading..."}
         </p>
         <button
@@ -80,7 +82,7 @@
       </div>
 
       <div>
-        <h3 class="font-medium text-gray-200 mb-2">Source Code</h3>
+        <h3 class="font-medium text-[var(--text-primary)] mb-2">Source Code</h3>
         <button
           onclick={() => openUrl(links.source)}
           class="text-[var(--accent-primary)] hover:text-[var(--accent-primary-hover)] transition-colors underline"
@@ -90,8 +92,8 @@
       </div>
 
       <div>
-        <h3 class="font-medium text-gray-200 mb-2">Support & Community</h3>
-        <p class="text-gray-400 mb-1">Found a bug or have a suggestion?</p>
+        <h3 class="font-medium text-[var(--text-primary)] mb-2">Support & Community</h3>
+        <p class="text-[var(--text-secondary)] mb-1">Found a bug or have a suggestion?</p>
         <button
           onclick={() => openUrl(links.discord)}
           class="text-[var(--accent-primary)] hover:text-[var(--accent-primary-hover)] transition-colors underline"
@@ -101,7 +103,7 @@
       </div>
 
       <div>
-        <h3 class="font-medium text-gray-200 mb-2">Built with 💕 by</h3>
+        <h3 class="font-medium text-[var(--text-primary)] mb-2">Built with 💕 by</h3>
         <button
           onclick={() => openUrl(links.website)}
           class="text-[var(--accent-primary)] hover:text-[var(--accent-primary-hover)] transition-colors underline"
@@ -111,8 +113,8 @@
       </div>
 
       <div>
-        <h3 class="font-medium text-gray-200 mb-2">License</h3>
-        <p class="text-gray-400 mb-1">
+        <h3 class="font-medium text-[var(--text-primary)] mb-2">License</h3>
+        <p class="text-[var(--text-secondary)] mb-1">
           This project is open source and available under our license terms.
         </p>
         <button
@@ -124,7 +126,7 @@
       </div>
 
       <div class="pt-4 mt-4 border-t border-[var(--border-color)]">
-        <p class="text-xs text-gray-500 text-center">
+        <p class="text-xs text-[var(--text-tertiary)] text-center">
           Copyright © {new Date().getFullYear()} Naomi Carrigan. All rights reserved.
         </p>
       </div>
diff --git a/src/lib/components/CloseTabConfirmModal.svelte b/src/lib/components/CloseTabConfirmModal.svelte
index 42b9bb8..84cc09c 100644
--- a/src/lib/components/CloseTabConfirmModal.svelte
+++ b/src/lib/components/CloseTabConfirmModal.svelte
@@ -60,10 +60,10 @@
             </svg>
           </div>
           <div class="flex-1">
-            <h3 id="confirm-title" class="text-lg font-semibold text-gray-100 mb-1">
+            <h3 id="confirm-title" class="text-lg font-semibold text-[var(--text-primary)] mb-1">
               Close Connected Tab?
             </h3>
-            <p id="confirm-message" class="text-sm text-gray-400">
+            <p id="confirm-message" class="text-sm text-[var(--text-secondary)]">
               The tab "{tabName}" is currently connected to Claude. Are you sure you want to close
               it? This will disconnect the session.
             </p>
diff --git a/src/lib/components/ConfigSidebar.svelte b/src/lib/components/ConfigSidebar.svelte
index a513c88..2ae9fc5 100644
--- a/src/lib/components/ConfigSidebar.svelte
+++ b/src/lib/components/ConfigSidebar.svelte
@@ -131,7 +131,7 @@
       <h2 class="text-lg font-semibold text-[var(--text-primary)]">Settings</h2>
       <button
         onclick={configStore.closeSidebar}
-        class="p-1 text-gray-400 hover:text-white transition-colors"
+        class="p-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
         aria-label="Close settings"
       >
         <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -159,7 +159,7 @@
 
       <!-- Model Selection -->
       <div class="mb-4">
-        <label for="model" class="block text-sm text-gray-400 mb-1">Model</label>
+        <label for="model" class="block text-sm text-[var(--text-secondary)] mb-1">Model</label>
         <select
           id="model"
           bind:value={config.model}
@@ -173,8 +173,8 @@
 
       <!-- API Key -->
       <div class="mb-4">
-        <label for="api-key" class="block text-sm text-gray-400 mb-1">
-          API Key <span class="text-gray-600">(optional override)</span>
+        <label for="api-key" class="block text-sm text-[var(--text-secondary)] mb-1">
+          API Key <span class="text-[var(--text-tertiary)]">(optional override)</span>
         </label>
         <div class="relative">
           <input
@@ -187,7 +187,7 @@
           <button
             type="button"
             onclick={() => (showApiKey = !showApiKey)}
-            class="absolute right-2 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300"
+            class="absolute right-2 top-1/2 -translate-y-1/2 text-[var(--text-tertiary)] hover:text-[var(--text-primary)]"
             aria-label={showApiKey ? "Hide API key" : "Show API key"}
           >
             {#if showApiKey}
@@ -221,7 +221,7 @@
 
       <!-- Custom Instructions -->
       <div class="mb-4">
-        <label for="instructions" class="block text-sm text-gray-400 mb-1"
+        <label for="instructions" class="block text-sm text-[var(--text-secondary)] mb-1"
           >Custom Instructions</label
         >
         <textarea
@@ -248,9 +248,9 @@
             bind:checked={config.greeting_enabled}
             class="w-4 h-4 rounded border-[var(--border-color)] bg-[var(--bg-primary)] text-[var(--accent-primary)] focus:ring-[var(--accent-primary)]"
           />
-          <span class="text-sm text-gray-300">Send greeting on connect</span>
+          <span class="text-sm text-[var(--text-primary)]">Send greeting on connect</span>
         </label>
-        <p class="text-xs text-gray-500 mt-1 ml-7">
+        <p class="text-xs text-[var(--text-tertiary)] mt-1 ml-7">
           Automatically greet you when a session starts with time-based messages
         </p>
       </div>
@@ -258,8 +258,8 @@
       <!-- Custom Greeting Prompt -->
       {#if config.greeting_enabled}
         <div class="mb-4">
-          <label for="greeting-prompt" class="block text-sm text-gray-400 mb-1">
-            Custom Greeting Prompt <span class="text-gray-600">(optional)</span>
+          <label for="greeting-prompt" class="block text-sm text-[var(--text-secondary)] mb-1">
+            Custom Greeting Prompt <span class="text-[var(--text-tertiary)]">(optional)</span>
           </label>
           <textarea
             id="greeting-prompt"
@@ -278,8 +278,8 @@
         MCP Servers
       </h3>
       <div class="mb-2">
-        <label for="mcp-config" class="block text-sm text-gray-400 mb-1">
-          Server Configuration <span class="text-gray-600">(JSON)</span>
+        <label for="mcp-config" class="block text-sm text-[var(--text-secondary)] mb-1">
+          Server Configuration <span class="text-[var(--text-tertiary)]">(JSON)</span>
         </label>
         <textarea
           id="mcp-config"
@@ -296,14 +296,14 @@
       <h3 class="text-sm font-medium text-[var(--accent-primary)] uppercase tracking-wider mb-3">
         Auto-Granted Tools
       </h3>
-      <p class="text-xs text-gray-500 mb-3">
+      <p class="text-xs text-[var(--text-tertiary)] mb-3">
         These tools will be pre-approved for every session (no permission prompts).
       </p>
 
       <!-- Common tools checkboxes -->
       <div class="grid grid-cols-2 gap-2 mb-3">
         {#each commonTools as tool (tool)}
-          <label class="flex items-center gap-2 text-sm text-gray-300 cursor-pointer">
+          <label class="flex items-center gap-2 text-sm text-[var(--text-primary)] cursor-pointer">
             <input
               type="checkbox"
               checked={config.auto_granted_tools.includes(tool)}
@@ -319,7 +319,7 @@
       {#if grantedTools.length > 0}
         <div class="mb-3">
           <div class="flex items-center justify-between mb-2">
-            <span class="text-xs text-gray-500">Session-granted tools:</span>
+            <span class="text-xs text-[var(--text-tertiary)]">Session-granted tools:</span>
             <button
               onclick={importFromSession}
               class="text-xs text-[var(--accent-primary)] hover:text-[var(--accent-secondary)] transition-colors"
@@ -342,7 +342,7 @@
       <!-- Custom tools list -->
       {#if config.auto_granted_tools.filter((t) => !commonTools.includes(t)).length > 0}
         <div class="mb-3">
-          <span class="text-xs text-gray-500 block mb-2">Custom tools:</span>
+          <span class="text-xs text-[var(--text-tertiary)] block mb-2">Custom tools:</span>
           <div class="flex flex-wrap gap-1">
             {#each config.auto_granted_tools.filter((t) => !commonTools.includes(t)) as tool (tool)}
               <span
@@ -351,7 +351,7 @@
                 {tool}
                 <button
                   onclick={() => removeTool(tool)}
-                  class="text-gray-500 hover:text-red-400"
+                  class="text-[var(--text-tertiary)] hover:text-red-400"
                   aria-label="Remove {tool}"
                 >
                   ×
@@ -391,7 +391,7 @@
           onclick={() => handleThemeChange("dark")}
           class="flex-1 px-4 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-gray-400 hover:border-[var(--accent-primary)]'}"
+            : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
         >
           Dark
         </button>
@@ -399,7 +399,7 @@
           onclick={() => handleThemeChange("light")}
           class="flex-1 px-4 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-gray-400 hover:border-[var(--accent-primary)]'}"
+            : 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
         >
           Light
         </button>
@@ -421,9 +421,11 @@
             onchange={(e) => handleAlwaysOnTopChange(e.currentTarget.checked)}
             class="w-4 h-4 text-[var(--accent-primary)] bg-[var(--bg-primary)] border-[var(--border-color)] rounded focus:ring-[var(--accent-primary)] focus:ring-2"
           />
-          <span class="text-sm text-gray-300">Always on top</span>
+          <span class="text-sm text-[var(--text-primary)]">Always on top</span>
         </label>
-        <p class="text-xs text-gray-500 mt-1 ml-7">Keep the window above other windows</p>
+        <p class="text-xs text-[var(--text-tertiary)] mt-1 ml-7">
+          Keep the window above other windows
+        </p>
       </div>
     </section>
 
@@ -441,13 +443,13 @@
             bind:checked={config.notifications_enabled}
             class="w-4 h-4 text-[var(--accent-primary)] bg-[var(--bg-primary)] border-[var(--border-color)] rounded focus:ring-[var(--accent-primary)] focus:ring-2"
           />
-          <span class="text-sm text-gray-300">Enable sound notifications</span>
+          <span class="text-sm text-[var(--text-primary)]">Enable sound notifications</span>
         </label>
       </div>
 
       <!-- Volume Control -->
       <div class="mb-4">
-        <label for="notification-volume" class="block text-sm text-gray-400 mb-2">
+        <label for="notification-volume" class="block text-sm text-[var(--text-secondary)] mb-2">
           Notification Volume
         </label>
         <div class="flex items-center gap-3">
@@ -467,7 +469,7 @@
         </div>
       </div>
 
-      <div class="text-xs text-gray-500">
+      <div class="text-xs text-[var(--text-tertiary)]">
         Sound notifications will play when I complete tasks, encounter errors, or need permissions.
       </div>
     </section>
diff --git a/src/lib/components/HelpPanel.svelte b/src/lib/components/HelpPanel.svelte
index 3ef2dae..4e8a418 100644
--- a/src/lib/components/HelpPanel.svelte
+++ b/src/lib/components/HelpPanel.svelte
@@ -65,10 +65,12 @@
     tabindex="-1"
   >
     <div class="flex items-center justify-between p-6 pb-4 border-b border-[var(--border-color)]">
-      <h2 id="help-title" class="text-xl font-semibold text-gray-100">How to Use Hikari Desktop</h2>
+      <h2 id="help-title" class="text-xl font-semibold text-[var(--text-primary)]">
+        How to Use Hikari Desktop
+      </h2>
       <button
         onclick={onClose}
-        class="p-1 text-gray-500 hover:text-gray-300 transition-colors"
+        class="p-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
         aria-label="Close"
       >
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -85,8 +87,8 @@
     <div class="overflow-y-auto flex-1 p-6 space-y-6">
       {#each sections as section (section.title)}
         <div>
-          <h3 class="font-medium text-gray-200 mb-3">{section.title}</h3>
-          <ul class="space-y-2 text-sm text-gray-400">
+          <h3 class="font-medium text-[var(--text-primary)] mb-3">{section.title}</h3>
+          <ul class="space-y-2 text-sm text-[var(--text-secondary)]">
             {#each section.items as item (item)}
               <li class="flex items-start">
                 <span class="text-[var(--accent-primary)] mr-2 mt-0.5">•</span>
@@ -98,7 +100,7 @@
       {/each}
 
       <div class="pt-4 border-t border-[var(--border-color)]">
-        <p class="text-sm text-gray-500">
+        <p class="text-sm text-[var(--text-tertiary)]">
           <strong>Need more help?</strong> Join our Discord community for support and updates!
         </p>
       </div>
diff --git a/src/lib/components/KeyboardShortcutsModal.svelte b/src/lib/components/KeyboardShortcutsModal.svelte
index 4517184..47e09d5 100644
--- a/src/lib/components/KeyboardShortcutsModal.svelte
+++ b/src/lib/components/KeyboardShortcutsModal.svelte
@@ -82,11 +82,13 @@
             />
           </svg>
         </div>
-        <h2 id="shortcuts-title" class="text-xl font-semibold text-gray-100">Keyboard Shortcuts</h2>
+        <h2 id="shortcuts-title" class="text-xl font-semibold text-[var(--text-primary)]">
+          Keyboard Shortcuts
+        </h2>
       </div>
       <button
         onclick={onClose}
-        class="p-1 text-gray-500 hover:text-gray-300 transition-colors"
+        class="p-1 text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors"
         aria-label="Close"
       >
         <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -103,7 +105,9 @@
     <div class="overflow-y-auto flex-1 p-6 space-y-6">
       {#each shortcuts as section (section.category)}
         <div>
-          <h3 class="text-sm font-medium text-gray-400 uppercase tracking-wider mb-3">
+          <h3
+            class="text-sm font-medium text-[var(--text-secondary)] uppercase tracking-wider mb-3"
+          >
             {section.category}
           </h3>
           <div class="space-y-2">
@@ -111,14 +115,14 @@
               <div
                 class="flex items-center justify-between py-2 px-3 bg-[var(--bg-secondary)] rounded-lg"
               >
-                <span class="text-sm text-gray-300">{item.description}</span>
+                <span class="text-sm text-[var(--text-primary)]">{item.description}</span>
                 <div class="flex items-center gap-1">
                   {#each item.keys as key, i (key)}
                     {#if i > 0}
-                      <span class="text-gray-600 text-xs">+</span>
+                      <span class="text-[var(--text-secondary)] text-xs">+</span>
                     {/if}
                     <kbd
-                      class="px-2 py-1 text-xs font-mono bg-[var(--bg-primary)] border border-[var(--border-color)] rounded text-gray-300 shadow-sm min-w-[24px] text-center"
+                      class="px-2 py-1 text-xs font-mono bg-[var(--bg-primary)] border border-[var(--border-color)] rounded text-[var(--text-primary)] shadow-sm min-w-[24px] text-center"
                     >
                       {key}
                     </kbd>
diff --git a/src/lib/components/PermissionModal.svelte b/src/lib/components/PermissionModal.svelte
index 2af9ced..61a27b5 100644
--- a/src/lib/components/PermissionModal.svelte
+++ b/src/lib/components/PermissionModal.svelte
@@ -137,8 +137,8 @@ Please continue where we left off and retry that action now that you have permis
           <span class="text-xl">🔐</span>
         </div>
         <div>
-          <h2 class="text-lg font-semibold text-white">Permission Blocked</h2>
-          <p class="text-sm text-gray-400">Hikari tried to use a restricted tool</p>
+          <h2 class="text-lg font-semibold text-[var(--text-primary)]">Permission Blocked</h2>
+          <p class="text-sm text-[var(--text-secondary)]">Hikari tried to use a restricted tool</p>
         </div>
       </div>
 
@@ -149,7 +149,7 @@ Please continue where we left off and retry that action now that you have permis
       </div>
 
       <div class="mb-4">
-        <div class="text-sm text-gray-400 mb-1">Tool</div>
+        <div class="text-sm text-[var(--text-secondary)] mb-1">Tool</div>
         <div
           class="px-3 py-2 bg-[var(--bg-secondary)] rounded-md text-[var(--accent-primary)] font-mono flex items-center justify-between"
         >
@@ -163,17 +163,17 @@ Please continue where we left off and retry that action now that you have permis
       </div>
 
       <div class="mb-4">
-        <div class="text-sm text-gray-400 mb-1">Description</div>
-        <div class="px-3 py-2 bg-[var(--bg-secondary)] rounded-md text-gray-300">
+        <div class="text-sm text-[var(--text-secondary)] mb-1">Description</div>
+        <div class="px-3 py-2 bg-[var(--bg-secondary)] rounded-md text-[var(--text-primary)]">
           {permission.description}
         </div>
       </div>
 
       {#if Object.keys(permission.input).length > 0}
         <div class="mb-6">
-          <div class="text-sm text-gray-400 mb-1">Details</div>
+          <div class="text-sm text-[var(--text-secondary)] mb-1">Details</div>
           <pre
-            class="px-3 py-2 bg-[var(--bg-terminal)] rounded-md text-gray-300 text-xs overflow-x-auto max-h-32">{formatInput(
+            class="px-3 py-2 bg-[var(--bg-terminal)] rounded-md text-[var(--text-primary)] text-xs overflow-x-auto max-h-32">{formatInput(
               permission.input
             )}</pre>
         </div>
@@ -182,7 +182,7 @@ Please continue where we left off and retry that action now that you have permis
       <div class="flex gap-3">
         <button
           onclick={handleDismiss}
-          class="flex-1 px-4 py-2 bg-gray-500/20 hover:bg-gray-500/30 text-gray-400 rounded-lg transition-colors font-medium"
+          class="flex-1 px-4 py-2 bg-gray-500/20 hover:bg-gray-500/30 text-[var(--text-secondary)] rounded-lg transition-colors font-medium"
         >
           Dismiss
         </button>