use css vars for graph styling as well; base webview.scss off core.scss

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);

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>

ts/src/scss/_vars.scss

@@ -1,3 +1,6 @@
+/* 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;
@@ -7,7 +10,7 @@
     --link: #00a;
     --review-count: #0a0;
     --new-count: #00a;
-  --learn-count: #C35617;
+    --learn-count: #c35617;
     --zero-count: #ddd;
     --slightly-grey-text: #333;
     --highlight-bg: #77ccff;
@@ -15,10 +18,11 @@
     --disabled: #777;
     --flag1-bg: #ffaaaa;
     --flag2-bg: #ffb347;
-  --flag3-bg: #82E0AA;
+    --flag3-bg: #82e0aa;
-  --flag4-bg: #85C1E9;
+    --flag4-bg: #85c1e9;
-  --suspended-bg: #FFFFB2;
+    --suspended-bg: #ffffb2;
     --marked-bg: #cce;
+    --tooltip-bg: #fcfcfc;
 }
 
 :root[class*="night-mode"] {
@@ -26,11 +30,11 @@
     --window-bg: #2f2f31;
     --frame-bg: #3a3a3a;
     --border: #777;
-  --faint-border: #29292B;
+    --faint-border: #29292b;
     --link: #77ccff;
-  --review-count: #5CcC00;
+    --review-count: #5ccc00;
     --new-count: #77ccff;
-  --learn-count: #FF935B;
+    --learn-count: #ff935b;
     --zero-count: #444;
     --slightly-grey-text: #ccc;
     --highlight-bg: #77ccff;
@@ -42,4 +46,5 @@
     --flag4-bg: #3581a9;
     --suspended-bg: #aaaa33;
     --marked-bg: #77c;
+    --tooltip-bg: #272727;
 }

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);
+}

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";
     }

ts/src/stats/graphs.scss

@@ -1,31 +1,28 @@
-$day-fg: black;
+/* Copyright: Ankitects Pty Ltd and contributors
-$day-bg: #f7f7f7;
+ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
-$day-tooltip-bg: #fcfcfc;
-$night-fg: white;
-$night-bg: #222;
-$night-tooltip-bg: #272727;
 
-* {
+@use '../scss/core';
-    box-sizing: border-box;
+
+:root {
+    --area-fill: #00000008;
+    --area-stroke: #00000015;
 }
 
-body {
+:root[class*="night-mode"] {
-    font-family: Arial;
+    --area-fill: #ffffff15;
-    background: $day-bg;
+    --area-stroke: #00000030;
-    color: $day-fg;
 }
 
 .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;
+    color: var(--text-fg);
-    background: $day-tooltip-bg;
+    background: var(--tooltip-bg);
 }
 
 .graph-tooltip table {
@@ -84,8 +81,8 @@ body {
     z-index: 1;
     top: 0;
     width: 100%;
-    color: $day-fg;
+    color: var(--text-fg);
-    background: $day-bg;
+    background: var(--window-bg);
     padding: 0.5em;
 }
 
@@ -116,8 +113,8 @@ body {
 
 .graph .area {
     pointer-events: none;
-    fill: #00000008;
+    fill: var(--area-fill);
-    stroke: #00000015;
+    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;
+        fill: var(--window-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;
     }
 }