diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
index cca1e773d..fec94b539 100644
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@@ -23,7 +23,6 @@ export default defineUserConfig<DefaultThemeOptions>({
     editLinks: true,
     editLinkText: "帮助我们改善此页面！",
     enableToggle: true,
-    ToggleText: "切换主题",
     navbar: [
       { text: "首页", link: "/" },
       { text: "大史记", link: "/about/news.md" },
@@ -159,6 +158,11 @@ export default defineUserConfig<DefaultThemeOptions>({
     themePlugins: {
       git: process.env.NODE_ENV === "production",
     },
+    locales: {
+      "/": {
+        ToggleText: "切换主题",
+      },
+    },
   },
   markdown: {
     toc: {
diff --git a/docs/.vuepress/theme/components/ThemeToggle.vue b/docs/.vuepress/theme/components/ThemeToggle.vue
index 31ed317b4..732167b2a 100644
--- a/docs/.vuepress/theme/components/ThemeToggle.vue
+++ b/docs/.vuepress/theme/components/ThemeToggle.vue
@@ -10,8 +10,8 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { ThemeOptions } from "../index";
-declare const __LAYOUT__OPTIONS__: ThemeOptions;
+import { useThemeLocaleData } from "@vuepress/plugin-theme-data/lib/composables";
+import { ToggleOptions } from "../types";
 
 export default defineComponent({
   data() {
@@ -21,8 +21,9 @@ export default defineComponent({
     };
   },
   mounted() {
-    this.enable = __LAYOUT__OPTIONS__.enableToggle;
-    this.text = __LAYOUT__OPTIONS__.ToggleText;
+    const option = useThemeLocaleData<ToggleOptions>();
+    this.enable = option.value.enableToggle;
+    this.text = option.value.ToggleText;
   },
   methods: {
     toggleTheme() {
diff --git a/docs/.vuepress/theme/index.ts b/docs/.vuepress/theme/index.ts
index 0b1e81479..3b23e845a 100644
--- a/docs/.vuepress/theme/index.ts
+++ b/docs/.vuepress/theme/index.ts
@@ -1,21 +1,13 @@
 import { path } from "@vuepress/utils";
 import { Theme } from "@vuepress/core";
 
-export interface ThemeOptions {
-  enableToggle?: boolean;
-  ToggleText?: string;
-}
-
-export const docsPlugin: Theme<ThemeOptions> = (options, app) => {
+export const docsPlugin: Theme = (options, app) => {
   return {
     name: "xray-docs-theme",
     extends: "@vuepress/theme-default",
     layouts: {
       Layout: path.resolve(__dirname, "layouts/Layout.vue"),
     },
-    define: {
-      __LAYOUT__OPTIONS__: options,
-    },
     clientAppEnhanceFiles: path.resolve(__dirname, "clientAppEnhance.ts"),
     plugins: [["@vuepress/plugin-palette", { preset: "sass" }]],
   };
diff --git a/docs/.vuepress/theme/layouts/Layout.vue b/docs/.vuepress/theme/layouts/Layout.vue
index c02848547..863aa14ae 100644
--- a/docs/.vuepress/theme/layouts/Layout.vue
+++ b/docs/.vuepress/theme/layouts/Layout.vue
@@ -29,7 +29,3 @@ export default defineComponent({
   },
 });
 </script>
-
-<style lang="sass">
-//@import "../styles/default/index.scss"
-</style>
diff --git a/docs/.vuepress/theme/types/index.ts b/docs/.vuepress/theme/types/index.ts
new file mode 100644
index 000000000..934fd7345
--- /dev/null
+++ b/docs/.vuepress/theme/types/index.ts
@@ -0,0 +1 @@
+export * from "./toggle";
diff --git a/docs/.vuepress/theme/types/toggle.ts b/docs/.vuepress/theme/types/toggle.ts
new file mode 100644
index 000000000..ecfadae95
--- /dev/null
+++ b/docs/.vuepress/theme/types/toggle.ts
@@ -0,0 +1,4 @@
+export interface ToggleOptions {
+  enableToggle?: boolean;
+  ToggleText?: string;
+}