From 7562905bbfebb5960e5b36a61434b5a167ff6493 Mon Sep 17 00:00:00 2001
From: Kelsey Jackson <kelseythej@gmail.com>
Date: Fri, 5 Jan 2024 15:20:33 -0600
Subject: [PATCH] made updates

---
 docs/pages/experimental/themer.md | 19 +++++++++++++++----
 src/themes/classic.css            |  4 ++--
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/docs/pages/experimental/themer.md b/docs/pages/experimental/themer.md
index 3cc7fa4ea..faaaa3993 100644
--- a/docs/pages/experimental/themer.md
+++ b/docs/pages/experimental/themer.md
@@ -11,7 +11,7 @@ toc: false
     <a href="/">{% include 'logo.njk' %}</a>
     <wa-select name="theme" label="Theme" value="default">
       <wa-option value="default">Default</wa-option>
-      <wa-option value="default">Classic</wa-option>
+      <wa-option value="classic">Classic</wa-option>
       <wa-option value="glassy">Glassy</wa-option>
       <wa-option value="mellow">Mellow</wa-option>
       <wa-option value="playful">Playful</wa-option>
@@ -47,10 +47,21 @@ toc: false
 <script>
   const container = document.getElementById('knobs');
   const themeStylesheet = document.getElementById('theme-stylesheet');
+  const themeSelect = container.querySelector('[name="theme"]');
+  const darkModeSelect = container.querySelector('[name="appearance"]');
 
   // Theme
-  container.querySelector('[name="theme"]').addEventListener('wa-change', event => {
+  themeSelect.addEventListener('wa-change', event => {
+    const el = document.documentElement
+    const theme = themeSelect.value
+  
     themeStylesheet.href = `/dist/themes/${event.target.value}.css`;
+    
+    if (darkModeSelect.checked === true) {
+      darkModeSelect.checked = false
+      el.className = 'flavor-html'
+    }
+    
   });
   
   // Heading text
@@ -84,9 +95,9 @@ toc: false
   });
 
   // Light & Dark Mode
-  container.querySelector('[name="appearance"]').addEventListener('wa-change', event => {
+  darkModeSelect.addEventListener('wa-change', event => {
     const el = document.documentElement
-    const theme = container.querySelector('[name="theme"]').value
+    const theme = themeSelect.value
     if(theme === 'chic') {
       el.classList.toggle(`wa-theme-${theme}-light`);
     } else {
diff --git a/src/themes/classic.css b/src/themes/classic.css
index 1aa0b8a2c..9d490e30a 100644
--- a/src/themes/classic.css
+++ b/src/themes/classic.css
@@ -323,8 +323,8 @@
   --wa-tooltip-arrow-size: 0.375rem;
 }
 
-.wa-theme-default-dark,
-.wa-theme-default-dark :host {
+.wa-theme-classic-dark,
+.wa-theme-classic-dark :host {
   color-scheme: dark;
 
   /**