diff --git a/docs/_includes/color-scheme-selector.njk b/docs/_includes/color-scheme-selector.njk
index 82e82bfdf..ab9508a89 100644
--- a/docs/_includes/color-scheme-selector.njk
+++ b/docs/_includes/color-scheme-selector.njk
@@ -1,5 +1,5 @@
 {# Color scheme selector #}
-<wa-dropdown id="color-scheme-selector">
+<wa-dropdown class="color-scheme-selector">
   <wa-button slot="trigger" appearance="filled" size="small" pill caret title="Press \ to toggle">
     <wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
     <wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
diff --git a/docs/assets/scripts/color-scheme.js b/docs/assets/scripts/color-scheme.js
index 8c437f1da..74995b82d 100644
--- a/docs/assets/scripts/color-scheme.js
+++ b/docs/assets/scripts/color-scheme.js
@@ -14,12 +14,15 @@
   }
 
   function updateSelection() {
-    const menu = document.querySelector('#color-scheme-selector wa-menu');
-    if (!menu) return;
-    [...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
-      await customElements.whenDefined(item.localName);
-      await item.updateComplete;
-      item.checked = item.getAttribute('value') === colorScheme;
+    const menus = document.querySelectorAll('.color-scheme-selector wa-menu');
+
+    menus.forEach(menu => {
+      if (!menu) return;
+      [...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
+        await customElements.whenDefined(item.localName);
+        await item.updateComplete;
+        item.checked = item.getAttribute('value') === colorScheme;
+      });
     });
   }
 
@@ -27,14 +30,16 @@
 
   // Selection is not preserved when changing page, so update when opening dropdown
   document.addEventListener('wa-show', event => {
-    const colorSchemeSelector = event.target.closest('#color-scheme-selector');
+    const colorSchemeSelector = event.target.closest('.color-scheme-selector');
     if (!colorSchemeSelector) return;
     updateSelection();
   });
 
   // Listen for selections
   document.addEventListener('wa-select', event => {
-    const menu = event.target.closest('#color-scheme-selector wa-menu');
+    const selector = event.target.closest('.color-scheme-selector');
+    const menu = selector?.querySelector('wa-menu');
+    console.log(menu);
     if (!menu) return;
     setColorScheme(event.detail.item.value);
   });