Workaround for dark mode

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">

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

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 } }));
     });
   },
 });