diff --git a/docs/_includes/default.njk b/docs/_includes/default.njk
index d15ee2cd5..8c1f166f3 100644
--- a/docs/_includes/default.njk
+++ b/docs/_includes/default.njk
@@ -37,6 +37,15 @@
     <link rel="stylesheet" href="/dist/themes/default.css" />
     <script type="module" src="/dist/autoloader.js"></script>
 
+    {# Set the initial theme and menu states here to prevent flashing #}
+    <script>
+      (() => {
+        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+        const theme = localStorage.getItem('theme') || 'auto';
+        document.documentElement.classList.toggle('wa-theme-default-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
+      })();
+    </script>
+
     {# Web Fonts #}
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk
index 19c3e5724..bd7ce74ad 100644
--- a/docs/_includes/sidebar.njk
+++ b/docs/_includes/sidebar.njk
@@ -3,6 +3,18 @@
     <h2>Experimental</h2>
     <ul>
       <li><a href="/experimental/themer">Themer</a></li>
+      <li style="margin-top: .5rem;"><wa-switch id="theme-toggle">Dark mode</wa-switch></li>
+      <script>
+        document.getElementById('theme-toggle').checked = document.documentElement.classList.contains('wa-theme-default-dark');
+
+        // Quick hack to show light/dark themes
+        document.addEventListener('wa-change', event => {
+          if (event.target.closest('wa-switch') === document.getElementById('theme-toggle')) {
+            document.documentElement.classList.toggle('wa-theme-default-dark');
+            localStorage.setItem('theme', document.documentElement.classList.contains('wa-theme-default-dark') ? 'dark' : 'light')
+          }
+        });
+      </script>
     </ul>
   </li>
   <li>
diff --git a/docs/assets/scripts/code-previews.js b/docs/assets/scripts/code-previews.js
index e1b3ab28e..5564ede72 100644
--- a/docs/assets/scripts/code-previews.js
+++ b/docs/assets/scripts/code-previews.js
@@ -166,9 +166,6 @@
       const htmlExample = codeBlock.querySelector('.code-preview__source--html > pre > code')?.textContent;
       const reactExample = codeBlock.querySelector('.code-preview__source--react > pre > code')?.textContent;
       const isReact = flavor === 'react' && typeof reactExample === 'string';
-      const theme = document.documentElement.classList.contains('wa-theme-dark') ? 'dark' : 'light';
-      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-      const isDark = theme === 'dark' || (theme === 'auto' && prefersDark);
       const editors = isReact ? '0010' : '1000';
       let htmlTemplate = '';
       let jsTemplate = '';
@@ -204,9 +201,7 @@
 
       // CSS templates
       cssTemplate =
-        `@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${waVersion}/${cdndir}/themes/${
-          isDark ? 'dark' : 'light'
-        }.css';\n` +
+        `@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${waVersion}/${cdndir}/themes/default.css';\n` +
         '\n' +
         'body {\n' +
         '  font: var(--wa-font-size-root) sans-serif;\n' +
@@ -222,7 +217,6 @@
         tags: ['web awesome', 'web components'],
         editors,
         head: `<meta name="viewport" content="width=device-width">`,
-        html_classes: `wa-theme-${isDark ? 'dark' : 'light'}`,
         css_external: ``,
         js_external: ``,
         js_module: true,
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index bdeb0822b..63a1a9ae4 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -23,11 +23,6 @@
 }
 
 /* Utils */
-html.wa-theme-dark .only-light,
-html:not(.wa-theme-dark) .only-dark {
-  display: none !important;
-}
-
 .visually-hidden:not(:focus-within) {
   position: absolute !important;
   width: 1px !important;
diff --git a/docs/pages/getting-started/installation.md b/docs/pages/getting-started/installation.md
index 99e52f83b..9d2aceb10 100644
--- a/docs/pages/getting-started/installation.md
+++ b/docs/pages/getting-started/installation.md
@@ -43,7 +43,7 @@ The traditional CDN loader registers all Web Awesome elements up front. Note tha
 
 ### Dark Theme
 
-The code above will load the light theme. If you want to use the [dark theme](/getting-started/themes#dark-theme) instead, update the stylesheet as shown below and add `<html class="wa-theme-dark">` to your page.
+The code above will load the light theme. If you want to use the [dark theme](/getting-started/themes#dark-theme) instead, update the stylesheet as shown below and add `<html class="wa-theme-default-dark">` to your page.
 
 <!-- prettier-ignore -->
 ```html
@@ -64,7 +64,7 @@ If you want to load the light or dark theme based on the user's `prefers-color-s
   rel="stylesheet"
   media="(prefers-color-scheme:dark)"
   href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/themes/dark.css"
-  onload="document.documentElement.classList.add('wa-theme-dark');"
+  onload="document.documentElement.classList.add('wa-theme-default-dark');"
 />
 ```
 
diff --git a/docs/pages/getting-started/themes.md b/docs/pages/getting-started/themes.md
index be4e5abf6..11132aaf9 100644
--- a/docs/pages/getting-started/themes.md
+++ b/docs/pages/getting-started/themes.md
@@ -16,7 +16,7 @@ For component developers, built-in themes are also available as JavaScript modul
 
 ## Theme Basics
 
-All themes are scoped to classes using the `sl-theme-{name}` convention, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use `wa-theme-light` and `wa-theme-dark`, respectively. A custom theme called "Purple Power", for example, would use a class called `sl-theme-purple-power`
+All themes are scoped to classes using the `sl-theme-{name}` convention, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included light and dark themes use `wa-theme-default-light` and `wa-theme-default-dark`, respectively. A custom theme called "Purple Power", for example, would use a class called `sl-theme-purple-power`
 
 All selectors must be scoped to the theme's class to ensure interoperability with other themes. You should also scope them to `:host` so they can be imported and applied to custom element shadow roots.
 
@@ -32,7 +32,7 @@ All selectors must be scoped to the theme's class to ensure interoperability wit
 To activate a theme, import it and apply the theme's class to the `<html>` element. This example imports and activates the built-in dark theme.
 
 ```html
-<html class="wa-theme-dark">
+<html class="wa-theme-default-dark">
   <head>
     <link rel="stylesheet" href="path/to/shoelace/%NPMDIR%/themes/dark.css" />
   </head>
@@ -59,7 +59,7 @@ You can activate themes on various containers throughout the page. This example
   </head>
 
   <body>
-    <nav class="wa-theme-dark">
+    <nav class="wa-theme-default-dark">
       <!-- dark-themed sidebar -->
     </nav>
 
@@ -83,7 +83,7 @@ If you're customizing the light theme, you should scope your styles to the follo
 ```css
 :root,
 :host,
-.wa-theme-light {
+.wa-theme-default-light {
   /* your custom styles here */
 }
 ```
@@ -92,7 +92,7 @@ If you're customizing the dark theme, you should scope your styles to the follow
 
 ```css
 :host,
-.wa-theme-dark {
+.wa-theme-default-dark {
   /* your custom styles here */
 }
 ```
@@ -133,10 +133,10 @@ To install the dark theme, add the following to the `<head>` section of your pag
 />
 ```
 
-To activate the theme, apply the `wa-theme-dark` class to the `<html>` element.
+To activate the theme, apply the `wa-theme-default-dark` class to the `<html>` element.
 
 ```html
-<html class="wa-theme-dark">
+<html class="wa-theme-default-dark">
   ...
 </html>
 ```
diff --git a/src/themes/default.css b/src/themes/default.css
index d8ca0ca78..32797b12c 100644
--- a/src/themes/default.css
+++ b/src/themes/default.css
@@ -1,6 +1,6 @@
 :root,
 :host,
-.wa-theme-default {
+.wa-theme-default-light {
   color-scheme: light;
 
   /**