Skip to content

Commit

Permalink
Support prefers-color-scheme: dark (#4896)
Browse files Browse the repository at this point in the history 
Adds CSS for prefers-color-scheme: dark
  • Loading branch information
@greggman
greggman committed Aug 25, 2022
1 parent 61b4b92 commit 41567df
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 37 deletions.
19 changes: 17 additions & 2 deletions lib/browser/progress.js
View file
Expand Up @@ -86,6 +86,20 @@ Progress.prototype.update = function (n) {
*/
Progress.prototype.draw = function (ctx) {
try {
var darkMatcher = window.matchMedia('(prefers-color-scheme: dark)');
var isDarkMode = !!darkMatcher.matches;
var lightColors = {
outerCircle: '#9f9f9f',
innerCircle: '#eee',
text: '#000'
};
var darkColors = {
outerCircle: '#888',
innerCircle: '#444',
text: '#fff'
};
var colors = isDarkMode ? darkColors : lightColors;

var percent = Math.min(this.percent, 100);
var size = this._size;
var half = size / 2;
Expand All @@ -100,13 +114,13 @@ Progress.prototype.draw = function (ctx) {
ctx.clearRect(0, 0, size, size);

// outer circle
ctx.strokeStyle = '#9f9f9f';
ctx.strokeStyle = colors.outerCircle;
ctx.beginPath();
ctx.arc(x, y, rad, 0, angle, false);
ctx.stroke();

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

ctx.fillStyle = colors.text;
ctx.fillText(text, x - w / 2 + 1, y + fontSize / 2 - 1);
} catch (ignore) {
// don't fail if we can't render progress
Expand Down
136 changes: 101 additions & 35 deletions mocha.css
View file
@@ -1,7 +1,73 @@
@charset "utf-8";

:root {
--mocha-color: #000;
--mocha-bg-color: #fff;
--mocha-pass-icon-color: #00d6b2;
--mocha-pass-color: #fff;
--mocha-pass-shadow-color: rgba(0,0,0,.2);
--mocha-pass-mediump-color: #c09853;
--mocha-pass-slow-color: #b94a48;
--mocha-test-pending-color: #0b97c4;
--mocha-test-pending-icon-color: #0b97c4;
--mocha-test-fail-color: #c00;
--mocha-test-fail-icon-color: #c00;
--mocha-test-fail-pre-color: #000;
--mocha-test-fail-pre-error-color: #c00;
--mocha-test-html-error-color: #000;
--mocha-box-shadow-color: #eee;
--mocha-box-bottom-color: #ddd;
--mocha-test-replay-color: #888;
--mocha-test-replay-bg-color: #eee;
--mocha-stats-color: #888;
--mocha-stats-em-color: #000;
--mocha-stats-hover-color: #eee;
--mocha-error-color: #c00;

--mocha-code-comment: #ddd;
--mocha-code-init: #2f6fad;
--mocha-code-string: #5890ad;
--mocha-code-keyword: #8a6343;
--mocha-code-number: #2f6fad;
}

@media (prefers-color-scheme: dark) {
:root {
--mocha-color: #fff;
--mocha-bg-color: #222;
--mocha-pass-icon-color: #00d6b2;
--mocha-pass-color: #222;
--mocha-pass-shadow-color: rgba(255,255,255,.2);
--mocha-pass-mediump-color: #f1be67;
--mocha-pass-slow-color: #f49896;
--mocha-test-pending-color: #0b97c4;
--mocha-test-pending-icon-color: #0b97c4;
--mocha-test-fail-color: #f44;
--mocha-test-fail-icon-color: #f44;
--mocha-test-fail-pre-color: #fff;
--mocha-test-fail-pre-error-color: #f44;
--mocha-test-html-error-color: #fff;
--mocha-box-shadow-color: #444;
--mocha-box-bottom-color: #555;
--mocha-test-replay-color: #888;
--mocha-test-replay-bg-color: #444;
--mocha-stats-color: #aaa;
--mocha-stats-em-color: #fff;
--mocha-stats-hover-color: #444;
--mocha-error-color: #f44;

--mocha-code-comment: #ddd;
--mocha-code-init: #9cc7f1;
--mocha-code-string: #80d4ff;
--mocha-code-keyword: #e3a470;
--mocha-code-number: #4ca7ff;
}
}

body {
margin:0;
background-color: var(--mocha-bg-color);
color: var(--mocha-color);
}

#mocha {
Expand Down Expand Up @@ -69,11 +135,11 @@ body {
}

#mocha .test.pass.medium .duration {
background: #c09853;
background: var(--mocha-pass-mediump-color);
}

#mocha .test.pass.slow .duration {
background: #b94a48;
background: var(--mocha-pass-slow-color);
}

#mocha .test.pass::before {
Expand All @@ -82,17 +148,17 @@ body {
display: block;
float: left;
margin-right: 5px;
color: #00d6b2;
color: var(--mocha-pass-icon-color);
}

#mocha .test.pass .duration {
font-size: 9px;
margin-left: 5px;
padding: 2px 5px;
color: #fff;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
box-shadow: inset 0 1px 1px rgba(0,0,0,.2);
color: var(--mocha-pass-color);
-webkit-box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color);
-moz-box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color);
box-shadow: inset 0 1px 1px var(--mocha-pass-shadow-color);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
Expand All @@ -105,20 +171,20 @@ body {
}

#mocha .test.pending {
color: #0b97c4;
color: var(--mocha-test-pending-color);
}

#mocha .test.pending::before {
content: '◦';
color: #0b97c4;
color: var(--mocha-test-pending-icon-color);
}

#mocha .test.fail {
color: #c00;
color: var(--mocha-test-fail-color);
}

#mocha .test.fail pre {
color: black;
color: var(--mocha-test-fail-pre-color);
}

#mocha .test.fail::before {
Expand All @@ -127,35 +193,35 @@ body {
display: block;
float: left;
margin-right: 5px;
color: #c00;
color: var(--mocha-pass-icon-color);
}

#mocha .test pre.error {
color: #c00;
color: var(--mocha-test-fail-pre-error-color);
max-height: 300px;
overflow: auto;
}

#mocha .test .html-error {
overflow: auto;
color: black;
color: var(--mocha-test-html-error-color);
display: block;
float: left;
clear: left;
font: 12px/1.5 monaco, monospace;
margin: 5px;
padding: 15px;
border: 1px solid #eee;
border: 1px solid var(--mocha-box-shadow-color);
max-width: 85%; /*(1)*/
max-width: -webkit-calc(100% - 42px);
max-width: -moz-calc(100% - 42px);
max-width: calc(100% - 42px); /*(2)*/
max-height: 300px;
word-wrap: break-word;
border-bottom-color: #ddd;
-webkit-box-shadow: 0 1px 3px #eee;
-moz-box-shadow: 0 1px 3px #eee;
box-shadow: 0 1px 3px #eee;
border-bottom-color: var(--mocha-box-bottom-color);
-webkit-box-shadow: 0 1px 3px var(--mocha-box-shadow-color);
-moz-box-shadow: 0 1px 3px var(--mocha-box-shadow-color);
box-shadow: 0 1px 3px var(--mocha-box-shadow-color);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
Expand Down Expand Up @@ -187,16 +253,16 @@ body {
font: 12px/1.5 monaco, monospace;
margin: 5px;
padding: 15px;
border: 1px solid #eee;
border: 1px solid var(--mocha-box-shadow-color);
max-width: 85%; /*(1)*/
max-width: -webkit-calc(100% - 42px);
max-width: -moz-calc(100% - 42px);
max-width: calc(100% - 42px); /*(2)*/
word-wrap: break-word;
border-bottom-color: #ddd;
-webkit-box-shadow: 0 1px 3px #eee;
-moz-box-shadow: 0 1px 3px #eee;
box-shadow: 0 1px 3px #eee;
border-bottom-color: var(--mocha-box-bottom-color);
-webkit-box-shadow: 0 1px 3px var(--mocha-box-shadow-color);
-moz-box-shadow: 0 1px 3px var(--mocha-box-shadow-color);
box-shadow: 0 1px 3px var(--mocha-box-shadow-color);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
Expand All @@ -217,7 +283,7 @@ body {
height: 15px;
line-height: 15px;
text-align: center;
background: #eee;
background: var(--mocha-test-replay-bg-color);
font-size: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
Expand All @@ -227,7 +293,7 @@ body {
-o-transition:opacity 200ms;
transition: opacity 200ms;
opacity: 0.3;
color: #888;
color: var(--mocha-test-replay-color);
}

#mocha .test:hover a.replay {
Expand All @@ -251,7 +317,7 @@ body {
}

#mocha-error {
color: #c00;
color: var(--mocha-error-color);
font-size: 1.5em;
font-weight: 100;
letter-spacing: 1px;
Expand All @@ -263,7 +329,7 @@ body {
right: 10px;
font-size: 12px;
margin: 0;
color: #888;
color: var(--mocha-stats-color);
z-index: 1;
}

Expand All @@ -284,7 +350,7 @@ body {
}

#mocha-stats em {
color: black;
color: var(--mocha-stats-em-color);
}

#mocha-stats a {
Expand All @@ -293,7 +359,7 @@ body {
}

#mocha-stats a:hover {
border-bottom: 1px solid #eee;
border-bottom: 1px solid var(--mocha-stats-hover-color);
}

#mocha-stats li {
Expand All @@ -308,11 +374,11 @@ body {
height: 40px;
}

#mocha code .comment { color: #ddd; }
#mocha code .init { color: #2f6fad; }
#mocha code .string { color: #5890ad; }
#mocha code .keyword { color: #8a6343; }
#mocha code .number { color: #2f6fad; }
#mocha code .comment { color: var(--mocha-code-comment); }
#mocha code .init { color: var(--mocha-code-init); }
#mocha code .string { color: var(--mocha-code-string); }
#mocha code .keyword { color: var(--mocha-code-keyword); }
#mocha code .number { color: var(--mocha-code-number); }

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

0 comments on commit 41567df

Please sign in to comment.