Merge pull request #1 from beclab/feat/theme

feat: add theme mode define

packages/index.ts

@@ -19,6 +19,7 @@ import BtDialog from "./dialog";
 import { NotifyDefinedType } from "./notify/type";
 import BtTheme from "./theme";
 import useColor from "./utils/useColor";
+import { ThemeDefinedMode, themeModeName } from './theme/types'
 
 const components = [
 	BtButton,
@@ -90,5 +91,7 @@ export {
 	NotifyDefinedType,
 	BtDialog,
 	BtTheme,
-	useColor
+	useColor,
+    ThemeDefinedMode,
+    themeModeName
 };

packages/theme/src/IndexPage.vue

@@ -9,6 +9,7 @@
 <script setup lang="ts">
 import { watchEffect, ref, defineProps } from "vue";
 import { useQuasar, setCssVar, getCssVar, colors } from "quasar";
+import { themeModeName, ThemeDefinedMode } from '../types';
 
 interface Props {
 	showThemeToggle: boolean;
@@ -129,12 +130,22 @@ watchEffect(() => {
 		});
 	}
 });
+
+const themeValue = $q.cookies.get(themeModeName);
+if (themeValue) {
+    const theme = Number(themeValue);
+    if (theme == ThemeDefinedMode.AUTO) {
+        $q.dark.set('auto');
+    } else {
+        $q.dark.set(theme == ThemeDefinedMode.DARK);
+    }
+}
 </script>
 <script lang="ts">
 import { defineComponent } from "vue";
 
 export default defineComponent({
-	name: "BtTheme"
+    name: "BtTheme"
 });
 </script>
 <style></style>

packages/theme/types.ts

@@ -0,0 +1,7 @@
+export enum ThemeDefinedMode {
+    AUTO = 0,
+    LIGHT = 1,
+    DARK = 2
+}
+
+export const themeModeName = 'theme_name';