From 9c5c9affb60b0db53ea623612b10e4a02ce0fef2 Mon Sep 17 00:00:00 2001
From: Vitaly <vitaly.raichev@epicmax.co>
Date: Fri, 28 Apr 2023 12:49:43 +0300
Subject: [PATCH] [#3375] Unexpected theme change on Colors page (#3376)

* fix(#3375): theme component on colors page

* fix(#3375): useTheme
---
 packages/docs/composables/useTheme.ts         |  3 ++-
 .../styles/colors/components/theme.vue        | 20 +++++++++----------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/docs/composables/useTheme.ts b/packages/docs/composables/useTheme.ts
index 44be1f5b86..80c312491d 100644
--- a/packages/docs/composables/useTheme.ts
+++ b/packages/docs/composables/useTheme.ts
@@ -13,9 +13,10 @@ export const useTheme = () => {
     }
 
     if (cookie.value) {
-      applyPreset(colorMode.value)
+      applyPreset(cookie.value)
       return
     }
+
     if (!colorMode.unknown) {
       applyPreset(colorMode.value)
     }
diff --git a/packages/docs/page-config/styles/colors/components/theme.vue b/packages/docs/page-config/styles/colors/components/theme.vue
index c406d7a00d..53f7ea88e6 100644
--- a/packages/docs/page-config/styles/colors/components/theme.vue
+++ b/packages/docs/page-config/styles/colors/components/theme.vue
@@ -19,7 +19,7 @@
       Primary color
       <va-color-palette
         v-model="primaryColor"
-        class="ml-2"
+        class="!ml-2"
         :palette="primaryColorVariants"
       />
     </p>
@@ -32,13 +32,9 @@ import { useColors } from "vuestic-ui";
 
 export default {
   setup() {
-    const { presets, applyPreset, colors } = useColors();
-
-    const savedTheme = (typeof localStorage !== 'undefined' && localStorage.getItem("vuestic-docs-theme")?.toLowerCase())
+    const { presets, applyPreset, colors, currentPresetName } = useColors();
 
-    const theme = ref(
-      savedTheme || "light"
-    );
+    const theme = ref(currentPresetName.value || "light");
 
     watchEffect(() => {
       applyPreset(theme.value);
@@ -56,10 +52,12 @@ export default {
 
     return {
       theme,
-      themeOptions: Object.keys(presets.value).map((themeName) => ({
-        value: themeName,
-        label: themeName,
-      })),
+      themeOptions: Object.keys(presets.value)
+        .filter((themeName) => themeName !== 'landing')
+        .map((themeName) => ({
+          value: themeName,
+          label: themeName,
+        })),
 
       primaryColor,
       primaryColorVariants,