Skip to content

Commit 256fcb0

Browse files
kaickaic
authored
fix: improve dark theme contrast (#25)
1 parent 446ef5e commit 256fcb0

File tree

7 files changed

+33
-24
lines changed

7 files changed

+33
-24
lines changed

‎src/components/Common/Badge.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
const Badge = ({ color, textColor = 'white', children }) => {
55
return (
66
<span
7-
className="px-1 text-[10px] border border-black"
7+
className="inline-flex items-center px-1.5 py-0.5 text-[10px] leading-none border border-black"
88
style={{
99
backgroundColor: color,
1010
color: textColor,

‎src/components/Common/SoftwareIcon.jsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@ const SoftwareIcon = ({ iconName, color, size = 24 }) => {
55
const Icon = Icons[iconName] || Icons.FiPackage;
66

77
return (
8-
<Icon
9-
size={size}
10-
style={{ color: color || '#6B7280', flexShrink: 0 }}
11-
/>
8+
<span className="software-icon" style={{ display: 'inline-flex', flexShrink: 0 }}>
9+
<Icon
10+
size={size}
11+
style={{ color: color || '#6B7280' }}
12+
/>
13+
</span>
1214
);
1315
};
1416

‎src/components/ConfigurationSelector/ConfigOption.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const ConfigOption = memo(({ config }) => {
3838
<h4
3939
className="text-[11px] font-bold"
4040
style={{
41-
color: isSelected ? 'var(--win98-white)' : 'var(--win98-black)'
41+
color: isSelected ? 'var(--win95-text-inverse)' : 'var(--win98-black)'
4242
}}
4343
>
4444
{config.name}

‎src/components/ConfigurationSelector/ConfigSection.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const ConfigSection = ({ category, configs }) => {
2727
<div style={{ fontSize: '13px', fontWeight: 'bold', marginBottom: '3px', lineHeight: '1.2' }}>
2828
{category.name}
2929
</div>
30-
<div className="category-description" style={{ fontSize: '11px', fontWeight: 'normal', color: '#000', lineHeight: '1.3' }}>
30+
<div className="category-description" style={{ fontSize: '11px', fontWeight: 'normal', color: 'var(--win95-black)', lineHeight: '1.3' }}>
3131
{category.description}
3232
</div>
3333
</div>

‎src/components/SoftwareSelector/CategorySection.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const CategorySection = ({ category, software }) => {
2727
<div style={{ fontSize: '13px', fontWeight: 'bold', marginBottom: '3px', lineHeight: '1.2' }}>
2828
{category.name}
2929
</div>
30-
<div className="category-description" style={{ fontSize: '11px', fontWeight: 'normal', color: '#000', lineHeight: '1.3' }}>
30+
<div className="category-description" style={{ fontSize: '11px', fontWeight: 'normal', color: 'var(--win95-black)', lineHeight: '1.3' }}>
3131
{category.description}
3232
</div>
3333
</div>

‎src/components/SoftwareSelector/SoftwareCard.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const SoftwareCard = memo(({ software }) => {
4141
<div
4242
className="flex items-center gap-1.5 flex-wrap text-[11px] font-bold"
4343
style={{
44-
color: isSelected ? 'var(--win98-white)' : 'var(--win98-black)'
44+
color: isSelected ? 'var(--win95-text-inverse)' : 'var(--win98-black)'
4545
}}
4646
>
4747
<span>{software.name}</span>

‎src/index.css‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
--win95-medium-gray: #C0C0C0;
1313
--win95-dark-gray: #7A7A7A;
1414
--win95-black: #000000;
15+
--win95-text-inverse: #FFFFFF;
1516

1617
/* Accent Colors - Flat */
1718
--win95-blue: #000080;
@@ -74,7 +75,7 @@ body {
7475
.xp-title-bar {
7576
height: 20px;
7677
background-color: var(--win95-blue); /* FLAT COLOR - NO GRADIENT */
77-
color: var(--win95-white);
78+
color: var(--win95-text-inverse);
7879
font-weight: bold;
7980
font-size: var(--win95-font-size);
8081
padding: 2px 4px;
@@ -179,14 +180,14 @@ body {
179180
.win95-button:hover:not(:disabled),
180181
.xp-button:hover:not(:disabled) {
181182
background-color: var(--win95-dark-gray);
182-
color: var(--win95-white);
183+
color: var(--win95-text-inverse);
183184
border-color: var(--win95-black);
184185
}
185186

186187
.win95-button:active:not(:disabled),
187188
.xp-button:active:not(:disabled) {
188189
background-color: var(--win95-dark-gray);
189-
color: var(--win95-white);
190+
color: var(--win95-text-inverse);
190191
transform: translateY(1px); /* PRESSED OFFSET */
191192
}
192193

@@ -204,7 +205,7 @@ body {
204205
.win95-button-primary,
205206
.xp-button-primary {
206207
background-color: var(--win95-blue); /* FLAT BLUE */
207-
color: var(--win95-white);
208+
color: var(--win95-text-inverse);
208209
font-weight: bold;
209210
border-color: var(--win95-black);
210211
}
@@ -227,7 +228,7 @@ body {
227228
.win95-button-danger,
228229
.xp-button-danger {
229230
background-color: var(--win95-red); /* FLAT RED */
230-
color: var(--win95-white);
231+
color: var(--win95-text-inverse);
231232
font-weight: bold;
232233
border-color: var(--win95-black);
233234
}
@@ -340,7 +341,7 @@ body {
340341
.win95-selected,
341342
.xp-selected {
342343
background-color: var(--win95-blue); /* FLAT BLUE */
343-
color: var(--win95-white);
344+
color: var(--win95-text-inverse);
344345
border-color: var(--win95-black);
345346
}
346347

@@ -366,7 +367,7 @@ body {
366367
.win95-menu-item:hover,
367368
.xp-menu-item:hover {
368369
background-color: var(--win95-blue);
369-
color: var(--win95-white);
370+
color: var(--win95-text-inverse);
370371
}
371372

372373
/* ================================================== */
@@ -422,7 +423,7 @@ body {
422423
/* ================================================== */
423424

424425
.win95-text-black { color: var(--win95-black); }
425-
.win95-text-white { color: var(--win95-white); }
426+
.win95-text-white { color: var(--win95-text-inverse); }
426427
.win95-text-gray { color: var(--win95-dark-gray); }
427428
.win95-bg-window { background-color: var(--win95-light-gray); }
428429
.win95-bg-white { background-color: var(--win95-white); }
@@ -431,7 +432,7 @@ body {
431432

432433
/* Legacy XP utility classes - mapped to Win95 */
433434
.xp-text-black { color: var(--win95-black); }
434-
.xp-text-white { color: var(--win95-white); }
435+
.xp-text-white { color: var(--win95-text-inverse); }
435436
.xp-text-gray { color: var(--win95-dark-gray); }
436437
.xp-bg-window { background-color: var(--win95-light-gray); }
437438
.xp-bg-white { background-color: var(--win95-white); }
@@ -484,19 +485,19 @@ body {
484485

485486
.win98-button:hover:not(:disabled) {
486487
background-color: var(--win95-dark-gray);
487-
color: var(--win95-white);
488+
color: var(--win95-text-inverse);
488489
border-color: var(--win95-black);
489490
}
490491

491492
.win98-button:active:not(:disabled) {
492493
background-color: var(--win95-dark-gray);
493-
color: var(--win95-white);
494+
color: var(--win95-text-inverse);
494495
transform: translateY(1px);
495496
}
496497

497498
.win98-button-primary {
498499
background-color: var(--win95-blue);
499-
color: var(--win95-white);
500+
color: var(--win95-text-inverse);
500501
font-weight: bold;
501502
border-color: var(--win95-black);
502503
}
@@ -507,7 +508,7 @@ body {
507508

508509
.win98-button-danger {
509510
background-color: var(--win95-red);
510-
color: var(--win95-white);
511+
color: var(--win95-text-inverse);
511512
font-weight: bold;
512513
border-color: var(--win95-black);
513514
}
@@ -554,7 +555,7 @@ body {
554555

555556
.win98-selected {
556557
background-color: var(--win95-blue);
557-
color: var(--win95-white);
558+
color: var(--win95-text-inverse);
558559
border-color: var(--win95-black);
559560
}
560561

@@ -599,7 +600,7 @@ input:focus-visible {
599600
top: -40px;
600601
left: 0;
601602
background: var(--win95-blue);
602-
color: var(--win95-white);
603+
color: var(--win95-text-inverse);
603604
padding: 8px;
604605
text-decoration: none;
605606
z-index: 100;
@@ -620,6 +621,7 @@ input:focus-visible {
620621
--win95-medium-gray: #3d3d3d;
621622
--win95-dark-gray: #a0a0a0;
622623
--win95-black: #e0e0e0;
624+
--win95-text-inverse: #ffffff;
623625

624626
/* Accent Colors - Adjusted for dark mode contrast */
625627
--win95-blue: #4040c0;
@@ -639,6 +641,11 @@ input:focus-visible {
639641
--win98-white: #1a1a1a;
640642
}
641643

644+
/* Subtle icon outline for dark mode visibility */
645+
.dark .software-icon svg {
646+
filter: drop-shadow(0 0 0.75px rgba(255, 255, 255, 0.6));
647+
}
648+
642649
/* Dark mode body background */
643650
.dark body,
644651
body.dark {

0 commit comments

Comments
 (0)