[ACTV-277] Fix dark mode support in tours

ankihub/gui/tutorial.py

@@ -1288,11 +1288,11 @@ def _steps(self) -> list[TutorialStep]:
         media_base = f"/_addons/{aqt.mw.addonManager.addonFromModule(__name__)}/gui/web/media"
         steps.append(
             QtTutorialStep(
-                body="Suspended cards won't appear in study sessions. In the Browser, "
+                body="<b>Suspended cards</b> won't appear in study sessions. In the Browser, "
                 "they're shown with a <span style='background-color: #FFE77E'>yellow background</span>.<br><br>"
                 "During the tour, you can’t perform actions. Normally, to unsuspend a card, "
                 "you would right-click it and uncheck <b>Toggle Suspend</b>.<br><br>"
-                "Click Next and we'll unsuspend a card for you as an example.<br><br>"
+                "Click <b>Next</b> and we'll unsuspend a card for you as an example.<br><br>"
                 f"<img src='{media_base}/toggle_suspend.png'>",
                 qt_target=lambda: self._browser.form.tableView,
                 parent_widget=lambda: self._browser,

scripts/build.py

@@ -74,6 +74,10 @@
 @source "../../../ankihub/gui/tutorial.py";
 """
 web_css = re.sub("@source .*", tailwind_sources, web_css)
+# Replace :root with :host as tutorial runs in a shadow root
+web_css = re.sub(r":root\[(.*?)\]", r":host([\1])", web_css)
+web_css = web_css.replace(":root", ":host")
+web_css = web_css.replace(".dark", ":host(.dark)")
 WEB_CSS_TARGET.write_text(web_css, encoding="utf-8")
 subprocess.run([shutil.which("npm"), "install"], cwd=PROJECT_ROOT / "tutorial", check=True)
 subprocess.run([shutil.which("npm"), "run", "build"], cwd=PROJECT_ROOT / "tutorial", check=True)

tutorial/lib/tutorial.css

@@ -3,10 +3,6 @@
     transition: background-color 0.3s ease;
 }
 
-.night_mode .ah-spotlight-active {
-    background-color: #1f2937;
-}
-
 .ah-spotlight-active.ah-with-backdrop {
     backdrop-filter: brightness(2);
     z-index: 10001 !important;

tutorial/lib/tutorial.ts

@@ -120,6 +120,9 @@ export class TutorialEffect {
 
     async create() {
         this.hostElement = document.createElement("div");
+        if (document.documentElement.classList.contains("night-mode")) {
+            this.hostElement.classList.add("dark");
+        }
         this.hostElement.style.position = "fixed";
         this.hostElement.style.top = "0";
         this.hostElement.style.left = "0";
@@ -173,11 +176,10 @@ export class TutorialEffect {
 
         }
 
-        const css = tailwindCss.replaceAll(":root", ":host");
-        injectPropertyRulesIntoDocument(css);
-        injectFontImportsIntoDocument(css);
+        injectPropertyRulesIntoDocument(tailwindCss);
+        injectFontImportsIntoDocument(tailwindCss);
         const style = document.createElement("style");
-        style.textContent = css;
+        style.textContent = tailwindCss;
         this.shadowRoot.append(style);
         Alpine.initTree(this.modalElement);
     }