From 80a64c684d868fcd38b1cd15e6fedae21a337a14 Mon Sep 17 00:00:00 2001
From: Jason Buckner <jason@jasonbuckner.com>
Date: Tue, 13 Jan 2026 17:15:58 -0800
Subject: [PATCH 1/2] Update dark mode demo

---
 demo/app-root.ts       | 15 +++++++++++++++
 demo/index.css         | 16 +++++++++++++++-
 demo/story-template.ts |  1 +
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/demo/app-root.ts b/demo/app-root.ts
index 0d69554..cc8b63b 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>
     `;
   }
+
+  _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 {

From 481331ced723aa1f884d7cfb65c8b40f841cf768 Mon Sep 17 00:00:00 2001
From: Jason Buckner <jason@jasonbuckner.com>
Date: Tue, 13 Jan 2026 17:17:05 -0800
Subject: [PATCH 2/2] Update naming

---
 demo/app-root.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/demo/app-root.ts b/demo/app-root.ts
index cc8b63b..5746ed3 100644
--- a/demo/app-root.ts
+++ b/demo/app-root.ts
@@ -14,7 +14,7 @@ export class AppRoot extends LitElement {
       <fieldset>
         <legend>Settings</legend>
         <label for="darkModeToggle">Dark Mode</label>
-        <input type="checkbox" switch @change=${this._toggleDarkMode} />
+        <input type="checkbox" switch @change=${this.toggleDarkMode} />
       </fieldset>
 
       <h2>🚀 Production-Ready Elements</h2>
@@ -28,7 +28,7 @@ export class AppRoot extends LitElement {
     `;
   }
 
-  _toggleDarkMode(event: Event) {
+  private toggleDarkMode(event: Event) {
     const checkbox = event.target as HTMLInputElement;
     if (checkbox.checked) {
       document.documentElement.classList.add('dark');