Skip to content

Commit 7f1e7f7

Browse files
Nikhita-14github-actions[bot]
Nikhita-14
and
github-actions[bot]
authored
feat(accessibility): Introduce high contrast mode theme for enhanced readability, navigation and overall accessibility (#5507)
* chore(i18n): auto-update JSON files from updated PO files * feat(accessibility): Introduce high contrast mode for enhanced readability, navigation, and overall accessibility * Delete locales/bn.json modified by bot * Restore locale files to match upstream master so they do not appear in PR * fix(accessibility): adjust high-contrast hover, remove icon size override and scrollbar * Improve contrast switch and search widget styling * Fix high contrast theme styling * Fix theme toggle delay by updating applyThemeInstantly method to immediately update palette theme. * resolved merge conflicts and fixed block text consistency * Desaturate colors in accordance with WCAG standards for high contrast * Fix platform piemenu styles * Fix ESLint errors * Fix eslint errors in js/activity.js * Trigger CI after Prettier check * style: apply prettier --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent 455df55 commit 7f1e7f7

13 files changed

Lines changed: 3395 additions & 2255 deletions

File tree

‎css/activities.css‎

Lines changed: 1253 additions & 1246 deletions
Large diffs are not rendered by default.

‎css/darkmode.css‎

Lines changed: 68 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,106 @@
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+
}
33+
34+
/* High contrast hover box outlines */
35+
.highcontrast .tooltip,
36+
.highcontrast .hover-box {
37+
border: 2px solid #ffff00 !important;
38+
box-shadow: 0 0 10px #ffff00 !important;
39+
}
40+
41+
.highcontrast #helpBodyDiv {
42+
background: #000000;
43+
color: var(--fg);
44+
border: 1px solid #ffffff;
45+
}
46+
47+
.highcontrast #helpBodyDiv > .heading,
48+
.highcontrast #helpBodyDiv p {
49+
color: var(--fg);
50+
}
51+
52+
.highcontrast #floatingWindows .wfWinBody {
53+
background-color: var(--bg) !important;
54+
}
55+
56+
.highcontrast #floatingWindows .windowFrame {
57+
background-color: var(--bg) !important;
58+
border: 1px solid #ffffff;
1659
}
1760

1861
/* Help widget colors */
1962
.dark #helpBodyDiv {
20-
background: #505050;
21-
color: var(--fg);
22-
}
63+
background: #505050;
64+
color: var(--fg);
65+
}
2366

24-
.dark #helpBodyDiv>.heading,
67+
.dark #helpBodyDiv > .heading,
2568
.dark #helpBodyDiv p {
26-
color: var(--fg);
69+
color: var(--fg);
2770
}
2871

2972
/* Fix white side bars in Help / Tour widget */
3073
.dark #floatingWindows .wfWinBody {
31-
background-color: var(--bg) !important;
74+
background-color: var(--bg) !important;
3275
}
3376

3477
.dark #floatingWindows .windowFrame {
35-
background-color: var(--bg) !important;
78+
background-color: var(--bg) !important;
3679
}
3780

38-
3981
/* Trash view colors for dark mode */
4082
.dark .trash-view {
41-
background-color: #2d2d2d;
42-
color: #e8e8e8;
43-
border: 2px solid #4a9eff;
83+
background-color: #2d2d2d;
84+
color: #e8e8e8;
85+
border: 2px solid #4a9eff;
4486
}
4587

4688
.dark .button-container {
47-
background: #022363;
48-
border-bottom: 1px solid #444444;
89+
background: #022363;
90+
border-bottom: 1px solid #444444;
4991
}
5092

5193
.dark .trash-item.hover {
52-
background-color: #444444;
94+
background-color: #444444;
5395
}
5496

5597
.dark .trash-item.selected {
56-
background-color: #555555;
98+
background-color: #555555;
5799
}
58100

59101
/* Improve block icon visibility in dark mode */
60102
.dark .trash-item-icon {
61-
background-color: rgba(255, 255, 255, 0.855);
62-
border-radius: 3px;
63-
padding: 2px;
103+
background-color: rgba(255, 255, 255, 0.855);
104+
border-radius: 3px;
105+
padding: 2px;
64106
}
65-
66-
/* Window table colors for dark mode */
67-
.dark .windowFrame td {
68-
background-color: #022363 !important;
69-
color: #eeeeee !important;
70-
}
71-
72-
.dark .windowFrame td.headcol {
73-
background-color: #363636 !important;
74-
color: #ffffff !important;
75-
}
76-
77-
/* Ensure bold text in cells is also light colored */
78-
.dark .windowFrame td b {
79-
color: #ffffff !important;
80-
}

‎css/themes.css‎

Lines changed: 179 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,36 @@
3131
background-color: transparent !important;
3232
}
3333

34+
/* High Contrast Mode Theme Dropdown - Override ALL styles */
35+
.highcontrast #themedropdown {
36+
background-color: #000000 !important;
37+
border: 1px solid #ffffff !important;
38+
}
39+
40+
.highcontrast #themedropdown li {
41+
background-color: transparent !important;
42+
}
43+
44+
.highcontrast #themedropdown li a {
45+
background-color: transparent !important;
46+
color: #00ffff !important;
47+
}
48+
49+
.highcontrast #themedropdown li a:hover,
50+
.highcontrast #themedropdown a:hover,
51+
.highcontrast #themedropdown li:hover,
52+
.highcontrast #themedropdown.dropdown-content li > a:hover,
53+
.highcontrast.dropdown-content li > a:hover {
54+
background-color: transparent !important;
55+
color: #00ffff !important;
56+
}
57+
58+
/* Override Materialize CSS hover styles with maximum specificity */
59+
body.highcontrast #themedropdown.dropdown-content li > a:hover {
60+
background-color: transparent !important;
61+
color: #00ffff !important;
62+
}
63+
3464
/* Dark Mode */
3565

3666
.dark .blue {
@@ -153,7 +183,7 @@
153183
}
154184

155185
.dark #newdropdown li:hover {
156-
background-color: transparent !important;
186+
background-color: transparent !important;
157187
}
158188

159189
.dark #confirmation-message {
@@ -176,18 +206,161 @@ body.dark {
176206
--accent: #3fe0d1;
177207
}
178208

209+
body.highcontrast {
210+
--border: #ffffff;
211+
--bg: #000000;
212+
--fg: #ffffff;
213+
--panel-bg: #000000;
214+
--accent: #00ffff;
215+
}
216+
217+
.highcontrast #canvas {
218+
background-color: #000000 !important;
219+
}
220+
221+
.highcontrast .blue {
222+
background-color: #000080 !important;
223+
}
224+
225+
.highcontrast .blue.darken-1 {
226+
background-color: #0000ff !important;
227+
}
228+
229+
.highcontrast #floatingWindows > .windowFrame {
230+
border: 2px solid var(--border);
231+
background-color: var(--bg);
232+
}
233+
234+
.highcontrast .wfbtItem {
235+
background-color: #00ffff;
236+
}
237+
238+
.highcontrast #floatingWindows > .windowFrame > .wfTopBar .wftTitle {
239+
color: #ffffff;
240+
}
241+
242+
.highcontrast #floatingWindows > .windowFrame > .wfWinBody .wfbWidget {
243+
color: #ffffff !important;
244+
background-color: #000000 !important;
245+
}
246+
247+
.highcontrast .popupMsg {
248+
background-color: #000000;
249+
color: #ffffff;
250+
}
251+
252+
.highcontrast #printText {
253+
border-color: #ffffff;
254+
}
255+
256+
.highcontrast #loading-image-container {
257+
background-color: var(--bg) !important;
258+
}
259+
260+
.highcontrast #loadingText {
261+
color: white !important;
262+
}
263+
264+
.highcontrast .language-link {
265+
color: #ffffff;
266+
}
267+
268+
.highcontrast #submitLilypond {
269+
background-color: #00ffff;
270+
color: #000000;
271+
}
272+
273+
.highcontrast #search,
274+
.highcontrast #helpfulSearch,
275+
.highcontrast .ui-autocomplete {
276+
background-color: #000000 !important;
277+
color: #ffffff !important;
278+
border: 1px solid #ffffff;
279+
}
280+
281+
.highcontrast .ui-autocomplete .ui-menu-item a {
282+
color: #ffffff !important;
283+
background-color: #000000 !important;
284+
}
285+
286+
.highcontrast .ui-autocomplete .ui-menu-item a:hover {
287+
color: #000000 !important;
288+
background-color: #00ffff !important;
289+
}
290+
291+
.highcontrast #helpfulSearchDiv {
292+
color: #ffffff !important;
293+
background-color: transparent !important;
294+
}
295+
296+
.highcontrast #crossButton {
297+
color: #ffffff;
298+
}
299+
300+
.highcontrast #chooseKeyDiv {
301+
background: #000000;
302+
color: #ffffff;
303+
}
304+
305+
.highcontrast #movable {
306+
background: #000000;
307+
color: #ffffff;
308+
}
309+
310+
.highcontrast .dropdown-content li > a {
311+
background-color: #000000;
312+
color: #00ffff;
313+
}
314+
315+
.highcontrast .dropdown-content {
316+
background-color: #000000;
317+
border: 1px solid #ffffff;
318+
}
319+
320+
.highcontrast .modalBox {
321+
background-color: #000000;
322+
}
323+
324+
.highcontrast .modal-message {
325+
color: #ffffff;
326+
background-color: #000000;
327+
}
328+
329+
.highcontrast #newdropdown {
330+
border: #ffffff;
331+
background-color: #000000;
332+
}
333+
334+
.highcontrast #confirmation-message {
335+
color: #ffffff;
336+
}
337+
338+
.highcontrast .material-tooltip {
339+
background-color: #000000 !important;
340+
border: 1px solid #ffffff;
341+
}
342+
343+
.highcontrast .material-tooltip .backdrop {
344+
background-color: #000000 !important;
345+
}
346+
347+
.highcontrast #languagedropdown li a.selected-language {
348+
background-color: rgba(0, 255, 255, 0.25);
349+
border-left: 3px solid #00ffff;
350+
}
351+
179352
/* Your Custom Theme can go here if you don't want to modify the existing dark mode */
180353

181354
/* Selected language highlight in language dropdown */
182355
#languagedropdown li a.selected-language {
183-
background-color: rgba(33, 150, 243, 0.15);
184-
border-left: 3px solid #2196F3;
185-
font-weight: 600;
356+
background-color: rgba(33, 150, 243, 0.15);
357+
border-left: 3px solid #2196f3;
358+
font-weight: 600;
186359
}
187360

188361
.dark #languagedropdown li a.selected-language {
189-
background-color: rgba(33, 150, 243, 0.25);
190-
border-left: 3px solid #64B5F6;
362+
background-color: rgba(33, 150, 243, 0.25);
363+
border-left: 3px solid #64b5f6;
191364
}
192365

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

0 commit comments

Comments
 (0)