From 09f668fc99e75e7f13ec76a75b3385c64e97d911 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Wed, 26 Mar 2025 17:11:28 -0400
Subject: [PATCH] Workaround for dark mode

---
 docs/_includes/svgs/theme.njk       |  2 +-
 docs/assets/components/scoped.js    | 13 +++++++++++++
 docs/assets/scripts/theme-picker.js |  1 +
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/docs/_includes/svgs/theme.njk b/docs/_includes/svgs/theme.njk
index 02c2db1dc..92b39caff 100644
--- a/docs/_includes/svgs/theme.njk
+++ b/docs/_includes/svgs/theme.njk
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}.css">
     <link rel="stylesheet" href="/assets/styles/theme-icons.css">
 
-    <div class="theme-icon theme-overall-icon wa-theme-{{ themeId }}" role="presentation" data-no-anchor data-no-outline>
+    <div class="theme-icon theme-overall-icon" role="presentation" data-no-anchor data-no-outline>
       <div class="row row-1">
         <h2>Aa</h2>
         <div class="swatches">
diff --git a/docs/assets/components/scoped.js b/docs/assets/components/scoped.js
index 450dba2f4..e97e62096 100644
--- a/docs/assets/components/scoped.js
+++ b/docs/assets/components/scoped.js
@@ -18,6 +18,9 @@ export default class WaScoped extends HTMLElement {
 
   connectedCallback() {
     this.render();
+    this.ownerDocument.documentElement.addEventListener('wa-color-scheme-change', e =>
+      this.#applyDarkMode(e.detail.dark),
+    );
   }
 
   render() {
@@ -47,10 +50,20 @@ export default class WaScoped extends HTMLElement {
     this.shadowRoot.append(...nodes);
 
     this.#fixStyles();
+    this.#applyDarkMode();
 
     this.observer.observe(this, { childList: true, subtree: true, characterData: true });
   }
 
+  #applyDarkMode(isDark = getComputedStyle(this).colorScheme === 'dark') {
+    // Hack to make dark mode work
+    // NOTE If any child nodes actually have .wa-dark, this will override it
+    for (let node of this.shadowRoot.children) {
+      node.classList.toggle('wa-dark', isDark);
+    }
+    this.classList.toggle('wa-dark', isDark);
+  }
+
   /**
    * @font-face does not work in shadow DOM in Chrome & FF, as of March 2025 https://issues.chromium.org/issues/41085401
    * This works around this issue by traversing the shadow DOM CSS looking
diff --git a/docs/assets/scripts/theme-picker.js b/docs/assets/scripts/theme-picker.js
index f1d69e1e6..d5a7e541d 100644
--- a/docs/assets/scripts/theme-picker.js
+++ b/docs/assets/scripts/theme-picker.js
@@ -118,6 +118,7 @@ const colorScheme = new ThemeAspect({
     domChange(() => {
       let dark = this.computedValue === 'dark';
       document.documentElement.classList.toggle(`wa-dark`, dark);
+      document.documentElement.dispatchEvent(new CustomEvent('wa-color-scheme-change', { detail: { dark } }));
     });
   },
 });