Apply CSS variables from Python side

Why go full-circle with the Sass variables? This way we only need one interface for add-on authors to interact with. It also makes it easier for us to apply additional themes in the future.

qt/aqt/data/web/css/deckbrowser.scss

@@ -1,6 +1,5 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
-@use "root-vars";
 @use "sass/vars" as *;
 @use "sass/card-counts";
 

qt/aqt/data/web/css/overview.scss

@@ -1,7 +1,6 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use "root-vars";
 @use "sass/vars" as *;
 @use "sass/card-counts";
 @use "sass/button-mixins" as button;

qt/aqt/data/web/css/reviewer-bottom.scss

@@ -1,7 +1,6 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use "root-vars";
 @use "sass/vars" as *;
 @use "sass/card-counts";
 

qt/aqt/data/web/css/toolbar.scss

@@ -1,7 +1,6 @@
 /* Copyright: Ankitects Pty Ltd and contributors
  * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
 
-@use "root-vars";
 @use "sass/vars" as *;
 @use "sass/elevation";
 @use "sass/button-mixins" as button;

qt/aqt/webview.py

@@ -12,7 +12,7 @@ import anki.lang
 from anki._legacy import deprecated
 from anki.lang import is_rtl
 from anki.utils import is_lin, is_mac, is_win
-from aqt import colors, gui_hooks
+from aqt import colors, gui_hooks, props
 from aqt.qt import *
 from aqt.theme import theme_manager
 from aqt.utils import askUser, is_gesture_or_zoom_event, openLink, showInfo, tr
@@ -448,7 +448,6 @@ div[contenteditable="true"]:focus {{
             )
 
         zoom = self.app_zoom_factor()
-
         return f"""
 body {{ zoom: {zoom}; background-color: var(--canvas); }}
 html {{ {font} }}
@@ -457,6 +456,23 @@ html {{ {font} }}
 :root[class*=night-mode] {{ --canvas: {colors.CANVAS["dark"]} }}
 """
 
+    def css_vars(self) -> str:
+        br = "\n  "
+        return f"""
+:root {{
+  {br.join([f"/* {color['comment']} */{br}--{name.lower().replace('_', '-')}: {color['light']};" for name, color in colors.__dict__.items() if name != "__builtins__" and isinstance(color, dict)])}
+}}
+:root[class*=night-mode] {{
+  {br.join([f"/* {color['comment']} */{br}--{name.lower().replace('_', '-')}: {color['dark']};" for name, color in colors.__dict__.items() if name != "__builtins__" and isinstance(color, dict)])}
+}}
+:root {{
+  {br.join([f"/* {prop['comment']} */{br}--{name.lower().replace('_', '-')}: {prop['light']};" for name, prop in props.__dict__.items() if name != "__builtins__" and isinstance(prop, dict)])}
+}}
+:root[class*=night-mode] {{
+  {br.join([f"/* {prop['comment']} */{br}--{name.lower().replace('_', '-')}: {prop['dark']};" for name, prop in props.__dict__.items() if name != "__builtins__" and isinstance(prop, dict)])}
+}}
+        """
+
     def stdHtml(
         self,
         body: str,
@@ -478,13 +494,13 @@ html {{ {font} }}
 
         gui_hooks.webview_will_set_content(web_content, context)
 
-        csstxt = ""
+        csstxt = f'<style id="vars">{self.css_vars()}</style>'
         if "css/webview.css" in css:
             # we want our dynamic styling to override the defaults in
             # css/webview.css, but come before user-provided stylesheets so that
             # they can override us if necessary
             web_content.css.remove("css/webview.css")
-            csstxt = self.bundledCSS("css/webview.css")
+            csstxt += self.bundledCSS("css/webview.css")
             csstxt += f"<style>{self.standard_css()}</style>"
 
         csstxt += "\n".join(self.bundledCSS(fname) for fname in web_content.css)

sass/base.scss

@@ -1,5 +1,4 @@
 @use "vars" as *;
-@use "root-vars";
 @use "scrollbar";
 @use "button-mixins" as button;
 

ts/graphs/graphs-base.scss

@@ -1,4 +1,3 @@
-@use "root-vars";
 @use "sass/button-mixins" as button;
 
 label,