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

feat: add high contrast mode for accessibility

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

Closes #20
This commit is contained in:
Hikari
2026-01-25 13:44:52 -08:00
committed by Naomi Carrigan
parent 457722dc3a
commit b1a45ed00e
4 changed files with 50 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/ConfigSidebar.svelte
+12 -2
View File
@@ -405,7 +405,7 @@
<div class="flex gap-2">
<button
onclick={() => handleThemeChange("dark")}
class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'dark'
class="flex-1 px-3 py-2 rounded-lg border transition-colors {config.theme === 'dark'
? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
: 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
>
@@ -413,12 +413,22 @@
</button>
<button
onclick={() => handleThemeChange("light")}
class="flex-1 px-4 py-2 rounded-lg border transition-colors {config.theme === 'light'
class="flex-1 px-3 py-2 rounded-lg border transition-colors {config.theme === 'light'
? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
: 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
>
Light
</button>
<button
onclick={() => handleThemeChange("high-contrast")}
class="flex-1 px-3 py-2 rounded-lg border transition-colors {config.theme ===
'high-contrast'
? 'bg-[var(--accent-primary)] border-[var(--accent-primary)] text-white'
: 'bg-[var(--bg-primary)] border-[var(--border-color)] text-[var(--text-secondary)] hover:border-[var(--accent-primary)]'}"
title="High contrast mode for improved accessibility"
>
High Contrast
</button>
</div>
</div>