diff --git a/demo/app-root.ts b/demo/app-root.ts
index 0d69554..5746ed3 100644
--- a/demo/app-root.ts
+++ b/demo/app-root.ts
@@ -11,6 +11,12 @@ export class AppRoot extends LitElement {
     return html`
       <h1>🏛️ Internet Archive Elements ⚛️</h1>
 
+      <fieldset>
+        <legend>Settings</legend>
+        <label for="darkModeToggle">Dark Mode</label>
+        <input type="checkbox" switch @change=${this.toggleDarkMode} />
+      </fieldset>
+
       <h2>🚀 Production-Ready Elements</h2>
 
       <ia-status-indicator-story></ia-status-indicator-story>
@@ -21,4 +27,13 @@ export class AppRoot extends LitElement {
       <ia-button-story></ia-button-story>
     `;
   }
+
+  private toggleDarkMode(event: Event) {
+    const checkbox = event.target as HTMLInputElement;
+    if (checkbox.checked) {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }
 }
diff --git a/demo/index.css b/demo/index.css
index ce98d39..eabf09e 100644
--- a/demo/index.css
+++ b/demo/index.css
@@ -13,9 +13,23 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+:root.dark {
+  color-scheme: dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  --ia-theme-primary-background-color: #242424;
+  --ia-theme-secondary-background-color: #1e1e1e;
+  --ia-theme-primary-text-color: rgba(255, 255, 255, 0.87);
+  --ia-theme-secondary-text-color: #a0a0a0;
+  --ia-theme-link-color: #4b64ff;
+  --ia-theme-primary-cta-fill: #4b64ff;
+  --ia-theme-primary-cta-text-color: #ffffff;
+}
+
 a {
   font-weight: 500;
-  color: #646cff;
+  color: var(--ia-theme-link-color);
   text-decoration: inherit;
 }
 
diff --git a/demo/story-template.ts b/demo/story-template.ts
index 3dd5ff6..21484f7 100644
--- a/demo/story-template.ts
+++ b/demo/story-template.ts
@@ -110,6 +110,7 @@ import { ${this.elementClassName} } from '${this.modulePath}';
           height: 12px;
           transform: rotate(-90deg);
           transition: transform 0.2s ease-in-out;
+          filter: invert(0.5);
         }
 
         .disclosure-arrow.open {