diff --git a/qt/aqt/browser/table/__init__.py b/qt/aqt/browser/table/__init__.py
index 314ac742c..2f5c85a65 100644
--- a/qt/aqt/browser/table/__init__.py
+++ b/qt/aqt/browser/table/__init__.py
@@ -101,12 +101,11 @@ def backend_color_to_aqt_color(color: BrowserRow.Color.V) -> tuple[str, str] | N
     return adjusted_bg_color(temp_color)
 
 
-def adjusted_bg_color(color: tuple[str, str]) -> tuple[str, str]:
+def adjusted_bg_color(color: dict[str, str]) -> dict:
     if color:
-        return (
-            QColor(color[0]).lighter(150).name(),
-            QColor(color[1]).darker(150).name(),
-        )
+        color.day = color.day.lighter(150).name()
+        color.night = color.night.darker(150).name()
+        return color
     else:
         return None
 
diff --git a/qt/aqt/data/qt/icons/color_svg.py b/qt/aqt/data/qt/icons/color_svg.py
index 2fc33a7fc..0bbc00f14 100644
--- a/qt/aqt/data/qt/icons/color_svg.py
+++ b/qt/aqt/data/qt/icons/color_svg.py
@@ -37,11 +37,15 @@ with open(input_svg, "r") as f:
             elif f"{prefix}-dark.svg" in path:
                 dark_svg = path
 
-        for (idx, filename) in enumerate((light_svg, dark_svg)):
-            data = svg_data
+        def substitute(data: str, filename: str, mode: str) -> None:
             if "fill" in data:
-                data = re.sub(r"fill=\"#.+?\"", f'fill="{color[idx]}"', data)
+                data = re.sub(r"fill=\"#.+?\"", f'fill="{color[mode]}"', data)
             else:
-                data = re.sub(r"<svg", f'<svg fill="{color[idx]}"', data, 1)
+                data = re.sub(r"<svg", f'<svg fill="{color[mode]}"', data, 1)
             with open(filename, "w") as f:
                 f.write(data)
+    
+        substitute(svg_data, light_svg, "light")
+        substitute(svg_data, dark_svg, "dark")
+
+
diff --git a/qt/aqt/switch.py b/qt/aqt/switch.py
index aebb2ef66..3db3e4478 100644
--- a/qt/aqt/switch.py
+++ b/qt/aqt/switch.py
@@ -6,7 +6,6 @@ from aqt import colors
 from aqt.qt import *
 from aqt.theme import theme_manager
 
-
 class Switch(QAbstractButton):
     """A horizontal slider to toggle between two states which can be denoted by strings and/or QIcons.
 
@@ -19,8 +18,8 @@ class Switch(QAbstractButton):
         radius: int = 10,
         left_label: str = "",
         right_label: str = "",
-        left_color: tuple[str, str] = colors.ACCENT_CARD,
-        right_color: tuple[str, str] = colors.ACCENT_NOTE,
+        left_color: dict[str, str] = colors.ACCENT_CARD,
+        right_color: dict[str, str] = colors.ACCENT_NOTE,
         parent: QWidget = None,
     ) -> None:
         super().__init__(parent=parent)
diff --git a/qt/aqt/theme.py b/qt/aqt/theme.py
index d1e03572b..ee74a0407 100644
--- a/qt/aqt/theme.py
+++ b/qt/aqt/theme.py
@@ -31,16 +31,15 @@ from aqt.qt import (
 @dataclass
 class ColoredIcon:
     path: str
-    # (day, night)
-    color: tuple[str, str]
+    color: dict[str, str]
 
     def current_color(self, night_mode: bool) -> str:
         if night_mode:
-            return self.color[1]
+            return self.color.get("dark", "")
         else:
-            return self.color[0]
+            return self.color.get("light", "")
 
-    def with_color(self, color: tuple[str, str]) -> ColoredIcon:
+    def with_color(self, color: dict[str, str]) -> ColoredIcon:
         return ColoredIcon(path=self.path, color=color)
 
 
@@ -178,12 +177,11 @@ class ThemeManager:
         "Returns body classes used when showing a card."
         return f"card card{card_ord+1} {self.body_class(night_mode)}"
 
-    def var(self, vars: tuple[str, str]) -> str:
+    def var(self, vars: dict[str, str]) -> str:
         """Given day/night colors/props, return the correct one for the current theme."""
-        idx = 1 if self.night_mode else 0
-        return vars[idx]
+        return vars["dark" if self.night_mode else "light"]
 
-    def qcolor(self, colors: tuple[str, str]) -> QColor:
+    def qcolor(self, colors: dict[str, str]) -> QColor:
         return QColor(self.var(colors))
 
     def _determine_night_mode(self) -> bool:
diff --git a/qt/aqt/webview.py b/qt/aqt/webview.py
index bc82352f6..fe74b5322 100644
--- a/qt/aqt/webview.py
+++ b/qt/aqt/webview.py
@@ -453,8 +453,8 @@ div[contenteditable="true"]:focus {{
 body {{ zoom: {zoom}; background-color: var(--canvas); }}
 html {{ {font} }}
 {button_style}
-:root {{ --canvas: {colors.CANVAS[0]} }}
-:root[class*=night-mode] {{ --canvas: {colors.CANVAS[1]} }}
+:root {{ --canvas: {colors.CANVAS["light"]} }}
+:root[class*=night-mode] {{ --canvas: {colors.CANVAS["dark"]} }}
 """
 
     def stdHtml(
diff --git a/qt/tools/extract_sass_vars.py b/qt/tools/extract_sass_vars.py
index 2019359d5..733e47183 100644
--- a/qt/tools/extract_sass_vars.py
+++ b/qt/tools/extract_sass_vars.py
@@ -1,10 +1,10 @@
 #!/usr/bin/env python3
 # Copyright: Ankitects Pty Ltd and contributors
 # License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-
 import json
 import re
 import sys
+import pprint
 
 # bazel genrule "srcs"
 root_vars_css = sys.argv[1]
@@ -13,17 +13,30 @@ root_vars_css = sys.argv[1]
 colors_py = sys.argv[2]
 props_py = sys.argv[3]
 
+class Var(str):
+    def __new__(self, value: str, comment: str):
+        self.comment = comment
+        return str.__new__(self, value)
+
+    def comment(self):
+        return self.comment
+
 colors = {}
 props = {}
 reached_props = False
+comment = ""
 
-for line in re.split(r"[;\{\}]", open(root_vars_css).read()):
+for line in re.split(r"[;\{\}]|\*\/", open(root_vars_css).read()):
     line = line.strip()
 
     if not line:
         continue
-    if "props" in line:
-        reached_props = True
+    if line.startswith("/*!"):
+        if "props" in line:
+            reached_props = True
+        else:
+            comment = re.match(r"\/\*!\s*(.*)$", line)[1]
+        continue
 
     m = re.match(r"--(.+):(.+)$", line)
 
@@ -38,39 +51,47 @@ for line in re.split(r"[;\{\}]", open(root_vars_css).read()):
             print("failed to match", line)
         continue
 
-    var = m.group(1)
+    var = m.group(1).replace("-", "_").upper()
     val = m.group(2)
 
     if reached_props:
-        props.setdefault(var, []).append(val)
+        if not var in props:
+            props.setdefault(var, {})["comment"] = comment
+            props[var]["light"] = val
+        else:
+            props[var]["dark"] = val
     else:
-        colors.setdefault(var, []).append(val)
+        if not var in colors:
+            colors.setdefault(var, {})["comment"] = comment
+            colors[var]["light"] = val
+        else:
+            colors[var]["dark"] = val
+
+    comment = ""
 
 
 copyright_notice = """\
 # Copyright: Ankitects Pty Ltd and contributors
-# License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+# License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html\n
 """
 
 with open(colors_py, "w") as buf:
     buf.write(copyright_notice)
-    buf.write("# this file is auto-generated from _root-vars.scss\n")
+    buf.write("# This file was automatically generated from _root-vars.scss\n")
 
     for color, val in colors.items():
-        day = val[0]
-        night = val[1] if len(val) > 1 else day
+        if not "dark" in val:
+            val["dark"] = val.light
 
-        color = color.replace("-", "_").upper()
-        buf.write(f'{color} = ("{day}", "{night}")\n')
+        buf.write(f'{color} = {pprint.pformat(val, width=50, sort_dicts=False)}\n')
 
 
 with open(props_py, "w") as buf:
     buf.write(copyright_notice)
-    buf.write("# this file is auto-generated from _root-vars.scss\n")
+    buf.write("# This file was automatically generated from _root-vars.scss\n")
 
     for prop, val in props.items():
-        day = val[0]
-        night = val[1] if len(val) > 1 else day
+        if not "dark" in val:
+            val["dark"] = val.light
 
-        prop = prop.replace("-", "_").upper()
-        buf.write(f'{prop} = ("{day}", "{night}")\n')
+        buf.write(f'{prop} = {pprint.pformat(val, width=50, sort_dicts=False)}\n')
diff --git a/sass/_root-vars.scss b/sass/_root-vars.scss
index 6c0f90c64..b355ab995 100644
--- a/sass/_root-vars.scss
+++ b/sass/_root-vars.scss
@@ -9,11 +9,13 @@
 :root {
     $colors: map.get($vars, colors);
     @each $name, $val in create-vars-from-map($colors, light) {
+        /*! #{$name} */
         #{$name}: #{$val};
     }
     color-scheme: light;
     &.night-mode {
         @each $name, $val in create-vars-from-map($colors, dark) {
+            /*! #{$name} */
             #{$name}: #{$val};
         }
         color-scheme: dark;
@@ -24,10 +26,12 @@
 :root {
     $props: map.get($vars, props);
     @each $name, $val in create-vars-from-map($props, light) {
-        #{$name}: #{$val}; /*! #{$name} */
+        /*! #{$name} */
+        #{$name}: #{$val};
     }
     &.night-mode {
         @each $name, $val in create-vars-from-map($props, dark) {
+            /*! #{$name} */
             #{$name}: #{$val};
         }
     }