Issue#2010 CSS media query prefers-dark-mode

When you change to dark mode in your OS, your mocha tests in the browser will follow suit. There is a change needed in the javascript because the progress indicator canvas renders the 100% text in black. I first tried using CSS only by changing the canvas background to a darker gray which made the text visible but the circle was then surrounded by a gray square in both light and dark modes. I then tried changing the text color in the javascript to mochajs#888 as a middle point between black and white which was ok. In the end I used the existing two colors for the circle as outline and fill color for the text, which looks pretty good. I have tested this on Win10 Edge/Chrome switching the Color setting from control panel. The file browser-color-scheme-demo.html is for reviewer's convenience to see it working. Can be removed before final approval. The files screenshot-mocha-*.png are for reviewer's convenience also, can be kept(moved somewhere) for adding to the documentation or removed before final approval.
bcowgill · Mar 28, 2021 · 520ce71 · 520ce71
1 parent a41f18a
commit 520ce71
Show file tree

Hide file tree

Showing 5 changed files with 204 additions and 41 deletions.
diff --git a/browser-color-scheme-demo.html b/browser-color-scheme-demo.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<!--
+
+A demonstration of pass, pending, failing tests with syntax highlighting for test detail.
+
+This file can be deleted from the PR once satisfied with the color scheme changes.
+
+-->
+  <head>
+    <meta charset="utf-8" />
+    <title>Mocha Color Scheme Test</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="mocha.css" />
+  </head>
+  <body>
+    <div id="mocha"></div>
+    <script src="mocha.js"></script>
+    <script src="./node_modules/chai/chai.js"></script>
+    <script>
+      expect = chai.expect;
+      mocha.setup('bdd');
+      describe("failure suite", function () {
+        it("failing test", function () {
+          // This test has semantic init, keyword, comment, string, number
+          // to test mocha light/dark color scheme when viewing test detail
+          // in the browser.
+          var o = { _value: function (arg) { return void arg }}
+          var expected = 45;
+          expect(45).to.equal(expected);
+          expect(o._value('undef')).to.equal(void should);
+          expect(o._value('undef' /* an inline comment */)).to.equal(
+            void new Date(),
+          );
+        })
+      })
+    </script>
+    <script src="test/interfaces/bdd.spec.js"></script>
+    <script>
+      mocha.run();
+    </script>
+  </body>
+</html>
diff --git a/lib/browser/progress.js b/lib/browser/progress.js
@@ -99,23 +99,28 @@ Progress.prototype.draw = function(ctx) {
     var angle = Math.PI * 2 * (percent / 100);
     ctx.clearRect(0, 0, size, size);
 
-    // outer circle
+    // outer circle dark for LIGHT SCHEME
     ctx.strokeStyle = '#9f9f9f';
     ctx.beginPath();
     ctx.arc(x, y, rad, 0, angle, false);
     ctx.stroke();
 
-    // inner circle
+    // inner circle light for DARK SCHEME
     ctx.strokeStyle = '#eee';
     ctx.beginPath();
     ctx.arc(x, y, rad - 1, 0, angle, true);
     ctx.stroke();
 
-    // text
+    // text outline and fill for LIGHT/DARK SCHEME visibility
     var text = this._text || (percent | 0) + '%';
     var w = ctx.measureText(text).width;
+    var xText = x - w / 2 + 1;
+    var yText = y + fontSize / 2 - 1;
 
-    ctx.fillText(text, x - w / 2 + 1, y + fontSize / 2 - 1);
+    ctx.strokeStyle = '#eee';
+    ctx.fillStyle = '#9f9f9f';
+    ctx.strokeText(text, xText, yText);
+    ctx.fillText(text, xText, yText);
   } catch (ignore) {
     // don't fail if we can't render progress
   }