From 22e548f452acc15e6b2458ba5e08067778b15886 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Fri, 8 Sep 2023 14:40:58 +0800
Subject: [PATCH] chore: upadte to use composables

---
 .../.vitepress/theme/layout/ThemingLayout.vue | 23 ++-----------------
 apps/www/src/stores/config.ts                 |  5 ++--
 2 files changed, 5 insertions(+), 23 deletions(-)

diff --git a/apps/www/.vitepress/theme/layout/ThemingLayout.vue b/apps/www/.vitepress/theme/layout/ThemingLayout.vue
index 416f0ced..e7172aaf 100644
--- a/apps/www/.vitepress/theme/layout/ThemingLayout.vue
+++ b/apps/www/.vitepress/theme/layout/ThemingLayout.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onMounted, watch } from 'vue'
-import { useDark } from '@vueuse/core'
 import { Paintbrush } from 'lucide-vue-next'
+import { useData } from 'vitepress'
 import PageHeader from '../components/PageHeader.vue'
 import PageHeaderHeading from '../components/PageHeaderHeading.vue'
 import PageHeaderDescription from '../components/PageHeaderDescription.vue'
@@ -47,26 +47,7 @@ const allColors: Color[] = [
 ]
 
 const { theme, radius, setRadius, setTheme } = useConfigStore()
-
-const isDark = useDark()
-
-// Store an object called config in local storage with the theme and radius values
-watch([theme, radius], ([theme, radius]) => {
-  localStorage.setItem(
-    'config',
-    JSON.stringify({
-      theme,
-      radius,
-    }),
-  )
-})
-
-// If there is a config object in local storage, set the theme and radius values to the values in local storage
-if (localStorage.getItem('config')) {
-  const config = JSON.parse(localStorage.getItem('config')!)
-  setTheme(config.theme)
-  setRadius(config.radius)
-}
+const { isDark } = useData()
 
 // Whenever the component is mounted, update the document class list
 onMounted(() => {
diff --git a/apps/www/src/stores/config.ts b/apps/www/src/stores/config.ts
index 62ae9185..08fa35ad 100644
--- a/apps/www/src/stores/config.ts
+++ b/apps/www/src/stores/config.ts
@@ -1,4 +1,5 @@
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
+import { useSessionStorage } from '@vueuse/core'
 import type { Theme } from './../lib/registry/themes'
 
 interface Config {
@@ -9,7 +10,7 @@ interface Config {
 export const RADII = [0, 0.25, 0.5, 0.75, 1]
 
 export function useConfigStore() {
-  const config = ref<Config>({
+  const config = useSessionStorage<Config>('config', {
     theme: 'zinc',
     radius: 0.5,
   })