finish basic sidebar

src/stores/counter.ts

@@ -10,3 +10,4 @@ export const useCounterStore = defineStore('counter', () => {
 
   return { count, doubleCount, increment }
 })
+

src/stores/theme.ts

@@ -0,0 +1,47 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useThemeStore = defineStore('theme', () => {
+  const allTheme = ["winter", "night"]
+  const darkTheme = "night";
+  const lightTheme = "winter";
+  const currentTheme = ref("night")
+
+  function setTheme(theme: string) {
+    const isContained: boolean = allTheme.includes(theme)
+    if (isContained) {
+      currentTheme.value = theme
+    }
+    else {
+      console.error('Not have such theme: ${theme}')
+    }
+  }
+
+  function toggleTheme() {
+    if (currentTheme.value == darkTheme) {
+      currentTheme.value = lightTheme;
+    } else if (currentTheme.value == lightTheme) {
+      currentTheme.value = darkTheme;
+    } else {
+      currentTheme.value = lightTheme;
+    }
+  }
+
+  function isDarkTheme(): boolean {
+    return currentTheme.value == darkTheme
+  }
+
+  function isLightTheme(): boolean {
+    return currentTheme.value == lightTheme
+  }
+
+  return {
+    allTheme,
+    currentTheme,
+    setTheme,
+    toggleTheme,
+    isDarkTheme,
+    isLightTheme
+  }
+})
+