aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-25 18:44:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(theme): improve text contrast in dark color themes

Browse Source 
- Add text color definitions to all dark theme variants
- Ensure bright text (zinc-200) for readability on dark backgrounds
- Update --color-bg-subtle to be darker for better hierarchy
- Fixes low contrast issue where text was barely readable
This commit is contained in:
Gigi
2025-10-14 10:06:43 +02:00
parent 2a422fbeb9
commit 17480dddbf
1 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/styles/base/variables.css
View File

@@ -115,27 +115,36 @@
:root.dark-midnight {
--color-bg: #18181b; /* zinc-900 */
--color-bg-elevated: #27272a; /* zinc-800 */
--color-bg-subtle: #1e1e1e;
--color-bg-subtle: #0f0f11; /* darker than zinc-900 */
--color-border: #3f3f46; /* zinc-700 */
--color-border-subtle: #52525b; /* zinc-600 */
--color-text: #e4e4e7; /* zinc-200 */
--color-text-secondary: #a1a1aa; /* zinc-400 */
--color-text-muted: #71717a; /* zinc-500 */
}
/* Black - true black for OLED */
:root.dark-black {
--color-bg: #000000; /* true black */
--color-bg-elevated: #0a0a0a; /* very dark gray */
--color-bg-subtle: #050505;
--color-bg-subtle: #000000; /* true black for body */
--color-border: #1a1a1a;
--color-border-subtle: #2a2a2a;
--color-text: #e4e4e7; /* zinc-200 */
--color-text-secondary: #a1a1aa; /* zinc-400 */
--color-text-muted: #71717a; /* zinc-500 */
}
/* Charcoal - warmer, softer dark */
:root.dark-charcoal {
--color-bg: #1c1c1e; /* warmer dark */
--color-bg-elevated: #2c2c2e;
--color-bg-subtle: #242426;
--color-bg-subtle: #16161a; /* darker charcoal */
--color-border: #3a3a3c;
--color-border-subtle: #48484a;
--color-text: #e4e4e7; /* zinc-200 */
--color-text-secondary: #a1a1aa; /* zinc-400 */
--color-text-muted: #71717a; /* zinc-500 */
}
/* Light Color Theme Variants */
@@ -177,25 +186,34 @@
:root.theme-system.dark-midnight {
--color-bg: #18181b;
--color-bg-elevated: #27272a;
--color-bg-subtle: #1e1e1e;
--color-bg-subtle: #0f0f11;
--color-border: #3f3f46;
--color-border-subtle: #52525b;
--color-text: #e4e4e7;
--color-text-secondary: #a1a1aa;
--color-text-muted: #71717a;
}
:root.theme-system.dark-black {
--color-bg: #000000;
--color-bg-elevated: #0a0a0a;
--color-bg-subtle: #050505;
--color-bg-subtle: #000000;
--color-border: #1a1a1a;
--color-border-subtle: #2a2a2a;
--color-text: #e4e4e7;
--color-text-secondary: #a1a1aa;
--color-text-muted: #71717a;
}
:root.theme-system.dark-charcoal {
--color-bg: #1c1c1e;
--color-bg-elevated: #2c2c2e;
--color-bg-subtle: #242426;
--color-bg-subtle: #16161a;
--color-border: #3a3a3c;
--color-border-subtle: #48484a;
--color-text: #e4e4e7;
--color-text-secondary: #a1a1aa;
--color-text-muted: #71717a;
}
}