diff --git a/packages/index.ts b/packages/index.ts
index 53f0eda..bc29a27 100644
--- a/packages/index.ts
+++ b/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
 };
diff --git a/packages/theme/src/IndexPage.vue b/packages/theme/src/IndexPage.vue
index 49fdf06..ea4a9a3 100644
--- a/packages/theme/src/IndexPage.vue
+++ b/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>
diff --git a/packages/theme/types.ts b/packages/theme/types.ts
new file mode 100644
index 0000000..de3a620
--- /dev/null
+++ b/packages/theme/types.ts
@@ -0,0 +1,7 @@
+export enum ThemeDefinedMode {
+    AUTO = 0,
+    LIGHT = 1,
+    DARK = 2
+}
+
+export const themeModeName = 'theme_name';
\ No newline at end of file