[#3375] Unexpected theme change on Colors page (#3376)

* fix(#3375): theme component on colors page * fix(#3375): useTheme
epicmaxco · Apr 28, 2023 · 9c5c9af · 9c5c9af
1 parent 8c10ca7
commit 9c5c9af
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git 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
@@ -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,