diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 720000f09..c1e87a222 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -18,6 +18,8 @@ module.exports = {
     docsBranch: "main",
     editLinks: true,
     editLinkText: "帮助我们改善此页面！",
+    themeChange: true,
+    themeChangeText: "切换主题",
     nav: [
       { text: "首页", link: "/" },
       { text: "大史记", link: "/about/news" },
diff --git a/docs/.vuepress/theme/README.md b/docs/.vuepress/theme/README.md
new file mode 100644
index 000000000..4ea07afc9
--- /dev/null
+++ b/docs/.vuepress/theme/README.md
@@ -0,0 +1,3 @@
+# Xray-docs-next dark theme
+
+Fork from https://github.com/tolking/vuepress-theme-default-prefers-color-scheme .
diff --git a/docs/.vuepress/theme/components/NavLinks.vue b/docs/.vuepress/theme/components/NavLinks.vue
new file mode 100644
index 000000000..6e5f6c0d6
--- /dev/null
+++ b/docs/.vuepress/theme/components/NavLinks.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <ParentNavLinks />
+    <nav class="nav-links">
+      <a v-if="enable" class="nav-link" @click.prevent="toggleTheme">{{
+        text
+      }}</a>
+    </nav>
+  </div>
+</template>
+
+<script lang="ts">
+import ParentNavLinks from "@parent-theme/components/NavLinks.vue";
+import NavLink from "@theme/components/NavLink.vue";
+import Vue from "vue";
+
+export default Vue.extend({
+  components: { ParentNavLinks, NavLink },
+  data() {
+    return {
+      enable: false,
+      text: ""
+    };
+  },
+  mounted() {
+    console.log("m");
+    this.enable = this.$themeConfig.themeChange;
+    this.text = this.$themeConfig.themeChangeText;
+  },
+  methods: {
+    toggleTheme() {
+      let html = document.getElementsByTagName("html")[0];
+
+      let theme = html.getAttribute("theme");
+      if (theme == "light") {
+        html.setAttribute("theme", "dark");
+      } else if (theme == "dark") {
+        html.setAttribute("theme", "light");
+      } else {
+        html.setAttribute("theme", "light");
+      }
+    }
+  }
+});
+</script>
diff --git a/docs/.vuepress/theme/index.js b/docs/.vuepress/theme/index.js
new file mode 100644
index 000000000..b4eddc0df
--- /dev/null
+++ b/docs/.vuepress/theme/index.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extend: "@vuepress/theme-default"
+};
diff --git a/docs/.vuepress/theme/layouts/Layout.vue b/docs/.vuepress/theme/layouts/Layout.vue
new file mode 100644
index 000000000..6a8137327
--- /dev/null
+++ b/docs/.vuepress/theme/layouts/Layout.vue
@@ -0,0 +1,17 @@
+<template>
+  <ParentLayout />
+</template>
+
+<script lang="ts">
+import ParentLayout from "@parent-theme/layouts/Layout.vue";
+import Vue from "vue";
+export default Vue.extend({
+  components: {
+    ParentLayout
+  }
+});
+</script>
+
+<style lang="stylus">
+@require '../styles/components.styl'
+</style>
diff --git a/docs/.vuepress/theme/styles/components.styl b/docs/.vuepress/theme/styles/components.styl
new file mode 100644
index 000000000..f5533f7b2
--- /dev/null
+++ b/docs/.vuepress/theme/styles/components.styl
@@ -0,0 +1,176 @@
+// search
+.search-box
+  input
+    color var(--lighten25TextColor)
+    border-color var(--darken10BorderColor)
+    background-color var(--bgColor)
+
+    &:focus
+      border-color var(--accentColor)
+
+  .suggestions
+    background var(--bgColor)
+    border-color var(--darken10BorderColor)
+
+  .suggestion
+    a
+      color var(--lighten35TextColor)
+
+    &.focused
+      background-color var(--darken10BgColor)
+
+      a
+        color var(--accentColor)
+
+.algolia-search-wrapper
+  .algolia-autocomplete
+    .ds-dropdown-menu
+      background var(--bgColor)
+      border-color var(--searchBorderColor)
+
+      &::before
+        border-color var(--searchBorderColor)
+
+      .ds-suggestion
+        border-bottom-color var(--borderColor)
+
+    // .algolia-docsearch-suggestion--highlight
+    // color #2c815b
+    .algolia-docsearch-suggestion
+      border-color var(--borderColor)
+
+      .algolia-docsearch-suggestion--category-header
+        background var(--accentColor)
+        // color #fff
+        // .algolia-docsearch-suggestion--highlight
+        // background rgba(255, 255, 255, 0.6)
+
+      .algolia-docsearch-suggestion--title
+        color var(--textColor)
+
+      .algolia-docsearch-suggestion--subcategory-column
+        border-color var(--borderColor)
+        // background #f1f3f5
+
+    .algolia-docsearch-footer
+      border-color var(--borderColor)
+
+    .ds-cursor .algolia-docsearch-suggestion--content
+      // background-color #e7edf3 !important
+      color var(--textColor)
+
+.dropdown-wrapper
+  .dropdown-title
+  .mobile-dropdown-title
+    color var(--textColor)
+
+  .nav-dropdown
+    .dropdown-item
+      h4
+        border-top-color var(--kbdBgColor)
+
+      a
+        &:hover
+          color var(--accentColor)
+
+        &.router-link-active
+          color var(--accentColor)
+
+          &::after
+            border-left-color var(--accentColor)
+
+@media (max-width: $MQMobile)
+  .dropdown-wrapper .dropdown-title:hover
+    color var(--accentColor)
+
+@media (min-width: $MQMobile)
+  .dropdown-wrapper .dropdown-title .arrow
+    border-top-color var(--arrowBgColor)
+
+  .dropdown-wrapper .nav-dropdown
+    background-color var(--bgColor)
+    border-color var(--borderColor)
+
+// home
+.home
+  .hero
+    .description
+      color var(--lighten40TextColor)
+
+    .action-button
+      // color #fff
+      background-color var(--accentColor)
+      border-bottom-color var(--darken10AccentColor)
+
+      &:hover
+        background-color var(--lighten10AccentColor)
+
+  .features
+    border-top-color var(--borderColor)
+
+  .feature
+    h2
+      color var(--lighten10TextColor)
+
+    p
+      color var(--lighten25TextColor)
+
+  .footer
+    border-top-color var(--borderColor)
+    color var(--lighten25TextColor)
+
+// navbar
+.navbar .site-name
+  color var(--textColor)
+  white-space nowrap
+
+.navbar .links
+  background var(--bgColor)
+
+.nav-links a
+  &:hover
+  &.router-link-active
+    color var(--accentColor)
+
+    @media (min-width: $MQMobile)
+      color var(--textColor)
+
+@media (min-width: $MQMobile)
+  .nav-item > a:not(.external)
+    &:hover
+    &.router-link-active
+      border-bottom-color var(--accentColor)
+
+// page-edit
+.page-edit .edit-link a
+.page-edit .last-updated .prefix
+  color var(--lighten25TextColor)
+
+.page-edit .last-updated .time
+  color var(--lighten40TextColor)
+
+// sidebar
+.sidebar .nav-links
+.page-nav .inner
+  border-color var(--borderColor)
+
+.sidebar-heading
+  color var(--textColor)
+
+  &.clickable
+    &.active
+      color var(--accentColor)
+      border-left-color var(--accentColor)
+
+    &:hover
+      color var(--accentColor)
+
+a.sidebar-link
+  color var(--textColor)
+
+  &:hover
+    color var(--accentColor)
+
+  &.active
+    color var(--accentColor)
+    border-left-color var(--accentColor)
diff --git a/docs/.vuepress/theme/styles/index.styl b/docs/.vuepress/theme/styles/index.styl
new file mode 100644
index 000000000..72b796891
--- /dev/null
+++ b/docs/.vuepress/theme/styles/index.styl
@@ -0,0 +1,329 @@
+@require './palette.styl'
+
+:root
+  --accentColor $accentColor
+  --textColor $textColor
+  --borderColor $borderColor
+  --codeBgColor $codeBgColor
+  --arrowBgColor $arrowBgColor
+  --badgeTipColor $badgeTipColor
+  --badgeWarningColor $badgeWarningColor
+  --badgeErrorColor $badgeErrorColor
+  --bgColor $bgColor
+  --kbdBgColor $kbdBgColor
+  --blockquoteTextColor $blockquoteTextColor
+  --blockquoteBorderColor $blockquoteBorderColor
+  --tableBorderColor $tableBorderColor
+  --tableStripeBgColor $tableStripeBgColor
+  --preTextColor $preTextColor
+  --highlightedBgColor $highlightedBgColor
+  --languageTextColor $languageTextColor
+  --lineNumbersColor $lineNumbersColor
+  --tipColor $tipColor
+  --tipBgColor $tipBgColor
+  --warningColor $warningColor
+  --warningBgColor $warningBgColor
+  --dangerColor $dangerColor
+  --dangerBgColor $dangerBgColor
+  --miniCodeBgColor $miniCodeBgColor
+  --searchBorderColor $searchBorderColor
+  --lighten10AccentColor lighten($accentColor, 10%)
+  --lighten10TextColor lighten($textColor, 10%)
+  --lighten20TextColor lighten($textColor, 20%)
+  --lighten25TextColor lighten($textColor, 25%)
+  --lighten35TextColor lighten($textColor, 35%)
+  --lighten40TextColor lighten($textColor, 40%)
+  --darken10AccentColor darken($accentColor, 10%)
+  --darken10BgColor darken($bgColor, 5%)
+  --darken10BorderColor darken($borderColor, 10%)
+
+  @media (prefers-color-scheme light)
+    --codeBgColor $codeBgLightColor
+    --preTextColor $preTextLightColor
+    --highlightedBgColor $highlightedBgLightColor
+    --languageTextColor $languageTextLightColor
+    --lineNumbersColor $lineNumbersLightColor
+
+  @media (prefers-color-scheme dark)
+    --accentColor $accentDarkColor
+    --textColor $textDarkColor
+    --borderColor $borderDarkColor
+    --arrowBgColor $arrowBgDarkColor
+    --badgeTipColor $badgeTipDarkColor
+    --badgeWarningColor $badgeWarningDarkColor
+    --badgeErrorColor $badgeErrorDarkColor
+    --bgColor $bgDarkColor
+    --kbdBgColor $kbdBgDarkColor
+    --blockquoteTextColor $blockquoteTextDarkColor
+    --blockquoteBorderColor $blockquoteBorderDarkColor
+    --tableBorderColor $tableBorderDarkColor
+    --tableStripeBgColor $tableStripeBgDarkColor
+    --tipColor $tipDarkColor
+    --tipBgColor $tipBgDarkColor
+    --warningColor $warningDarkColor
+    --warningBgColor $warningBgDarkColor
+    --dangerColor $dangerDarkColor
+    --dangerBgColor $dangerBgDarkColor
+    --miniCodeBgColor $miniCodeBgDarkColor
+    --searchBorderColor $searchBorderDarkColor
+    --lighten10AccentColor lighten($accentDarkColor, 10%)
+    --lighten10TextColor lighten($textDarkColor, 10%)
+    --lighten20TextColor lighten($textDarkColor, 20%)
+    --lighten25TextColor lighten($textDarkColor, 25%)
+    --lighten35TextColor lighten($textDarkColor, 35%)
+    --lighten40TextColor lighten($textDarkColor, 40%)
+    --darken10AccentColor darken($accentDarkColor, 10%)
+    --darken10BgColor lighten($bgDarkColor, 5%)
+    --darken10BorderColor darken($borderDarkColor, 10%)
+
+html[theme='light']
+  --accentColor $accentColor
+  --textColor $textColor
+  --borderColor $borderColor
+  --codeBgColor $codeBgLightColor
+  --arrowBgColor $arrowBgColor
+  --badgeTipColor $badgeTipColor
+  --badgeWarningColor $badgeWarningColor
+  --badgeErrorColor $badgeErrorColor
+  --bgColor $bgColor
+  --kbdBgColor $kbdBgColor
+  --blockquoteTextColor $blockquoteTextColor
+  --blockquoteBorderColor $blockquoteBorderColor
+  --tableBorderColor $tableBorderColor
+  --tableStripeBgColor $tableStripeBgColor
+  --preTextColor $preTextLightColor
+  --highlightedBgColor $highlightedBgLightColor
+  --languageTextColor $languageTextLightColor
+  --lineNumbersColor $lineNumbersLightColor
+  --tipColor $tipColor
+  --tipBgColor $tipBgColor
+  --warningColor $warningColor
+  --warningBgColor $warningBgColor
+  --dangerColor $dangerColor
+  --dangerBgColor $dangerBgColor
+  --miniCodeBgColor $miniCodeBgColor
+  --searchBorderColor $searchBorderColor
+  --lighten10AccentColor lighten($accentColor, 10%)
+  --lighten10TextColor lighten($textColor, 10%)
+  --lighten20TextColor lighten($textColor, 20%)
+  --lighten25TextColor lighten($textColor, 25%)
+  --lighten35TextColor lighten($textColor, 35%)
+  --lighten40TextColor lighten($textColor, 40%)
+  --darken10AccentColor darken($accentColor, 10%)
+  --darken10BgColor darken($bgColor, 5%)
+  --darken10BorderColor darken($borderColor, 10%)
+
+html[theme='dark']
+  --accentColor $accentDarkColor
+  --textColor $textDarkColor
+  --borderColor $borderDarkColor
+  --codeBgColor $codeBgColor
+  --arrowBgColor $arrowBgDarkColor
+  --badgeTipColor $badgeTipDarkColor
+  --badgeWarningColor $badgeWarningDarkColor
+  --badgeErrorColor $badgeErrorDarkColor
+  --bgColor $bgDarkColor
+  --kbdBgColor $kbdBgDarkColor
+  --blockquoteTextColor $blockquoteTextDarkColor
+  --blockquoteBorderColor $blockquoteBorderDarkColor
+  --tableBorderColor $tableBorderDarkColor
+  --tableStripeBgColor $tableStripeBgDarkColor
+  --preTextColor $preTextColor
+  --highlightedBgColor $highlightedBgColor
+  --languageTextColor $languageTextColor
+  --lineNumbersColor $lineNumbersColor
+  --tipColor $tipDarkColor
+  --tipBgColor $tipBgDarkColor
+  --warningColor $warningDarkColor
+  --warningBgColor $warningBgDarkColor
+  --dangerColor $dangerDarkColor
+  --dangerBgColor $dangerBgDarkColor
+  --miniCodeBgColor $miniCodeBgDarkColor
+  --searchBorderColor $searchBorderDarkColor
+  --lighten10AccentColor lighten($accentDarkColor, 10%)
+  --lighten10TextColor lighten($textDarkColor, 10%)
+  --lighten20TextColor lighten($textDarkColor, 20%)
+  --lighten25TextColor lighten($textDarkColor, 25%)
+  --lighten35TextColor lighten($textDarkColor, 35%)
+  --lighten40TextColor lighten($textDarkColor, 40%)
+  --darken10AccentColor darken($accentDarkColor, 10%)
+  --darken10BgColor darken($bgDarkColor, 5%)
+  --darken10BorderColor darken($borderDarkColor, 10%)
+
+html
+body
+.navbar
+.sidebar
+  background-color var(--bgColor)
+
+body
+  color var(--textColor)
+
+.navbar
+h2
+  border-bottom-color var(--borderColor)
+
+.sidebar
+  border-right-color var(--borderColor)
+
+{$contentClass}:not(.custom) p.demo
+kbd
+  border-color var(--borderColor)
+
+kbd
+  background var(--kbdBgColor)
+
+blockquote
+  color var(--blockquoteTextColor)
+  border-left-color var(--blockquoteBorderColor)
+
+a
+p a code
+  color var(--accentColor)
+
+hr
+  border-top-color var(--borderColor)
+
+tr
+  border-top-color var(--tableBorderColor)
+
+  &:nth-child(2n)
+    background-color var(--tableStripeBgColor)
+
+th
+td
+  border-color var(--tableBorderColor)
+
+.arrow.up
+  border-bottom-color var(--arrowBgColor)
+
+.arrow.down
+  border-top-color var(--arrowBgColor)
+
+.arrow.right
+border-left-color var(--arrowBgColor)
+.arrow.left
+  border-right-color var(--arrowBgColor)
+
+// code
+{$contentClass} code
+  color var(--lighten20TextColor)
+  background-color var(--miniCodeBgColor)
+
+  .token.inserted
+    color var(--accentColor)
+
+  .token.punctuation
+    color var(--preTextColor)
+
+{$contentClass} pre
+
+{$contentClass} pre[class*='language-']
+div[class*='language-']
+div[class*='language-'].line-numbers-mode::after
+  background-color var(--codeBgColor)
+
+{$contentClass}
+  pre
+  pre[class*='language-']
+    code
+      color var(--preTextColor)
+
+div[class*='language-'] .highlight-lines .highlighted
+div[class*='language-'].line-numbers-mode .highlight-lines .highlighted::before
+  background-color var(--highlightedBgColor)
+
+div[class*='language-'].line-numbers-mode::after
+  background-color var(--codeBgColor)
+  border-right-color var(--highlightedBgColor)
+
+div[class*='language-']::before
+  color var(--languageTextColor)
+
+div[class*='language-'].line-numbers-mode .line-numbers-wrapper
+  color var(--lineNumbersColor)
+
+.theme-code-block > pre
+  background-color var(--codeBgColor) !important
+
+.theme-code-group .theme-code-group__nav
+  background-color var(--codeBgColor) !important
+
+  .theme-code-group__nav-tab
+    color var(--textColor) !important
+
+  .theme-code-group__nav-tab-active
+    border-color: var(--accentColor) !important
+
+// custom-block
+.custom-block.tip
+  border-color var(--badgeTipColor)
+  background-color var(--tipBgColor)
+
+  .custom-block-title
+  a
+    color var(--tipColor)
+
+.custom-block.warning
+  border-color var(--badgeWarningColor)
+  background-color var(--warningBgColor)
+
+  .custom-block-title
+  a
+    color var(--warningColor)
+
+.custom-block.danger
+  border-color var(--badgeErrorColor)
+  background-color var(--dangerBgColor)
+
+  .custom-block-title
+  a
+    color var(--dangerColor)
+
+.custom-block.warning
+.custom-block.danger
+  color var(--textColor)
+
+.custom-block.details
+  background-color var(--tipBgColor)
+
+// badge
+.badge
+  background-color var(--badgeTipColor) !important
+
+  &.tip
+  &.green
+    background-color var(--badgeTipColor) !important
+
+  &.error
+    background-color var(--badgeErrorColor) !important
+
+  &.warning
+  &.warn
+  &.yellow
+    background-color var(--badgeWarningColor) !important
+
+// pwa
+.global-ui
+  .sw-update-popup
+    border-color var(--accentColor) !important
+    background-color var(--bgColor) !important
+    color var(--textColor) !important
+
+    button
+      border-color var(--darken10AccentColor) !important
+      background-color var(--accentColor) !important
+      color #fff !important
+
+      &:hover
+        background-color var(--lighten10AccentColor) !important
+
+// scroll bar
+@media (min-width $MQMobile)
+  ::-webkit-scrollbar
+    max-width 6px
+    max-height 12px
+
+  ::-webkit-scrollbar-thumb
+    background-color var(--languageTextColor)
+    border-radius 6px
diff --git a/docs/.vuepress/theme/styles/palette.styl b/docs/.vuepress/theme/styles/palette.styl
new file mode 100644
index 000000000..22379c117
--- /dev/null
+++ b/docs/.vuepress/theme/styles/palette.styl
@@ -0,0 +1,79 @@
+$contentClass = '.theme-default-content'
+
+$accentColor ?= #3eaf7c
+$accentDarkColor ?= $accentColor
+
+$textColor ?= #2c3e50
+$textDarkColor ?= #e2e2e2
+
+$borderColor ?= #eaecef
+$borderDarkColor ?= #4e4e4e
+
+$codeBgColor ?= #282c34
+$codeBgLightColor ?= #f8f8f8
+
+$arrowBgColor ?= #ccc
+$arrowBgDarkColor ?= $arrowBgColor
+
+$badgeTipColor ?= #42b983
+$badgeTipDarkColor ?= $badgeTipColor
+
+$badgeWarningColor ?= darken(#ffe564, 35%)
+$badgeWarningDarkColor ?= $badgeWarningColor
+
+$badgeErrorColor ?= #DA5961
+$badgeErrorDarkColor ?= $badgeErrorColor
+
+$preTextColor ?= #fff
+$preTextLightColor ?= #4d4d4d
+
+$highlightedBgColor ?= rgba(0, 0, 0, .66)
+$highlightedBgLightColor ?= rgba(224, 224, 224, 0.5)
+
+$languageTextColor ?= rgba(255, 255, 255, 0.4)
+$languageTextLightColor ?= rgba(0, 0, 0, 0.4)
+
+$lineNumbersColor ?= rgba(255, 255, 255, 0.3)
+$lineNumbersLightColor ?= rgba(0, 0, 0, 0.3)
+
+$miniCodeBgColor ?= rgba(27,31,35,0.05)
+$miniCodeBgDarkColor ?= rgba(255,255,255,0.1)
+
+$bgColor ?= #fff
+$bgDarkColor ?= #25272a
+
+$kbdBgColor ?= #eee
+$kbdBgDarkColor ?= #444
+
+$blockquoteTextColor ?= #999
+$blockquoteTextDarkColor ?= #eee
+
+$blockquoteBorderColor ?= #dfe2e5
+$blockquoteBorderDarkColor ?= #666b6f
+
+$tableBorderColor ?= #dfe2e5
+$tableBorderDarkColor ?= $borderDarkColor
+
+$tableStripeBgColor ?= #f6f8fa
+$tableStripeBgDarkColor ?= #444
+
+$tipColor ?= $textColor
+$tipDarkColor ?= $textDarkColor
+
+$tipBgColor ?= #f3f5f7
+$tipBgDarkColor ?= #3e3b3b
+
+$warningColor ?= #e7c000
+$warningDarkColor ?= $warningColor
+
+$warningBgColor ?= rgba(255, 229, 100, 0.3)
+$warningBgDarkColor ?= rgba(185, 174, 119, 0.3)
+
+$dangerColor ?= #c00
+$dangerDarkColor ?= $dangerColor
+
+$dangerBgColor ?= #ffe6e6
+$dangerBgDarkColor ?= rgba(72, 56, 57, 30%)
+
+$searchBorderColor ?= #999
+$searchBorderDarkColor ?= #eee