Chore: migrate to vuepress-next

2025-01-19 01:01:41 +03:00 · 2021-04-06 23:47:32 +08:00 · 2021-04-06 23:47:32 +08:00 · 27285186be
commit 27285186be
parent effaa0e7ed
37 changed files with 2509 additions and 6487 deletions
--- a/.gitignore
+++ b/.gitignore
@ -113,4 +113,5 @@ dist
 .yarn/unplugged
 .yarn/build-state.yml
 .yarn/install-state.gz
-.pnp.*
+.pnp.*
+/docs/.vuepress/.temp/
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@ -1,156 +0,0 @@
-module.exports = {
-  plugins: ["@vuepress/back-to-top", "vuepress-plugin-mermaidjs"],
-  base: "/Xray-docs-next/",
-  locales: {
-    "/": {
-      lang: "zh-CN",
-      title: "Project X",
-      description: "Xray 官方文档",
-    },
-  },
-  themeConfig: {
-    smoothScroll: true,
-    repo: "xtls/xray-core",
-    repoLabel: "查看源码",
-    docsRepo: "xtls/Xray-docs-next",
-    docsDir: "docs",
-    docsBranch: "main",
-    editLinks: true,
-    editLinkText: "帮助我们改善此页面！",
-    themeChange: true,
-    themeChangeText: "切换主题",
-    nav: [
-      { text: "首页", link: "/" },
-      { text: "大史记", link: "/about/news" },
-      { text: "配置指南", link: "/config/" },
-      { text: "开发指南", link: "/development/" },
-      { text: "使用指南", link: "/document/" },
-      {
-        text: "多语言",
-        ariaLabel: "Language Menu",
-        items: [
-          { text: "简体中文", link: "/" },
-          { text: "English", link: "/en" },
-        ],
-      },
-    ],
-    sidebar: {
-      "/config/": [
-        {
-          title: "特性详解",
-          children: [
-            "features/vless",
-            "features/xtls",
-            "features/fallback",
-            "features/env",
-            "features/multiple",
-          ],
-        },
-        {
-          title: "基础配置",
-          collapsable: false,
-          path: "/config/",
-          children: [
-            "api",
-            "dns",
-            "fakedns",
-            "inbound",
-            "outbound",
-            "policy",
-            "reverse",
-            "routing",
-            "stats",
-            "transport",
-          ],
-        },
-        {
-          title: "入站代理",
-          collapsable: false,
-          path: "/config/inbounds/",
-          children: [
-            "inbounds/dokodemo",
-            "inbounds/http",
-            "inbounds/shadowsocks",
-            "inbounds/socks",
-            "inbounds/trojan",
-            "inbounds/vless",
-            "inbounds/vmess",
-          ],
-        },
-        {
-          title: "出站代理",
-          collapsable: false,
-          path: "/config/outbounds/",
-          children: [
-            "outbounds/blackhole",
-            "outbounds/dns",
-            "outbounds/freedom",
-            "outbounds/http",
-            "outbounds/shadowsocks",
-            "outbounds/socks",
-            "outbounds/trojan",
-            "outbounds/vless",
-            "outbounds/vmess",
-          ],
-        },
-        {
-          title: "底层传输",
-          collapsable: false,
-          path: "/config/transports/",
-          children: [
-            "transports/grpc",
-            "transports/h2",
-            "transports/mkcp",
-            "transports/quic",
-            "transports/tcp",
-            "transports/websocket",
-          ],
-        },
-      ],
-      "/document/level-0/": [
-        "ch01-preface",
-        "ch02-preparation",
-        "ch03-ssh",
-        "ch04-security",
-        "ch05-webpage",
-        "ch06-certificates",
-        "ch07-xray-server",
-        "ch08-xray-clients",
-        "ch09-appendix",
-      ],
-      "/document/level-1/": [
-        "fallbacks-lv1",
-        "routing-lv1-part1",
-        "routing-lv1-part2",
-        "work",
-        "fallbacks-with-sni",
-      ],
-      "/document/level-2/": [
-        "transparent_proxy/transparent_proxy",
-        "tproxy",
-        "iptables_gid",
-        "redirect",
-      ],
-      "/": "auto",
-    },
-  },
-  markdown: {
-    toc: {
-      includeLevel: [2],
-    },
-    extendMarkdown: (md) => {
-      md.use(require("markdown-it-footnote"));
-    },
-  },
-  chainWebpack: (config) => {
-    config.module
-      .rule("webp")
-      .test(/\.(webp)(\?.*)?$/)
-      .use("file-loader")
-      .loader("file-loader")
-      .options({
-        name: `assets/img/[name].[hash:8].[ext]`,
-      });
-  },
-  postcss: { plugins: [require("autoprefixer")] },
-};
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@ -0,0 +1,184 @@
+import { defineUserConfig } from "vuepress";
+import { DefaultThemeOptions } from "vuepress";
+import * as path from "path";
+
+export default defineUserConfig<DefaultThemeOptions>({
+  theme: path.join(__dirname, "./theme"),
+  plugins: ["@vuepress/back-to-top", "vuepress-plugin-mermaidjs"],
+  base: "/Xray-docs-next/",
+  locales: {
+    "/": {
+      lang: "zh-CN",
+      title: "Project X",
+      description: "Xray 官方文档",
+    },
+  },
+  themeConfig: {
+    smoothScroll: true,
+    repo: "xtls/xray-core",
+    repoLabel: "查看源码",
+    docsRepo: "xtls/Xray-docs-next",
+    docsDir: "docs",
+    docsBranch: "main",
+    editLinks: true,
+    editLinkText: "帮助我们改善此页面！",
+    enableToggle: true,
+    ToggleText: "切换主题",
+    navbar: [
+      { text: "首页", link: "/" },
+      { text: "大史记", link: "/about/news.md" },
+      { text: "配置指南", link: "/config/" },
+      { text: "开发指南", link: "/development/" },
+      { text: "使用指南", link: "/document/" },
+      {
+        text: "多语言",
+        ariaLabel: "Language Menu",
+        children: [
+          { text: "简体中文", link: "/" },
+          { text: "English", link: "/en" },
+        ],
+      },
+    ],
+    sidebar: {
+      "/config/": [
+        {
+          text: "特性详解",
+          isGroup: true,
+          children: [
+            "/config/features/vless.md",
+            "/config/features/xtls.md",
+            "/config/features/fallback.md",
+            "/config/features/env.md",
+            "/config/features/multiple.md",
+          ],
+        },
+        {
+          text: "基础配置",
+          isGroup: true,
+          children: [
+            "/config/",
+            "/config/api.md",
+            "/config/dns.md",
+            "/config/fakedns.md",
+            "/config/inbound.md",
+            "/config/outbound.md",
+            "/config/policy.md",
+            "/config/reverse.md",
+            "/config/routing.md",
+            "/config/stats.md",
+            "/config/transport.md",
+          ],
+        },
+        {
+          text: "入站代理",
+          isGroup: true,
+          children: [
+            "/config/inbounds/",
+            "/config/inbounds/dokodemo.md",
+            "/config/inbounds/http.md",
+            "/config/inbounds/shadowsocks.md",
+            "/config/inbounds/socks.md",
+            "/config/inbounds/trojan.md",
+            "/config/inbounds/vless.md",
+            "/config/inbounds/vmess.md",
+          ],
+        },
+        {
+          text: "出站代理",
+          isGroup: true,
+          children: [
+            "/config/outbounds/",
+            "/config/outbounds/blackhole.md",
+            "/config/outbounds/dns.md",
+            "/config/outbounds/freedom.md",
+            "/config/outbounds/http.md",
+            "/config/outbounds/shadowsocks.md",
+            "/config/outbounds/socks.md",
+            "/config/outbounds/trojan.md",
+            "/config/outbounds/vless.md",
+            "/config/outbounds/vmess.md",
+          ],
+        },
+        {
+          text: "底层传输",
+          isGroup: true,
+          children: [
+            "/config/transports/",
+            "/config/transports/grpc.md",
+            "/config/transports/h2.md",
+            "/config/transports/mkcp.md",
+            "/config/transports/quic.md",
+            "/config/transports/tcp.md",
+            "/config/transports/websocket.md",
+          ],
+        },
+      ],
+      "/document/level-0/": [
+        {
+          text: "小小白白话文",
+          isGroup: true,
+          children: [
+            "/document/level-0/ch01-preface.md",
+            "/document/level-0/ch02-preparation.md",
+            "/document/level-0/ch03-ssh.md",
+            "/document/level-0/ch04-security.md",
+            "/document/level-0/ch05-webpage.md",
+            "/document/level-0/ch06-certificates.md",
+            "/document/level-0/ch07-xray-server.md",
+            "/document/level-0/ch08-xray-clients.md",
+            "/document/level-0/ch09-appendix.md",
+          ],
+        },
+      ],
+      "/document/level-1/": [
+        {
+          text: "入门技巧",
+          isGroup: true,
+          children: [
+            "/document/level-1/fallbacks-lv1.md",
+            "/document/level-1/routing-lv1-part1.md",
+            "/document/level-1/routing-lv1-part2.md",
+            "/document/level-1/work.md",
+            "/document/level-1/fallbacks-with-sni.md",
+          ],
+        },
+      ],
+      "/document/level-2/": [
+        {
+          text: "进阶技巧",
+          isGroup: true,
+          children: [
+            "/document/level-2/transparent_proxy/transparent_proxy.md",
+            "/document/level-2/tproxy.md",
+            "/document/level-2/iptables_gid.md",
+            "/document/level-2/redirect.md",
+          ],
+        },
+      ],
+    },
+    themePlugins: {
+      git: process.env.NODE_ENV === "production",
+    },
+  },
+  markdown: {
+    toc: {
+      level: [2],
+    },
+  },
+  extendsMarkdown: (md) => {
+    md.use(require("markdown-it-footnote"));
+  },
+  bundlerConfig: {
+    chainWebpack: (config) => {
+      config.module
+        .rule("webp")
+        .test(/\.(webp)(\?.*)?$/)
+        .use("file-loader")
+        .loader("file-loader")
+        .options({
+          name: `assets/img/[name].[hash:8].[ext]`,
+        });
+    },
+  },
+  //postcss: { plugins: [require("autoprefixer")] }
+});
--- a/docs/.vuepress/styles/blockquote.styl
+++ b/docs/.vuepress/styles/blockquote.styl
@ -1,19 +0,0 @@
-
-:root
-  --bq-background-color: #f3f5f7;
-  @media (prefers-color-scheme dark)
-    --bq-background-color: #373a3f;
-
-html[theme='light'] {
-  --bq-background-color: #f3f5f7;
-}
-
-html[theme='dark'] {
-  --bq-background-color: #373a3f;
-}
-
-
-blockquote
-  color var(--textColor)
-  background-color var(--bq-background-color)
-  border-left 4px solid #17a2b8
--- a/docs/.vuepress/styles/index.styl
+++ b/docs/.vuepress/styles/index.styl
@ -1,2 +0,0 @@
-@import "blockquote.styl"
-@import "theme.styl"
--- a/docs/.vuepress/styles/palette.styl
+++ b/docs/.vuepress/styles/palette.styl
@ -1,6 +0,0 @@
-$accentColor = #2e73ea
-$accentDarkColor = #2a6add
-$tipBgDarkColor = #373a3f
-$badgeTipDarkColor = #14422d
-$textDarkColor = #c0bebe
-$badgeWarningDarkColor = #e4be04
--- a/docs/.vuepress/styles/theme.styl
+++ b/docs/.vuepress/styles/theme.styl
@ -1,5 +0,0 @@
-*
-  scroll-behavior smooth
-  transition background-color .1s ease
-  @media screen and (prefers-reduced-motion: true)
-    scroll-behavior auto
--- a/docs/.vuepress/theme/clientAppEnhance.ts
+++ b/docs/.vuepress/theme/clientAppEnhance.ts
@ -0,0 +1,10 @@
+import { defineClientAppEnhance } from "@vuepress/client";
+import Tab from "./components/Tab.vue";
+import Tabs from "./components/Tabs.vue";
+
+import "./styles/default/index.scss";
+
+export default defineClientAppEnhance(({ app, router, siteData }) => {
+  app.component("Tab", Tab);
+  app.component("Tabs", Tabs);
+});
--- a/docs/.vuepress/theme/components/NavLinks.vue
+++ b/docs/.vuepress/theme/components/NavLinks.vue
@ -1,46 +0,0 @@
-<template>
-  <div>
-    <ParentNavLinks />
-    <nav class="nav-links">
-      <div class="nav-item">
-        <a v-if="enable" class="nav-link" @click.prevent="toggleTheme">{{
-          text
-        }}</a>
-      </div>
-    </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() {
-    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>
--- a/docs/.vuepress/theme/components/Tab.vue
+++ b/docs/.vuepress/theme/components/Tab.vue
@ -10,9 +10,9 @@
 </template>

 <script lang="ts">
-import Vue from "vue";
+import { defineComponent } from "vue";

-export default Vue.extend({
+export default defineComponent({
  props: {
    title: {
      type: String,
@ -35,3 +35,7 @@ export default Vue.extend({
  },
 });
 </script>
+
+<style lang="scss" scoped>
+@import "~bootstrap/scss/bootstrap";
+</style>
--- a/docs/.vuepress/theme/components/Tabs.vue
+++ b/docs/.vuepress/theme/components/Tabs.vue
@ -24,9 +24,9 @@
 </template>

 <script lang="ts">
-import Vue from "vue";
+import { defineComponent } from "vue";

-export default Vue.extend({
+export default defineComponent({
  props: {
    title: {
      type: String,
@ -37,7 +37,7 @@ export default Vue.extend({
      children: [],
    };
  },
-  created() {
+  beforeMount() {
    this.children = [];
  },
  mounted() {
@ -62,17 +62,6 @@ export default Vue.extend({
@import "~bootstrap/scss/bootstrap";

 button.nav-link {
-  @media (prefers-color-scheme: light) {
-    color: #2c3e50;
-  }
-  @media (prefers-color-scheme: dark) {
-    color: #e2e2e2;
-  }
-}
-html[theme="light"] button.nav-link {
-  color: #2c3e50;
-}
-html[theme="dark"] button.nav-link {
-  color: #e2e2e2;
+  color: var(--textColor);
 }
 </style>
--- a/docs/.vuepress/theme/components/ThemeToggle.vue
+++ b/docs/.vuepress/theme/components/ThemeToggle.vue
@ -0,0 +1,48 @@
+<template>
+  <nav class="navbar-links toggle-bar">
+    <div class="navbar-links-item">
+      <a v-if="enable" class="nav-link" @click.prevent="toggleTheme">{{
+        text
+      }}</a>
+    </div>
+  </nav>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { ThemeOptions } from "../index";
+declare const __LAYOUT__OPTIONS__: ThemeOptions;
+
+export default defineComponent({
+  data() {
+    return {
+      enable: false,
+      text: "",
+    };
+  },
+  mounted() {
+    this.enable = __LAYOUT__OPTIONS__.enableToggle;
+    this.text = __LAYOUT__OPTIONS__.ToggleText;
+  },
+  methods: {
+    toggleTheme() {
+      const 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>
+
+<style lang="scss" scoped>
+.toggle-bar {
+  margin-left: 1.5rem;
+}
+</style>
--- a/docs/.vuepress/theme/index.js
+++ b/docs/.vuepress/theme/index.js
@ -1,3 +0,0 @@
-module.exports = {
-  extend: "@vuepress/theme-default",
-};
--- a/docs/.vuepress/theme/index.ts
+++ b/docs/.vuepress/theme/index.ts
@ -0,0 +1,24 @@
+import { path } from "@vuepress/utils";
+import { Theme } from "@vuepress/core";
+
+export interface ThemeOptions {
+  enableToggle?: boolean;
+  ToggleText?: string;
+}
+
+export const docsPlugin: Theme<ThemeOptions> = (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" }]],
+  };
+};
+
+export default docsPlugin;
--- a/docs/.vuepress/theme/layouts/Layout.vue
+++ b/docs/.vuepress/theme/layouts/Layout.vue
@ -1,17 +1,35 @@
 <template>
-  <ParentLayout />
+  <ParentLayout>
+    <template v-slot:navbar-after>
+      <ThemeToggle />
+    </template>
+  </ParentLayout>
 </template>

 <script lang="ts">
-import ParentLayout from "@parent-theme/layouts/Layout.vue";
-import Vue from "vue";
-export default Vue.extend({
+import ParentLayout from "@vuepress/theme-default/lib/layouts/Layout.vue";
+import ThemeToggle from "../components/ThemeToggle.vue";
+import { defineComponent } from "vue";
+
+export default defineComponent({
  components: {
    ParentLayout,
+    ThemeToggle,
+  },
+  beforeMount() {
+    function setTheme(newTheme) {
+      const html = document.getElementsByTagName("html")[0];
+      html.setAttribute("theme", newTheme);
+    }
+    var dark = window.matchMedia("(prefers-color-scheme: dark)");
+    dark.addEventListener("change", (e) => {
+      setTheme(e.matches ? "dark" : "light");
+    });
+    setTheme(dark.matches ? "dark" : "light");
  },
 });
 </script>

-<style lang="stylus">
-@require '../styles/components.styl'
+<style lang="sass">
+//@import "../styles/default/index.scss"
 </style>
--- a/docs/.vuepress/theme/styles/components.styl
+++ b/docs/.vuepress/theme/styles/components.styl
@ -1,176 +0,0 @@
-// 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)
--- a/docs/.vuepress/theme/styles/default/_color.scss
+++ b/docs/.vuepress/theme/styles/default/_color.scss
@ -0,0 +1,43 @@
+$accentLightColor: #2e73ea;
+$textLightColor: #2c3e50;
+$borderLightColor: #eaecef;
+$codeBgLightColor: #282c34;
+$arrowBgLightColor: #ccc;
+$tipLightColor: #42b983;
+$tipBackgroundLightColor: #eff2f7;
+$warningLightColor: #e7c000;
+$dangerLightColor: #cc0000;
+$badgeTipLightColor: #5bdca2;
+$badgeWarningLightColor: $warningLightColor;
+$badgeDangerLightColor: $dangerLightColor;
+$backgroundLightColor: #fff;
+$kbdBackgroundLightColor: #eeeeee;
+$kbdBorderLightColor: #ccc;
+$tableBorderLightColor: #dfe2e5;
+$tableBackgroundLightColor: #f6f8fa;
+$metaItemLightColor: #767676;
+$dangerBgLightColor: #ffe6e6;
+$warningBgLightColor: rgba(255, 229, 100, 0.3);
+$miniCodeBgLightColor: rgba(27, 31, 35, 0.05);
+
+$accentDarkColor: #2a6add;
+$textDarkColor: #c0bebe;
+$borderDarkColor: #4e4e4e;
+$codeBgDarkColor: #282c34;
+$arrowBgDarkColor: #ccc;
+$tipDarkColor: #42b983;
+$tipBackgroundDarkColor: #373a3f;
+$warningDarkColor: #e7c000;
+$dangerDarkColor: #cc0000;
+$badgeTipDarkColor: #1b4632;
+$badgeWarningDarkColor: #e4be04;
+$badgeDangerDarkColor: #b00606;
+$backgroundDarkColor: #25272a;
+$kbdBackgroundDarkColor: #444;
+$kbdBorderDarkColor: #666b6f;
+$tableBorderDarkColor: #666b6f;
+$tableBackgroundDarkColor: #5b5b5b;
+$metaItemDarkColor: #626262;
+$dangerBgDarkColor: rgba(72, 56, 57, 0.3);
+$warningBgDarkColor: rgba(185, 174, 119, 0.3);
+$miniCodeBgDarkColor: rgba(255, 255, 255, 0.1);
--- a/docs/.vuepress/theme/styles/default/_normalize.scss
+++ b/docs/.vuepress/theme/styles/default/_normalize.scss
@ -0,0 +1,51 @@
+@import "_variables";
+
+html,
+body {
+  background-color: var(--backgroundColor);
+}
+
+body {
+  color: var(--textColor);
+}
+
+a {
+  color: var(--accentColor);
+}
+
+p a code {
+  color: var(--accentColor);
+}
+
+kbd {
+  background: var(--kbdBackgroundColor);
+  border: solid 0.15rem var(--kbdBorderColor);
+  border-bottom: solid 0.25rem var(--kbdBorderColor);
+}
+
+blockquote {
+  color: var(--textColor);
+  background-color: var(--kbdBackgroundColor);
+  border-left: 4px solid #17a2b8;
+}
+
+h2 {
+  border-bottom: 1px solid var(--borderColor);
+}
+
+hr {
+  border-top: 1px solid var(--borderColor);
+}
+
+tr {
+  border-top: 1px solid var(--tableBorderColor);
+
+  &:nth-child(2n) {
+    background-color: var(--tableBackgroundColor);
+  }
+}
+
+th,
+td {
+  border: 1px solid var(--tableBorderColor);
+}
--- a/docs/.vuepress/theme/styles/default/_variables.scss
+++ b/docs/.vuepress/theme/styles/default/_variables.scss
@ -0,0 +1,66 @@
+@import "@vuepress/plugin-palette/palette";
+@import "_color";
+$MQMobile: 719px;
+$contentClass: ".theme-default-content";
+
+html[theme="dark"] {
+  --accentColor: #{$accentDarkColor};
+  --textColor: #{$textDarkColor};
+  --borderColor: #{$borderDarkColor};
+  --codeBgColor: #{$codeBgDarkColor};
+  --arrowBgColor: #{$arrowBgDarkColor};
+  --tipColor: #{$tipDarkColor};
+  --tipBackgroundColor: #{$tipBackgroundDarkColor};
+  --warningColor: #{$warningDarkColor};
+  --dangerColor: #{$dangerDarkColor};
+  --badgeTipColor: #{$badgeTipDarkColor};
+  --badgeWarningColor: #{$badgeWarningDarkColor};
+  --badgeDangerColor: #{$badgeDangerDarkColor};
+  --backgroundColor: #{$backgroundDarkColor};
+  --kbdBackgroundColor: #{$kbdBackgroundDarkColor};
+  --kbdBorderColor: #{$kbdBorderDarkColor};
+  --tableBorderColor: #{$tableBorderDarkColor};
+  --tableBackgroundColor: #{$tableBackgroundDarkColor};
+  --metaItemColor: #{$metaItemDarkColor};
+  --dangerBgDarkColor: #{$dangerBgDarkColor};
+  --warningBgDarkColor: #{$warningBgDarkColor};
+  --miniCodeBgColor: #{$miniCodeBgDarkColor};
+
+  --textColorLighten10: #{lighten($textDarkColor, 7%)};
+  --textColorLighten25: #{lighten($textDarkColor, 10%)};
+  --textColorLighten40: #{lighten($textDarkColor, 15%)};
+  --accentColorLighten8: #{lighten($accentDarkColor, 8%)};
+  --accentColorLighten10: #{lighten($accentDarkColor, 10%)};
+  --accentColorLighten30: #{lighten($accentDarkColor, 30%)};
+}
+
+html {
+  --accentColor: #{$accentLightColor};
+  --textColor: #{$textLightColor};
+  --borderColor: #{$borderLightColor};
+  --codeBgColor: #{$codeBgLightColor};
+  --arrowBgColor: #{$arrowBgLightColor};
+  --tipColor: #{$tipLightColor};
+  --tipBackgroundColor: #{$tipBackgroundLightColor};
+  --warningColor: #{$warningLightColor};
+  --dangerColor: #{$dangerLightColor};
+  --badgeTipColor: #{$badgeTipLightColor};
+  --badgeWarningColor: #{$badgeWarningLightColor};
+  --badgeDangerColor: #{$badgeDangerLightColor};
+  --backgroundColor: #{$backgroundLightColor};
+  --kbdBackgroundColor: #{$kbdBackgroundLightColor};
+  --kbdBorderColor: #{$kbdBorderLightColor};
+  --tableBorderColor: #{$tableBorderLightColor};
+  --tableBackgroundColor: #{$tableBackgroundLightColor};
+  --metaItemColor: #{$metaItemLightColor};
+  --dangerBgDarkColor: #{$dangerBgLightColor};
+  --warningBgDarkColor: #{$warningBgLightColor};
+  --miniCodeBgColor: #{$miniCodeBgLightColor};
+
+  --textColorLighten10: #{lighten($textLightColor, 10%)};
+  --textColorLighten25: #{lighten($textLightColor, 23%)};
+  --textColorLighten40: #{lighten($textLightColor, 40%)};
+  --accentColorLighten8: #{lighten($accentLightColor, 8%)};
+  --accentColorLighten10: #{lighten($accentLightColor, 10%)};
+  --accentColorLighten30: #{lighten($accentLightColor, 30%)};
+}
--- a/docs/.vuepress/theme/styles/default/arrow.scss
+++ b/docs/.vuepress/theme/styles/default/arrow.scss
@ -0,0 +1,27 @@
+@import "_variables";
+
+.arrow {
+  &.up {
+    border: {
+      bottom: 6px solid var(--arrowBgColor);
+    }
+  }
+
+  &.down {
+    border: {
+      top: 6px solid var(--arrowBgColor);
+    }
+  }
+
+  &.right {
+    border: {
+      left: 6px solid var(--arrowBgColor);
+    }
+  }
+
+  &.left {
+    border: {
+      right: 6px solid var(--arrowBgColor);
+    }
+  }
+}
--- a/docs/.vuepress/theme/styles/default/badge.scss
+++ b/docs/.vuepress/theme/styles/default/badge.scss
@ -0,0 +1,17 @@
+@import "_variables";
+
+.badge {
+  color: var(--backgroundColor);
+  background-color: var(--badgeTipColor);
+  &.tip {
+    background-color: var(--badgeTipColor);
+  }
+
+  &.warning {
+    background-color: var(--badgeWarningColor);
+  }
+
+  &.danger {
+    background-color: var(--badgeDangerColor);
+  }
+}
--- a/docs/.vuepress/theme/styles/default/code.scss
+++ b/docs/.vuepress/theme/styles/default/code.scss
@ -0,0 +1,26 @@
+@use 'sass:color';
+
+@import "_variables";
+
+#{$contentClass} {
+  code {
+    color: var(--textColorLighten25);
+    background-color: var(--miniCodeBgColor);
+  }
+}
+
+#{$contentClass} {
+  pre {
+    background-color: var(--codeBgColor);
+
+    code {
+      color: var(--textColorLighten25);
+      background-color: transparent;
+    }
+  }
+
+  .line-number {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+      monospace;
+  }
+}
--- a/docs/.vuepress/theme/styles/default/custom-container.scss
+++ b/docs/.vuepress/theme/styles/default/custom-container.scss
@ -0,0 +1,42 @@
+@use 'sass:color';
+
+@import "_variables";
+
+.custom-container {
+  &.tip {
+    background-color: var(--tipBackgroundColor);
+    border-color: var(--tipColor);
+  }
+
+  &.warning {
+    background-color: var(--warningBgDarkColor);
+    border-color: var(--warningColor);
+    color: var(--textColor);
+
+    .custom-container-title {
+      color: var(--warningColor);
+    }
+
+    a {
+      color: var(--textColor);
+    }
+  }
+
+  &.danger {
+    background-color: var(--dangerBgDarkColor);
+    border-color: var(--dangerColor);
+    color: var(--textColor);
+
+    .custom-container-title {
+      color: var(--dangerColor);
+    }
+
+    a {
+      color: var(--textColor);
+    }
+  }
+
+  &.details {
+    background-color: var(--backgroundColor);
+  }
+}
--- a/docs/.vuepress/theme/styles/default/dropdown.scss
+++ b/docs/.vuepress/theme/styles/default/dropdown.scss
@ -0,0 +1,47 @@
+@import "_variables";
+
+.dropdown-wrapper {
+  .dropdown-title {
+    color: var(--textColor);
+  }
+
+  .mobile-dropdown-title {
+    font-size inherit {
+      &:hover {
+        color: var(--accentColor);
+      }
+    }
+  }
+
+  .nav-dropdown {
+    .dropdown-item {
+      .dropdown-subtitle {
+        border-top: 1px solid var(--kbdBackgroundColor);
+      }
+
+      a {
+        &:hover {
+          color: var(--accentColor);
+        }
+
+        &.router-link-active {
+          color: var(--accentColor);
+
+          &::after {
+            border-left: 5px solid var(--accentColor);
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (min-width: $MQMobile) {
+  .dropdown-wrapper {
+    .nav-dropdown {
+      background-color: var(--backgroundColor);
+      border: 1px solid var(--kbdBorderColor);
+      border-bottom-color: var(--kbdBorderColor);
+    }
+  }
+}
--- a/docs/.vuepress/theme/styles/default/home.scss
+++ b/docs/.vuepress/theme/styles/default/home.scss
@ -0,0 +1,51 @@
+@use 'sass:color';
+
+@import "_variables";
+
+.home {
+  .hero {
+    .description {
+      color: var(--textColorLighten40);
+    }
+
+    .action-button {
+      &.primary {
+        color: #fff;
+        background-color: var(--accentColor);
+        border-color: var(--accentColor);
+        &:hover {
+          background-color: var(--accentColorLighten8);
+        }
+      }
+
+      &.secondary {
+        color: var(--accentColor);
+        background-color: #fff;
+        border-color: var(--accentColor);
+        &:hover {
+          color: #fff;
+          background-color: var(--accentColorLighten8);
+        }
+      }
+    }
+  }
+
+  .features {
+    border-top: 1px solid var(--borderColor);
+  }
+
+  .feature {
+    h2 {
+      color: var(--textColorLighten25);
+    }
+
+    p {
+      color: var(--textColorLighten25);
+    }
+  }
+
+  .footer {
+    border-top: 1px solid var(--borderColor);
+    color: var(--textColorLighten25);
+  }
+}
--- a/docs/.vuepress/theme/styles/default/index.scss
+++ b/docs/.vuepress/theme/styles/default/index.scss
@ -0,0 +1,23 @@
+@use '_normalize';
+
+@use 'arrow';
+@use 'badge';
+@use 'custom-container';
+@use 'dropdown';
+@use 'home';
+@use 'layout';
+@use 'navbar';
+@use 'page';
+@use 'plugins';
+@use 'sidebar';
+@use 'code';
+
+@use '@vuepress/plugin-palette/style';
+
+* {
+  scroll-behavior: smooth;
+  transition: background-color 0.1s ease;
+  @media screen and (prefers-reduced-motion: reduce) {
+    scroll-behavior: auto;
+  }
+}
--- a/docs/.vuepress/theme/styles/default/layout.scss
+++ b/docs/.vuepress/theme/styles/default/layout.scss
@ -0,0 +1,18 @@
+@import "_variables";
+
+.navbar {
+  background-color: var(--backgroundColor);
+  border-bottom: 1px solid var(--borderColor);
+}
+
+.sidebar {
+  background-color: var(--backgroundColor);
+  border-right: 1px solid var(--borderColor);
+  scrollbar-color: var(--accentColor) var(--borderColor);
+  &::-webkit-scrollbar-track {
+    background-color: var(--borderColor);
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: var(--accentColor);
+  }
+}
--- a/docs/.vuepress/theme/styles/default/navbar.scss
+++ b/docs/.vuepress/theme/styles/default/navbar.scss
@ -0,0 +1,34 @@
+@use 'sass:color';
+
+@import "_variables";
+
+.navbar {
+  .site-name {
+    color: var(--textColor);
+  }
+
+  .navbar-links-wrapper {
+    background-color: var(--backgroundColor);
+  }
+}
+
+/**
+ * navbar-links
+ */
+.navbar-links {
+  a {
+    &:hover,
+    &.router-link-active {
+      color: var(--accentColor);
+    }
+  }
+}
+
+@media (min-width: $MQMobile) {
+  .navbar-links-item > a:not(.external) {
+    &:hover,
+    &.router-link-active {
+      border-bottom: 2px solid var(--accentColorLighten8);
+    }
+  }
+}
--- a/docs/.vuepress/theme/styles/default/page.scss
+++ b/docs/.vuepress/theme/styles/default/page.scss
@ -0,0 +1,21 @@
+@use 'sass:color';
+
+@import "_variables";
+
+.page-meta {
+  .meta-item {
+    .meta-item-label {
+      color: var(--textColorLighten25);
+    }
+
+    .meta-item-info {
+      color: var(--metaItemColor);
+    }
+  }
+}
+
+.page-nav {
+  .inner {
+    border-top: 1px solid var(--borderColor);
+  }
+}
--- a/docs/.vuepress/theme/styles/default/plugins.scss
+++ b/docs/.vuepress/theme/styles/default/plugins.scss
@ -0,0 +1,18 @@
+@use 'sass:color';
+
+@import "_variables";
+
+.back-to-top {
+  --back-to-top-color: #{var(--accentColor)};
+  --back-to-top-color-hover: #{var(--accentColorLighten30)};
+}
+
+#nprogress {
+  --nprogress-color: #{var(--accentColor)};
+}
+
+.DocSearch {
+  --docsearch-primary-color: #{var(--accentColor)};
+  --docsearch-highlight-color: var(--docsearch-primary-color);
+  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
+}
--- a/docs/.vuepress/theme/styles/default/sidebar.scss
+++ b/docs/.vuepress/theme/styles/default/sidebar.scss
@ -0,0 +1,27 @@
+@import "_variables";
+
+.sidebar {
+  .navbar-links {
+    border-bottom: 1px solid var(--borderColor);
+  }
+}
+
+.sidebar-heading {
+  color: var(--textColor);
+}
+
+.sidebar-link {
+  color: var(--textColor);
+}
+
+a.sidebar-heading,
+a.sidebar-link {
+  &.active {
+    color: var(--accentColor);
+    border-left-color: var(--accentColor);
+  }
+
+  &:hover {
+    color: var(--accentColor);
+  }
+}
--- a/docs/.vuepress/theme/styles/index.styl
+++ b/docs/.vuepress/theme/styles/index.styl
@ -1,329 +0,0 @@
-@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 $codeBgColor
-  --arrowBgColor $arrowBgColor
-  --badgeTipColor $badgeTipColor
-  --badgeWarningColor $badgeWarningColor
-  --badgeErrorColor $badgeErrorColor
-  --bgColor $bgColor
-  --kbdBgColor $kbdBgColor
-  --blockquoteTextColor $blockquoteTextColor
-  --blockquoteBorderColor $blockquoteBorderColor
-  --tableBorderColor $tableBorderColor
-  --tableStripeBgColor $tableStripeBgColor
-  --preTextColor $preTextColor
-  --highlightedBgColor $highlightedBgLightColor
-  --languageTextColor $languageTextColor
-  --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
--- a/docs/.vuepress/theme/styles/palette.styl
+++ b/docs/.vuepress/theme/styles/palette.styl
@ -1,79 +0,0 @@
-$contentClass = '.theme-default-content'
-
-$accentColor ?= #3eaf7c
-$accentDarkColor ?= $accentColor
-
-$textColor ?= #2c3e50
-$textDarkColor ?= #e2e2e2
-
-$borderColor ?= #eaecef
-$borderDarkColor ?= #4e4e4e
-
-$codeBgColor ?= #282c34
-$codeBgLightColor ?= #282c34
-
-$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
--- a/docs/README.md
+++ b/docs/README.md
@ -3,8 +3,11 @@ home: true
 heroImage: /LogoX2.png
 heroText: Project X
 tagline: 不畏浮云遮望眼 · 金睛如炬耀苍穹
-actionText: 由此开始 →
-actionLink: /document/
+actions:
+  - text: 由此开始 →
+    link: /document/
+    type: primary
+
 features:
  - title: 极速协议
    details: 原创 VLESS 与 XTLS 协议，摆脱冗余加密，释放CPU算力
--- a/docs/document/README.md
+++ b/docs/document/README.md
@ -1,3 +1,7 @@
+---
+sidebar: auto
+---
+
 # 快速入门

 > **这个章节将告诉您如何用最简单的方式获得 Xray，并且开始使用 Xray。**
--- a/package.json
+++ b/package.json
@ -8,12 +8,12 @@
  "devDependencies": {
    "@types/bootstrap": "^5.0.11",
    "@types/jquery": "^3.5.5",
-    "@vuepress/plugin-back-to-top": "^1.8.2",
+    "@vuepress/plugin-back-to-top": "^2.0.0-beta.6",
    "prettier": "^2.2.1",
    "sass": "^1.32.8",
-    "sass-loader": "^8.0.2",
+    "sass-loader": "^11.0.1",
    "vue-property-decorator": "^9.1.2",
-    "vuepress": "^1.8.2"
+    "vuepress": "^2.0.0-beta.6"
  },
  "scripts": {
    "docs:dev": "vuepress dev docs",
--- a/yarn.lock
+++ b/yarn.lock