Skip to content

Commit f5b9b4c

Browse files
Copilot0xrinegade
Copilot
and
0xrinegade
committed
Fix onboarding popup light theme contrast - ensure dark text on light background
Co-authored-by: 0xrinegade <[email protected]>
1 parent 0867d8a commit f5b9b4c

File tree

2 files changed

+139
-0
lines changed

2 files changed

+139
-0
lines changed

‎src/styles/components.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -951,10 +951,49 @@
951951
--color-border-light: #222222;
952952
}
953953

954+
/* Light Theme Overrides - ensure proper contrast for onboarding modal */
955+
:root:not(.dark) {
956+
--color-foreground-bright: var(--ascii-neutral-900); /* #121416 - darkest text for titles */
957+
}
958+
954959
.dark .onboarding-overlay {
955960
background-color: rgba(0, 0, 0, 0.95);
956961
}
957962

963+
/* Light theme styles for onboarding modal - ensure proper contrast */
964+
:root:not(.dark) .onboarding-title {
965+
color: var(--ascii-neutral-900) !important; /* Darkest text for maximum contrast */
966+
}
967+
968+
:root:not(.dark) .onboarding-subtitle {
969+
color: var(--ascii-neutral-700) !important; /* Dark gray for subtitles */
970+
}
971+
972+
:root:not(.dark) .language-description,
973+
:root:not(.dark) .welcome-description,
974+
:root:not(.dark) .wallet-description,
975+
:root:not(.dark) .trading-description {
976+
color: var(--ascii-neutral-700) !important; /* Dark gray for descriptions */
977+
}
978+
979+
:root:not(.dark) .language-feature,
980+
:root:not(.dark) .wallet-feature,
981+
:root:not(.dark) .reward-benefit {
982+
color: var(--ascii-neutral-800) !important; /* Dark text for features */
983+
}
984+
985+
:root:not(.dark) .feature-item {
986+
color: var(--ascii-neutral-800) !important; /* Dark text for feature items */
987+
}
988+
989+
:root:not(.dark) .feature-item h4 {
990+
color: var(--ascii-neutral-900) !important; /* Darkest text for feature headings */
991+
}
992+
993+
:root:not(.dark) .feature-item p {
994+
color: var(--ascii-neutral-700) !important; /* Dark gray for feature descriptions */
995+
}
996+
958997
/* Explicit dark theme styles for onboarding modal text visibility */
959998
.dark .onboarding-modal {
960999
background: var(--color-background);

‎test-light-theme-onboarding.html‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Light Theme Onboarding Test</title>
7+
<link rel="stylesheet" href="src/styles/ascii-theme.css">
8+
<link rel="stylesheet" href="src/styles/components.css">
9+
<style>
10+
body {
11+
background: #f8f9fa;
12+
margin: 0;
13+
padding: 20px;
14+
font-family: 'Courier New', monospace;
15+
}
16+
17+
.theme-toggle {
18+
position: fixed;
19+
top: 20px;
20+
right: 20px;
21+
padding: 10px 20px;
22+
background: #333;
23+
color: white;
24+
border: none;
25+
cursor: pointer;
26+
border-radius: 4px;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
<button class="theme-toggle" onclick="toggleTheme()">Toggle Dark Theme</button>
32+
33+
<div class="onboarding-overlay visible">
34+
<div class="onboarding-modal visible">
35+
<!-- Header -->
36+
<div class="onboarding-header">
37+
<button class="onboarding-close" aria-label="Close onboarding">×</button>
38+
</div>
39+
40+
<!-- Progress -->
41+
<div class="onboarding-progress">
42+
<div class="progress-bar">
43+
<div class="progress-fill" style="width: 20%"></div>
44+
</div>
45+
<span class="progress-text">1 of 5</span>
46+
</div>
47+
48+
<!-- Content -->
49+
<div class="onboarding-content">
50+
<h1 class="onboarding-title">Select Your Language</h1>
51+
<p class="onboarding-subtitle">Choose your preferred language for the best experience</p>
52+
<div class="onboarding-body">
53+
<div class="onboarding-language">
54+
<div class="language-icon">LANG</div>
55+
<p class="language-description">
56+
Select your preferred language to customize your experience on OpenSVM P2P Exchange.
57+
This setting will be remembered for future visits.
58+
</p>
59+
<div class="language-features">
60+
<div class="language-feature">
61+
<span class="checkmark">✓</span>
62+
<span>Interface translated to your language</span>
63+
</div>
64+
<div class="language-feature">
65+
<span class="checkmark">✓</span>
66+
<span>Localized currency and date formats</span>
67+
</div>
68+
<div class="language-feature">
69+
<span class="checkmark">✓</span>
70+
<span>Automatically saved preference</span>
71+
</div>
72+
</div>
73+
</div>
74+
</div>
75+
</div>
76+
77+
<!-- Actions -->
78+
<div class="onboarding-actions">
79+
<div class="actions-left">
80+
<button class="btn-secondary">Back</button>
81+
</div>
82+
<div class="actions-right">
83+
<button class="btn-text">Skip</button>
84+
<button class="btn-primary">Next</button>
85+
</div>
86+
</div>
87+
</div>
88+
</div>
89+
90+
<script>
91+
function toggleTheme() {
92+
document.documentElement.classList.toggle('dark');
93+
const button = document.querySelector('.theme-toggle');
94+
button.textContent = document.documentElement.classList.contains('dark')
95+
? 'Toggle Light Theme'
96+
: 'Toggle Dark Theme';
97+
}
98+
</script>
99+
</body>
100+
</html>

0 commit comments

Comments
 (0)