Skip to content

Commit b5145c5

Browse files
Nikhita-14Nikhita-14
committed
feat(accessibility): Introduce high contrast mode for enhanced readability, navigation, and overall accessibility
1 parent 1c67b6e commit b5145c5

File tree

10 files changed

+1818
-870
lines changed

10 files changed

+1818
-870
lines changed

‎css/darkmode.css‎

Lines changed: 58 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,79 @@
11
/* Light Mode Defaults */
22
body {
3-
--bg: #e8e8e8;
4-
--fg: #666666;
5-
--overlay-bg: rgba(255, 255, 255, 0.75);
3+
--bg: #e8e8e8;
4+
--fg: #666666;
5+
--overlay-bg: rgba(255, 255, 255, 0.75);
66
}
77

88
/* Dark Mode Overrides */
99
body.dark {
10-
--bg: #1d1d20;
11-
--fg: #e8e8e8;
12-
--overlay-bg: rgba(15, 15, 16, 0.75);
10+
--bg: #1d1d20;
11+
--fg: #e8e8e8;
12+
--overlay-bg: rgba(15, 15, 16, 0.75);
1313

14-
background: var(--bg);
15-
color: var(--fg);
14+
background: var(--bg);
15+
color: var(--fg);
16+
}
17+
18+
/* High Contrast Mode Overrides */
19+
body.highcontrast {
20+
--bg: #000000;
21+
--fg: #ffffff;
22+
--overlay-bg: rgba(0, 0, 0, 0.9);
23+
24+
background: var(--bg);
25+
color: var(--fg);
26+
}
27+
28+
/* High contrast icon styles */
29+
.highcontrast .material-icons {
30+
color: #ffffff !important;
31+
text-shadow: none !important;
32+
font-size: 55px !important;
33+
}
34+
35+
/* High contrast hover box outlines */
36+
.highcontrast .tooltip,
37+
.highcontrast .hover-box {
38+
border: 2px solid #ffff00 !important;
39+
box-shadow: 0 0 10px #ffff00 !important;
40+
}
41+
42+
.highcontrast #helpBodyDiv {
43+
background: #000000;
44+
color: var(--fg);
45+
border: 1px solid #ffffff;
46+
}
47+
48+
.highcontrast #helpBodyDiv > .heading,
49+
.highcontrast #helpBodyDiv p {
50+
color: var(--fg);
51+
}
52+
53+
.highcontrast #floatingWindows .wfWinBody {
54+
background-color: var(--bg) !important;
55+
}
56+
57+
.highcontrast #floatingWindows .windowFrame {
58+
background-color: var(--bg) !important;
59+
border: 1px solid #ffffff;
1660
}
1761

1862
/* Help widget colors */
1963
.dark #helpBodyDiv {
20-
background: #505050;
21-
color: var(--fg);
22-
}
64+
background: #505050;
65+
color: var(--fg);
66+
}
2367

2468
.dark #helpBodyDiv > .heading,
2569
.dark #helpBodyDiv p {
26-
color: var(--fg);
70+
color: var(--fg);
2771
}
2872
/* Fix white side bars in Help / Tour widget */
2973
.dark #floatingWindows .wfWinBody {
30-
background-color: var(--bg) !important;
74+
background-color: var(--bg) !important;
3175
}
3276

3377
.dark #floatingWindows .windowFrame {
34-
background-color: var(--bg) !important;
78+
background-color: var(--bg) !important;
3579
}

‎css/themes.css‎

Lines changed: 155 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,7 @@
153153
}
154154

155155
.dark #newdropdown li:hover {
156-
background-color: transparent !important;
156+
background-color: transparent !important;
157157
}
158158

159159
.dark #confirmation-message {
@@ -176,18 +176,167 @@ body.dark {
176176
--accent: #3fe0d1;
177177
}
178178

179+
body.highcontrast {
180+
--border: #ffffff;
181+
--bg: #000000;
182+
--fg: #ffffff;
183+
--panel-bg: #000000;
184+
--accent: #00ffff;
185+
}
186+
187+
.highcontrast #canvas {
188+
background-color: #000000 !important;
189+
}
190+
191+
.highcontrast .blue {
192+
background-color: #000080 !important;
193+
}
194+
195+
.highcontrast .blue.darken-1 {
196+
background-color: #0000ff !important;
197+
}
198+
199+
.highcontrast #floatingWindows > .windowFrame {
200+
border: 2px solid var(--border);
201+
background-color: var(--bg);
202+
}
203+
204+
.highcontrast .wfbtItem {
205+
background-color: #00ffff;
206+
}
207+
208+
.highcontrast #floatingWindows > .windowFrame > .wfTopBar .wftTitle {
209+
color: #ffffff;
210+
}
211+
212+
.highcontrast #floatingWindows > .windowFrame > .wfWinBody .wfbWidget {
213+
color: #ffffff !important;
214+
background-color: #000000 !important;
215+
}
216+
217+
.highcontrast .popupMsg {
218+
background-color: #000000;
219+
color: #ffffff;
220+
}
221+
222+
.highcontrast #printText {
223+
border-color: #ffffff;
224+
}
225+
226+
.highcontrast #loading-image-container {
227+
background-color: var(--bg) !important;
228+
}
229+
230+
.highcontrast #loadingText {
231+
color: white !important;
232+
}
233+
234+
.highcontrast .language-link {
235+
color: #ffffff;
236+
}
237+
238+
.highcontrast #submitLilypond {
239+
background-color: #00ffff;
240+
color: #000000;
241+
}
242+
243+
.highcontrast #search,
244+
.highcontrast #helpfulSearch,
245+
.highcontrast .ui-autocomplete {
246+
background-color: #000000 !important;
247+
color: #ffffff !important;
248+
border: 1px solid #ffffff;
249+
}
250+
251+
.highcontrast .ui-autocomplete li:hover {
252+
background-color: #333333 !important;
253+
}
254+
255+
.highcontrast #helpfulSearchDiv {
256+
background-color: transparent !important;
257+
}
258+
259+
.highcontrast #crossButton {
260+
color: #ffffff;
261+
}
262+
263+
.highcontrast #chooseKeyDiv {
264+
background: #000000;
265+
color: #ffffff;
266+
}
267+
268+
.highcontrast #movable {
269+
background: #000000;
270+
color: #ffffff;
271+
}
272+
273+
.highcontrast .dropdown-content li > a {
274+
background-color: #000000;
275+
color: #00ffff;
276+
}
277+
278+
.highcontrast .dropdown-content li > a:hover {
279+
background-color: #333333;
280+
}
281+
282+
.highcontrast .dropdown-content {
283+
background-color: #000000;
284+
border: 1px solid #ffffff;
285+
}
286+
287+
.highcontrast .modalBox {
288+
background-color: #000000;
289+
}
290+
291+
.highcontrast .modal-message {
292+
color: #ffffff;
293+
background-color: #000000;
294+
}
295+
296+
.highcontrast #newdropdown {
297+
border: #ffffff;
298+
background-color: #000000;
299+
}
300+
301+
.highcontrast #newdropdown li {
302+
background-color: #000000;
303+
}
304+
305+
.highcontrast #newdropdown li:hover {
306+
background-color: transparent !important;
307+
}
308+
309+
.highcontrast #confirmation-message {
310+
color: #ffffff;
311+
}
312+
313+
.highcontrast .material-tooltip {
314+
background-color: #000000 !important;
315+
color: #ffffff !important;
316+
border: 1px solid #ffffff;
317+
}
318+
319+
.highcontrast .material-tooltip .backdrop {
320+
background-color: #000000 !important;
321+
}
322+
323+
.highcontrast #languagedropdown li a.selected-language {
324+
background-color: rgba(0, 255, 255, 0.25);
325+
border-left: 3px solid #00ffff;
326+
}
327+
179328
/* Your Custom Theme can go here if you don't want to modify the existing dark mode */
180329

181330
/* Selected language highlight in language dropdown */
182331
#languagedropdown li a.selected-language {
183-
background-color: rgba(33, 150, 243, 0.15);
184-
border-left: 3px solid #2196F3;
185-
font-weight: 600;
332+
background-color: rgba(33, 150, 243, 0.15);
333+
border-left: 3px solid #2196f3;
334+
font-weight: 600;
186335
}
187336

188337
.dark #languagedropdown li a.selected-language {
189-
background-color: rgba(33, 150, 243, 0.25);
190-
border-left: 3px solid #64B5F6;
338+
background-color: rgba(33, 150, 243, 0.25);
339+
border-left: 3px solid #64b5f6;
191340
}
192341

193342
/* Dark Mode Tooltip Styling - Slightly lighter background for better contrast */

0 commit comments

Comments
 (0)