[#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,