From 89ec4df6a5a47d1cc9b8777f5c21690a336e1b33 Mon Sep 17 00:00:00 2001
From: rhld16 <24809571+rhld16@users.noreply.github.com>
Date: Fri, 19 Dec 2025 23:51:33 +0000
Subject: [PATCH] fix(themeHandler): properly keep track of color theme when
 using preset (#4459)

---
 docs/.vitepress/theme/components/ColorPicker.vue | 5 +++--
 docs/.vitepress/theme/themes/themeHandler.ts     | 5 -----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/docs/.vitepress/theme/components/ColorPicker.vue b/docs/.vitepress/theme/components/ColorPicker.vue
index a4102dace..efafa54ba 100644
--- a/docs/.vitepress/theme/components/ColorPicker.vue
+++ b/docs/.vitepress/theme/components/ColorPicker.vue
@@ -202,6 +202,7 @@ onMounted(async () => {
 })
 
 watch(selectedColor, async (color) => {
+  if (!color) return;
   const theme = generateThemeFromColor(color)
   themeRegistry[`color-${color}`] = theme
   // Explicitly set the theme to override any previous selection
@@ -225,7 +226,7 @@ const toggleAmoled = () => {
         <button
           :class="[
             'inline-block w-6 h-6 rounded-full transition-all duration-200 border-2',
-            selectedColor === color
+            (themeName && themeName.value === `color-${color}`)
               ? 'border-slate-200 dark:border-slate-400 shadow-lg'
               : 'border-transparent'
           ]"
@@ -248,7 +249,7 @@ const toggleAmoled = () => {
               ? 'border-slate-200 dark:border-slate-400 shadow-lg'
               : 'border-transparent'
           ]"
-          @click="setTheme(t)"
+          @click="selectedColor = '' as ColorNames; setTheme(t)"
           :title="themeRegistry[t].displayName"
         >
           <span
diff --git a/docs/.vitepress/theme/themes/themeHandler.ts b/docs/.vitepress/theme/themes/themeHandler.ts
index e7e56b2bf..682f6c7f7 100644
--- a/docs/.vitepress/theme/themes/themeHandler.ts
+++ b/docs/.vitepress/theme/themes/themeHandler.ts
@@ -97,11 +97,6 @@ export class ThemeHandler {
     if (mode === 'dark' && this.amoledEnabled.value) {
       root.classList.add('amoled')
     }
-    
-    // Add dark class for backward compatibility with VitePress
-    if (mode === 'dark') {
-      root.classList.add('dark')
-    }
   }
 
   private applyCSSVariables(colors: ModeColors, theme: Theme) {