signal-works/ice
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Improve dark mode text contrast by using dedicated color variables

Browse source 
Problem: Text with opacity created gray-on-gray which was hard to read in dark mode.

Solution: Added dedicated color variables for text hierarchy:
- --text-color: Primary text (bright)
- --text-secondary: Secondary text (medium brightness)
- --text-tertiary: Tertiary text (dimmer but still readable)

Dark mode colors:
- Primary: #e0e0e0 (bright white-ish)
- Secondary: #b0b0b0 (medium gray)
- Tertiary: #909090 (dimmer gray)

Light mode colors:
- Primary: #333 (dark)
- Secondary: #666 (medium gray)
- Tertiary: #999 (light gray)

This provides much better contrast and readability in dark mode while maintaining the visual hierarchy.
This commit is contained in:
Deco Vander 2025-07-03 21:02:47 -04:00
parent 4bcbb9134d
commit f276c5e270
1 changed files with 14 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

26
public/style.css
View file

@ -2,6 +2,8 @@
:root { :root {
--bg-color: #f4f4f9; --bg-color: #f4f4f9;
--text-color: #333; --text-color: #333;
--text-secondary: #666;
--text-tertiary: #999;
--card-bg: white; --card-bg: white;
--border-color: #ddd; --border-color: #ddd;
--input-bg: white; --input-bg: white;
@ -22,6 +24,8 @@
[data-theme="dark"] { [data-theme="dark"] {
--bg-color: #1a1a1a; --bg-color: #1a1a1a;
--text-color: #e0e0e0; --text-color: #e0e0e0;
--text-secondary: #b0b0b0;
--text-tertiary: #909090;
--card-bg: #2d2d2d; --card-bg: #2d2d2d;
--border-color: #404040; --border-color: #404040;
--input-bg: #333; --input-bg: #333;
@ -43,6 +47,8 @@
:root[data-theme="auto"] { :root[data-theme="auto"] {
--bg-color: #1a1a1a; --bg-color: #1a1a1a;
--text-color: #e0e0e0; --text-color: #e0e0e0;
--text-secondary: #b0b0b0;
--text-tertiary: #909090;
--card-bg: #2d2d2d; --card-bg: #2d2d2d;
--border-color: #404040; --border-color: #404040;
--input-bg: #333; --input-bg: #333;
@ -64,6 +70,8 @@
:root[data-theme="auto"] { :root[data-theme="auto"] {
--bg-color: #f4f4f9; --bg-color: #f4f4f9;
--text-color: #333; --text-color: #333;
--text-secondary: #666;
--text-tertiary: #999;
--card-bg: white; --card-bg: white;
--border-color: #ddd; --border-color: #ddd;
--input-bg: white; --input-bg: white;
@ -177,8 +185,7 @@ input[type="text"], textarea {
} }
.input-help { .input-help {
color: var(--text-color); color: var(--text-tertiary);
opacity: 0.7;
font-size: 0.85em; font-size: 0.85em;
margin-top: 4px; margin-top: 4px;
display: block; display: block;
@ -268,8 +275,7 @@ footer {
.disclaimer { .disclaimer {
font-size: 0.8em; font-size: 0.8em;
color: var(--text-color); color: var(--text-tertiary);
opacity: 0.7;
} }
/* Reports header and toggle */ /* Reports header and toggle */
@ -365,8 +371,7 @@ footer {
} }
.table-info { .table-info {
color: var(--text-color); color: var(--text-tertiary);
opacity: 0.7;
font-size: 14px; font-size: 14px;
} }
@ -378,8 +383,7 @@ footer {
} }
.details-cell { .details-cell {
color: var(--text-color); color: var(--text-secondary);
opacity: 0.8;
font-style: italic; font-style: italic;
max-width: 200px; max-width: 200px;
overflow: hidden; overflow: hidden;
@ -389,8 +393,7 @@ footer {
.time-cell { .time-cell {
font-size: 12px; font-size: 12px;
color: var(--text-color); color: var(--text-tertiary);
opacity: 0.7;
} }
.remaining-cell { .remaining-cell {
@ -415,8 +418,7 @@ footer {
.loading { .loading {
text-align: center; text-align: center;
color: var(--text-color); color: var(--text-tertiary);
opacity: 0.7;
font-style: italic; font-style: italic;
} }