diff --git a/qt/ts/scss/webview.scss b/qt/ts/scss/webview.scss
index 421575a42..fe22c3ea4 100644
--- a/qt/ts/scss/webview.scss
+++ b/qt/ts/scss/webview.scss
@@ -1,13 +1,18 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use 'vars';
+@use 'core';
 @use 'buttons';
 
+// core.scss sets border-box, but we need to
+// keep the old behaviour for now to avoid breaking
+// add-ons/card templates
+* {
+    box-sizing: content-box;
+}
+
 body {
     margin: 2em;
-    color: var(--text-fg);
-    background: var(--window-bg);
     overscroll-behavior: none;
 }
 
@@ -15,10 +20,6 @@ h1 {
     margin-bottom: 0.2em;
 }
 
-a {
-    color: var(--link);
-}
-
 body.nightMode {
     &::-webkit-scrollbar {
         background: var(--window-bg);
diff --git a/ts/src/html/graphs.html b/ts/src/html/graphs.html
index d06ae769c..d2a041d52 100644
--- a/ts/src/html/graphs.html
+++ b/ts/src/html/graphs.html
@@ -10,7 +10,7 @@
     <script>
         const nightMode = window.location.hash == "#night";
         if (nightMode) {
-            document.body.className = "night-mode";
+            document.documentElement.className = "night-mode";
         }
         anki.graphs(document.getElementById("main"), nightMode);
     </script>
diff --git a/ts/src/scss/_vars.scss b/ts/src/scss/_vars.scss
index 831461bba..7ce330c11 100644
--- a/ts/src/scss/_vars.scss
+++ b/ts/src/scss/_vars.scss
@@ -1,45 +1,50 @@
+/* Copyright: Ankitects Pty Ltd and contributors
+ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
+
 :root {
-  --text-fg: black;
-  --window-bg: #ececec;
-  --frame-bg: white;
-  --border: #aaa;
-  --faint-border: #e7e7e7;
-  --link: #00a;
-  --review-count: #0a0;
-  --new-count: #00a;
-  --learn-count: #C35617;
-  --zero-count: #ddd;
-  --slightly-grey-text: #333;
-  --highlight-bg: #77ccff;
-  --highlight-fg: black;
-  --disabled: #777;
-  --flag1-bg: #ffaaaa;
-  --flag2-bg: #ffb347;
-  --flag3-bg: #82E0AA;
-  --flag4-bg: #85C1E9;
-  --suspended-bg: #FFFFB2;
-  --marked-bg: #cce;
+    --text-fg: black;
+    --window-bg: #ececec;
+    --frame-bg: white;
+    --border: #aaa;
+    --faint-border: #e7e7e7;
+    --link: #00a;
+    --review-count: #0a0;
+    --new-count: #00a;
+    --learn-count: #c35617;
+    --zero-count: #ddd;
+    --slightly-grey-text: #333;
+    --highlight-bg: #77ccff;
+    --highlight-fg: black;
+    --disabled: #777;
+    --flag1-bg: #ffaaaa;
+    --flag2-bg: #ffb347;
+    --flag3-bg: #82e0aa;
+    --flag4-bg: #85c1e9;
+    --suspended-bg: #ffffb2;
+    --marked-bg: #cce;
+    --tooltip-bg: #fcfcfc;
 }
 
 :root[class*="night-mode"] {
-  --text-fg: white;
-  --window-bg: #2f2f31;
-  --frame-bg: #3a3a3a;
-  --border: #777;
-  --faint-border: #29292B;
-  --link: #77ccff;
-  --review-count: #5CcC00;
-  --new-count: #77ccff;
-  --learn-count: #FF935B;
-  --zero-count: #444;
-  --slightly-grey-text: #ccc;
-  --highlight-bg: #77ccff;
-  --highlight-fg: white;
-  --disabled: #777;
-  --flag1-bg: #aa5555;
-  --flag2-bg: #aa6337;
-  --flag3-bg: #33a055;
-  --flag4-bg: #3581a9;
-  --suspended-bg: #aaaa33;
-  --marked-bg: #77c;
+    --text-fg: white;
+    --window-bg: #2f2f31;
+    --frame-bg: #3a3a3a;
+    --border: #777;
+    --faint-border: #29292b;
+    --link: #77ccff;
+    --review-count: #5ccc00;
+    --new-count: #77ccff;
+    --learn-count: #ff935b;
+    --zero-count: #444;
+    --slightly-grey-text: #ccc;
+    --highlight-bg: #77ccff;
+    --highlight-fg: white;
+    --disabled: #777;
+    --flag1-bg: #aa5555;
+    --flag2-bg: #aa6337;
+    --flag3-bg: #33a055;
+    --flag4-bg: #3581a9;
+    --suspended-bg: #aaaa33;
+    --marked-bg: #77c;
+    --tooltip-bg: #272727;
 }
diff --git a/ts/src/scss/core.scss b/ts/src/scss/core.scss
new file mode 100644
index 000000000..01a3917ce
--- /dev/null
+++ b/ts/src/scss/core.scss
@@ -0,0 +1,18 @@
+/* Copyright: Ankitects Pty Ltd and contributors
+ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
+
+@use 'vars';
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: Helvetica, Arial;
+    color: var(--text-fg);
+    background: var(--window-bg);
+}
+
+a {
+    color: var(--link);
+}
diff --git a/ts/src/stats/calendar.ts b/ts/src/stats/calendar.ts
index 17bd249fe..760d5d0a4 100644
--- a/ts/src/stats/calendar.ts
+++ b/ts/src/stats/calendar.ts
@@ -135,7 +135,7 @@ export function renderCalendar(
     }
 
     const height = bounds.height / 10;
-    let emptyColour = "#eee";
+    let emptyColour = "#ddd";
     if (nightMode) {
         emptyColour = "#333";
     }
diff --git a/ts/src/stats/graphs.scss b/ts/src/stats/graphs.scss
index 8cde479d0..4b03a9592 100644
--- a/ts/src/stats/graphs.scss
+++ b/ts/src/stats/graphs.scss
@@ -1,31 +1,28 @@
-$day-fg: black;
-$day-bg: #f7f7f7;
-$day-tooltip-bg: #fcfcfc;
-$night-fg: white;
-$night-bg: #222;
-$night-tooltip-bg: #272727;
+/* Copyright: Ankitects Pty Ltd and contributors
+ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-* {
-    box-sizing: border-box;
+@use '../scss/core';
+
+:root {
+    --area-fill: #00000008;
+    --area-stroke: #00000015;
 }
 
-body {
-    font-family: Arial;
-    background: $day-bg;
-    color: $day-fg;
+:root[class*="night-mode"] {
+    --area-fill: #ffffff15;
+    --area-stroke: #00000030;
 }
 
 .graph-tooltip {
     position: absolute;
-    background-color: white;
     padding: 15px;
     border-radius: 5px;
     font-size: 15px;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.3s;
-    color: $day-fg;
-    background: $day-tooltip-bg;
+    color: var(--text-fg);
+    background: var(--tooltip-bg);
 }
 
 .graph-tooltip table {
@@ -84,8 +81,8 @@ body {
     z-index: 1;
     top: 0;
     width: 100%;
-    color: $day-fg;
-    background: $day-bg;
+    color: var(--text-fg);
+    background: var(--window-bg);
     padding: 0.5em;
 }
 
@@ -116,8 +113,8 @@ body {
 
 .graph .area {
     pointer-events: none;
-    fill: #00000008;
-    stroke: #00000015;
+    fill: var(--area-fill);
+    stroke: var(--area-stroke);
 }
 
 .hoverzone rect {
@@ -163,36 +160,13 @@ body {
     margin-bottom: 1em;
 }
 
-body.night-mode {
-    background: $night-bg;
-    color: $night-fg;
-}
-
 .no-data {
     text {
         text-anchor: middle;
         fill: grey;
     }
     rect {
-        fill: $day-bg;
-    }
-}
-
-.night-mode {
-    .graph-tooltip {
-        background: $night-tooltip-bg;
-        color: $night-fg;
-    }
-    .range-box {
-        background: $night-bg;
-        color: $night-fg;
-    }
-    .graph .area {
-        fill: #ffffff15;
-        stroke: #00000030;
-    }
-    .no-data rect {
-        fill: $night-bg;
+        fill: var(--window-bg);
     }
 }