Skip to content

Commit 41567df

Browse files
greggmangreggman
authored
Support prefers-color-scheme: dark (#4896)
Adds CSS for prefers-color-scheme: dark
1 parent 61b4b92 commit 41567df

File tree

2 files changed

+118
-37
lines changed

2 files changed

+118
-37
lines changed

‎lib/browser/progress.js‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,20 @@ Progress.prototype.update = function (n) {
8686
*/
8787
Progress.prototype.draw = function (ctx) {
8888
try {
89+
var darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
90+
var isDarkMode = !!darkMatcher.matches;
91+
var lightColors = {
92+
outerCircle: '#9f9f9f',
93+
innerCircle: '#eee',
94+
text: '#000'
95+
};
96+
var darkColors = {
97+
outerCircle: '#888',
98+
innerCircle: '#444',
99+
text: '#fff'
100+
};
101+
var colors = isDarkMode ? darkColors : lightColors;
102+
89103
var percent = Math.min(this.percent, 100);
90104
var size = this._size;
91105
var half = size / 2;
@@ -100,13 +114,13 @@ Progress.prototype.draw = function (ctx) {
100114
ctx.clearRect(0, 0, size, size);
101115

102116
// outer circle
103-
ctx.strokeStyle = '#9f9f9f';
117+
ctx.strokeStyle = colors.outerCircle;
104118
ctx.beginPath();
105119
ctx.arc(x, y, rad, 0, angle, false);
106120
ctx.stroke();
107121

108122
// inner circle
109-
ctx.strokeStyle = '#eee';
123+
ctx.strokeStyle = colors.innerCircle;
110124
ctx.beginPath();
111125
ctx.arc(x, y, rad - 1, 0, angle, true);
112126
ctx.stroke();
@@ -115,6 +129,7 @@ Progress.prototype.draw = function (ctx) {
115129
var text = this._text || (percent | 0) + '%';
116130
var w = ctx.measureText(text).width;
117131

132+
ctx.fillStyle = colors.text;
118133
ctx.fillText(text, x - w / 2 + 1, y + fontSize / 2 - 1);
119134
} catch (ignore) {
120135
// don't fail if we can't render progress

‎mocha.css‎

Lines changed: 101 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,73 @@
11
@charset "utf-8";
22

3+
:root {
4+
--mocha-color: #000;
5+
--mocha-bg-color: #fff;
6+
--mocha-pass-icon-color: #00d6b2;
7+
--mocha-pass-color: #fff;
8+
--mocha-pass-shadow-color: rgba(0,0,0,.2);
9+
--mocha-pass-mediump-color: #c09853;
10+
--mocha-pass-slow-color: #b94a48;
11+
--mocha-test-pending-color: #0b97c4;
12+
--mocha-test-pending-icon-color: #0b97c4;
13+
--mocha-test-fail-color: #c00;
14+
--mocha-test-fail-icon-color: #c00;
15+
--mocha-test-fail-pre-color: #000;
16+
--mocha-test-fail-pre-error-color: #c00;
17+
--mocha-test-html-error-color: #000;
18+
--mocha-box-shadow-color: #eee;
19+
--mocha-box-bottom-color: #ddd;
20+
--mocha-test-replay-color: #888;
21+
--mocha-test-replay-bg-color: #eee;
22+
--mocha-stats-color: #888;
23+
--mocha-stats-em-color: #000;
24+
--mocha-stats-hover-color: #eee;
25+
--mocha-error-color: #c00;
26+
27+
--mocha-code-comment: #ddd;
28+
--mocha-code-init: #2f6fad;
29+
--mocha-code-string: #5890ad;
30+
--mocha-code-keyword: #8a6343;
31+
--mocha-code-number: #2f6fad;
32+
}
33+
34+
@media (prefers-color-scheme: dark) {
35+
:root {
36+
--mocha-color: #fff;
37+
--mocha-bg-color: #222;
38+
--mocha-pass-icon-color: #00d6b2;
39+
--mocha-pass-color: #222;
40+
--mocha-pass-shadow-color: rgba(255,255,255,.2);
41+
--mocha-pass-mediump-color: #f1be67;
42+
--mocha-pass-slow-color: #f49896;
43+
--mocha-test-pending-color: #0b97c4;
44+
--mocha-test-pending-icon-color: #0b97c4;
45+
--mocha-test-fail-color: #f44;
46+
--mocha-test-fail-icon-color: #f44;
47+
--mocha-test-fail-pre-color: #fff;
48+
--mocha-test-fail-pre-error-color: #f44;
49+
--mocha-test-html-error-color: #fff;
50+
--mocha-box-shadow-color: #444;
51+
--mocha-box-bottom-color: #555;
52+
--mocha-test-replay-color: #888;
53+
--mocha-test-replay-bg-color: #444;
54+
--mocha-stats-color: #aaa;
55+
--mocha-stats-em-color: #fff;
56+
--mocha-stats-hover-color: #444;
57+
--mocha-error-color: #f44;
58+
59+
--mocha-code-comment: #ddd;
60+
--mocha-code-init: #9cc7f1;
61+
--mocha-code-string: #80d4ff;
62+
--mocha-code-keyword: #e3a470;
63+
--mocha-code-number: #4ca7ff;
64+
}
65+
}
66+
367
body {
468
margin:0;
69+
background-color: var(--mocha-bg-color);
70+
color: var(--mocha-color);
571
}
672

773
#mocha {
@@ -69,11 +135,11 @@ body {
69135
}
70136

71137
#mocha .test.pass.medium .duration {
72-
background: #c09853;
138+
background: var(--mocha-pass-mediump-color);
73139
}
74140

75141
#mocha .test.pass.slow .duration {
76-
background: #b94a48;
142+
background: var(--mocha-pass-slow-color);
77143
}
78144

79145
#mocha .test.pass::before {
@@ -82,17 +148,17 @@ body {
82148
display: block;
83149
float: left;
84150
margin-right: 5px;
85-
color: #00d6b2;
151+
color: var(--mocha-pass-icon-color);
86152
}
87153

88154
#mocha .test.pass .duration {
89155
font-size: 9px;
90156
margin-left: 5px;
91157
padding: 2px 5px;
92-
color: #fff;
93-
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
94-
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
95-
box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
158+
color: var(--mocha-pass-color);
159+
-webkit-box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color);
160+
-moz-box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color);
161+
box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color);
96162
-webkit-border-radius: 5px;
97163
-moz-border-radius: 5px;
98164
-ms-border-radius: 5px;
@@ -105,20 +171,20 @@ body {
105171
}
106172

107173
#mocha .test.pending {
108-
color: #0b97c4;
174+
color: var(--mocha-test-pending-color);
109175
}
110176

111177
#mocha .test.pending::before {
112178
content: '◦';
113-
color: #0b97c4;
179+
color: var(--mocha-test-pending-icon-color);
114180
}
115181

116182
#mocha .test.fail {
117-
color: #c00;
183+
color: var(--mocha-test-fail-color);
118184
}
119185

120186
#mocha .test.fail pre {
121-
color: black;
187+
color: var(--mocha-test-fail-pre-color);
122188
}
123189

124190
#mocha .test.fail::before {
@@ -127,35 +193,35 @@ body {
127193
display: block;
128194
float: left;
129195
margin-right: 5px;
130-
color: #c00;
196+
color: var(--mocha-pass-icon-color);
131197
}
132198

133199
#mocha .test pre.error {
134-
color: #c00;
200+
color: var(--mocha-test-fail-pre-error-color);
135201
max-height: 300px;
136202
overflow: auto;
137203
}
138204

139205
#mocha .test .html-error {
140206
overflow: auto;
141-
color: black;
207+
color: var(--mocha-test-html-error-color);
142208
display: block;
143209
float: left;
144210
clear: left;
145211
font: 12px/1.5 monaco, monospace;
146212
margin: 5px;
147213
padding: 15px;
148-
border: 1px solid #eee;
214+
border: 1px solid var(--mocha-box-shadow-color);
149215
max-width: 85%; /*(1)*/
150216
max-width: -webkit-calc(100% - 42px);
151217
max-width: -moz-calc(100% - 42px);
152218
max-width: calc(100% - 42px); /*(2)*/
153219
max-height: 300px;
154220
word-wrap: break-word;
155-
border-bottom-color: #ddd;
156-
-webkit-box-shadow: 0 1px 3px #eee;
157-
-moz-box-shadow: 0 1px 3px #eee;
158-
box-shadow: 0 1px 3px #eee;
221+
border-bottom-color: var(--mocha-box-bottom-color);
222+
-webkit-box-shadow: 0 1px 3px var(--mocha-box-shadow-color);
223+
-moz-box-shadow: 0 1px 3px var(--mocha-box-shadow-color);
224+
box-shadow: 0 1px 3px var(--mocha-box-shadow-color);
159225
-webkit-border-radius: 3px;
160226
-moz-border-radius: 3px;
161227
border-radius: 3px;
@@ -187,16 +253,16 @@ body {
187253
font: 12px/1.5 monaco, monospace;
188254
margin: 5px;
189255
padding: 15px;
190-
border: 1px solid #eee;
256+
border: 1px solid var(--mocha-box-shadow-color);
191257
max-width: 85%; /*(1)*/
192258
max-width: -webkit-calc(100% - 42px);
193259
max-width: -moz-calc(100% - 42px);
194260
max-width: calc(100% - 42px); /*(2)*/
195261
word-wrap: break-word;
196-
border-bottom-color: #ddd;
197-
-webkit-box-shadow: 0 1px 3px #eee;
198-
-moz-box-shadow: 0 1px 3px #eee;
199-
box-shadow: 0 1px 3px #eee;
262+
border-bottom-color: var(--mocha-box-bottom-color);
263+
-webkit-box-shadow: 0 1px 3px var(--mocha-box-shadow-color);
264+
-moz-box-shadow: 0 1px 3px var(--mocha-box-shadow-color);
265+
box-shadow: 0 1px 3px var(--mocha-box-shadow-color);
200266
-webkit-border-radius: 3px;
201267
-moz-border-radius: 3px;
202268
border-radius: 3px;
@@ -217,7 +283,7 @@ body {
217283
height: 15px;
218284
line-height: 15px;
219285
text-align: center;
220-
background: #eee;
286+
background: var(--mocha-test-replay-bg-color);
221287
font-size: 15px;
222288
-webkit-border-radius: 15px;
223289
-moz-border-radius: 15px;
@@ -227,7 +293,7 @@ body {
227293
-o-transition:opacity 200ms;
228294
transition: opacity 200ms;
229295
opacity: 0.3;
230-
color: #888;
296+
color: var(--mocha-test-replay-color);
231297
}
232298

233299
#mocha .test:hover a.replay {
@@ -251,7 +317,7 @@ body {
251317
}
252318

253319
#mocha-error {
254-
color: #c00;
320+
color: var(--mocha-error-color);
255321
font-size: 1.5em;
256322
font-weight: 100;
257323
letter-spacing: 1px;
@@ -263,7 +329,7 @@ body {
263329
right: 10px;
264330
font-size: 12px;
265331
margin: 0;
266-
color: #888;
332+
color: var(--mocha-stats-color);
267333
z-index: 1;
268334
}
269335

@@ -284,7 +350,7 @@ body {
284350
}
285351

286352
#mocha-stats em {
287-
color: black;
353+
color: var(--mocha-stats-em-color);
288354
}
289355

290356
#mocha-stats a {
@@ -293,7 +359,7 @@ body {
293359
}
294360

295361
#mocha-stats a:hover {
296-
border-bottom: 1px solid #eee;
362+
border-bottom: 1px solid var(--mocha-stats-hover-color);
297363
}
298364

299365
#mocha-stats li {
@@ -308,11 +374,11 @@ body {
308374
height: 40px;
309375
}
310376

311-
#mocha code .comment { color: #ddd; }
312-
#mocha code .init { color: #2f6fad; }
313-
#mocha code .string { color: #5890ad; }
314-
#mocha code .keyword { color: #8a6343; }
315-
#mocha code .number { color: #2f6fad; }
377+
#mocha code .comment { color: var(--mocha-code-comment); }
378+
#mocha code .init { color: var(--mocha-code-init); }
379+
#mocha code .string { color: var(--mocha-code-string); }
380+
#mocha code .keyword { color: var(--mocha-code-keyword); }
381+
#mocha code .number { color: var(--mocha-code-number); }
316382

317383
@media screen and (max-device-width: 480px) {
318384
#mocha {

0 commit comments

Comments
 (0)