diff --git a/qt/aqt/theme.py b/qt/aqt/theme.py
index a29fa26e6..cb6c12f31 100644
--- a/qt/aqt/theme.py
+++ b/qt/aqt/theme.py
@@ -81,15 +81,15 @@ class ThemeManager:
     def str_color(self, key: str) -> str:
         """Get a color defined in _vars.scss
 
-        If the colour is called '$day-frame-bg', key should be
+        If the colour is called '--frame-bg', key should be
         'frame-bg'.
 
         Returns the color as a string hex code or color name."""
-        prefix = self.night_mode and "night-" or "day-"
-        c = colors.get(prefix + key)
+        idx = 1 if self.night_mode else 0
+        c = colors.get(key)
         if c is None:
             raise Exception("no such color:", key)
-        return c
+        return c[idx]
 
     def qcolor(self, key: str) -> QColor:
         """Get a color defined in _vars.scss as a QColor."""
diff --git a/qt/tools/extract_scss_colors.py b/qt/tools/extract_scss_colors.py
index 08010c119..00e5230fd 100644
--- a/qt/tools/extract_scss_colors.py
+++ b/qt/tools/extract_scss_colors.py
@@ -10,15 +10,16 @@ for line in open("../ts/src/scss/_vars.scss"):
     line = line.strip()
     if not line:
         continue
-    m = re.match(r"^\$(.+): (.+);$", line)
+    m = re.match(r"--(.+): (.+);$", line)
     if not m:
-        print("failed to match", line)
+        if line != "}" and not ":root" in line:
+            print("failed to match", line)
         continue
 
     var = m.group(1)
     val = m.group(2)
 
-    colors[var] = val
+    colors.setdefault(var, []).append(val)
 
 with open("aqt/colors.py", "w") as buf:
     buf.write("# this file is auto-generated from _vars.scss\n")
diff --git a/ts/src/scss/_vars.scss b/ts/src/scss/_vars.scss
index 084f47494..831461bba 100644
--- a/ts/src/scss/_vars.scss
+++ b/ts/src/scss/_vars.scss
@@ -1,88 +1,45 @@
-$day-text-fg: black;
-$day-window-bg: #ececec;
-$day-frame-bg: white;
-$day-border: #aaa;
-$day-faint-border: #e7e7e7;
-$day-link: #00a;
-$day-review-count: #0a0;
-$day-new-count: #00a;
-$day-learn-count: #C35617;
-$day-zero-count: #ddd;
-$day-slightly-grey-text: #333;
-$day-highlight-bg: #77ccff;
-$day-highlight-fg: black;
-$day-disabled: #777;
-$day-flag1-bg: #ffaaaa;
-$day-flag2-bg: #ffb347;
-$day-flag3-bg: #82E0AA;
-$day-flag4-bg: #85C1E9;
-$day-suspended-bg: #FFFFB2;
-$day-marked-bg: #cce;
-
-$night-text-fg: white;
-$night-window-bg: #2f2f31;
-$night-frame-bg: #3a3a3a;
-$night-border: #777;
-$night-faint-border: #29292B;
-$night-link: #77ccff;
-$night-review-count: #5CcC00;
-$night-new-count: #77ccff;
-$night-learn-count: #FF935B;
-$night-zero-count: #444;
-$night-slightly-grey-text: #ccc;
-$night-highlight-bg: #77ccff;
-$night-highlight-fg: white;
-$night-disabled: #777;
-$night-flag1-bg: #aa5555;
-$night-flag2-bg: #aa6337;
-$night-flag3-bg: #33a055;
-$night-flag4-bg: #3581a9;
-$night-suspended-bg: #aaaa33;
-$night-marked-bg: #77c;
-
-
 :root {
-  --text-fg: #{$day-text-fg};
-  --window-bg: #{$day-window-bg};
-  --frame-bg: #{$day-frame-bg};
-  --border: #{$day-border};
-  --faint-border: #{$day-faint-border};
-  --link: #{$day-link};
-  --review-count: #{$day-review-count};
-  --new-count: #{$day-new-count};
-  --learn-count: #{$day-learn-count};
-  --zero-count: #{$day-zero-count};
-  --slightly-grey-text: #{$day-slightly-grey-text};
-  --highlight-bg: #{$day-highlight-bg};
-  --highlight-fg: #{$day-highlight-fg};
-  --disabled: #{$day-disabled};
-  --flag1-bg: #{$day-flag1-bg};
-  --flag2-bg: #{$day-flag2-bg};
-  --flag3-bg: #{$day-flag3-bg};
-  --flag4-bg: #{$day-flag4-bg};
-  --suspended-bg: #{$day-suspended-bg};
-  --marked-bg: #{$day-marked-bg};
+  --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;
 }
 
 :root[class*="night-mode"] {
-  --text-fg: #{$night-text-fg};
-  --window-bg: #{$night-window-bg};
-  --frame-bg: #{$night-frame-bg};
-  --border: #{$night-border};
-  --faint-border: #{$night-faint-border};
-  --link: #{$night-link};
-  --review-count: #{$night-review-count};
-  --new-count: #{$night-new-count};
-  --learn-count: #{$night-learn-count};
-  --zero-count: #{$night-zero-count};
-  --slightly-grey-text: #{$night-slightly-grey-text};
-  --highlight-bg: #{$night-highlight-bg};
-  --highlight-fg: #{$night-highlight-fg};
-  --disabled: #{$night-disabled};
-  --flag1-bg: #{$night-flag1-bg};
-  --flag2-bg: #{$night-flag2-bg};
-  --flag3-bg: #{$night-flag3-bg};
-  --flag4-bg: #{$night-flag4-bg};
-  --suspended-bg: #{$night-suspended-bg};
-  --marked-bg: #{$night-marked-bg};
+  --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;
 }