nhcarrigan/hikari-desktop
9
0
Fork 0
generated from nhcarrigan/template
Code Issues 9 Pull Requests 36 Actions Releases 22 Activity

fix: better text colours in light mode

Browse Source
This commit is contained in:
Naomi Carrigan
2026-01-21 14:38:13 -08:00
parent 7309f88a95
commit 6567493e57
6 changed files with 68 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/AboutPanel.svelte
+15 -13
View File
@@ -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>
src/lib/components/CloseTabConfirmModal.svelte
+2 -2
View File
@@ -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>
src/lib/components/ConfigSidebar.svelte
+26 -24
View File
@@ -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>
src/lib/components/HelpPanel.svelte
+7 -5
View File
@@ -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>
src/lib/components/KeyboardShortcutsModal.svelte
+10 -6
View File
@@ -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>
src/lib/components/PermissionModal.svelte
+8 -8
View File
@@ -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>