Add: dark mode

docs/.vuepress/components/Tab.vue

@@ -24,7 +24,7 @@ export default Vue.extend({
       labelID: ""
     };
   },
-  created() {
+  beforeMount() {
     let tag =
       "tab-" +
       Math.random()

docs/.vuepress/components/Tabs.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="container">
     <nav>
-      <div class="nav nav-tabs" :id="tag" role="tablist">
+      <div :id="tag" class="nav nav-pills" role="tablist">
         <button
           v-for="tab of children"
-          class="nav-link"
           :id="tab.labelID"
-          data-bs-toggle="tab"
-          :data-bs-target="'#' + tab.tabID"
-          type="button"
-          role="tab"
           :aria-controls="tab.tabID"
+          :data-bs-target="'#' + tab.tabID"
           aria-selected="false"
+          class="nav-link"
+          data-bs-toggle="tab"
+          role="tab"
+          type="button"
         >
           {{ tab.title }}
         </button>
@@ -60,4 +60,19 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 @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;
+}
 </style>

docs/.vuepress/config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  theme: "default-prefers-color-scheme",
   plugins: ["@vuepress/back-to-top", "vuepress-plugin-mermaidjs"],
   base: "/Xray-docs-next/",
   locales: {
@@ -149,5 +150,6 @@ module.exports = {
       .options({
         name: `assets/img/[name].[hash:8].[ext]`
       });
-  }
+  },
+  postcss: { plugins: [require("autoprefixer")] }
 };

docs/.vuepress/styles/blockquote.styl

@@ -0,0 +1,19 @@
+
+: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

docs/.vuepress/styles/index.styl

@@ -1,5 +1,2 @@
-blockquote {
-    color #000
-    background-color #f3f5f7
-    border-left 4px solid #17a2b8
-}
+@import "blockquote.styl"
+@import "theme.styl"

docs/.vuepress/styles/palette.styl

@@ -1,20 +1,3 @@
 $accentColor = #2e73ea
-$textColor = #2c3e50
-$borderColor = #eaecef
-$codeBgColor = #282c34
-$arrowBgColor = #ccc
-$badgeTipColor = #81e98f
-$badgeWarningColor = darken(#ffe564, 35%)
-$badgeErrorColor = #DA5961
-
-// 布局
-$navbarHeight = 3.6rem
-$sidebarWidth = 20rem
-$contentWidth = 740px
-$homePageWidth = 960px
-
-// 响应式变化点
-$MQNarrow = 959px
-$MQMobile = 719px
-$MQMobileNarrow = 419px
-
+$accentDarkColor= #2a6add
+$tipBgDarkColor = #373a3f

docs/.vuepress/styles/theme.styl

@@ -0,0 +1,5 @@
+*
+  scroll-behavior smooth
+  transition background-color .1s ease
+  @media screen and (prefers-reduced-motion: true)
+    scroll-behavior auto

package.json

@@ -23,6 +23,7 @@
     "bootstrap": "^5.0.0-beta3",
     "jquery": "^3.6.0",
     "markdown-it-footnote": "^3.0.2",
-    "vuepress-plugin-mermaidjs": "^1.8.1"
+    "vuepress-plugin-mermaidjs": "^1.8.1",
+    "vuepress-theme-default-prefers-color-scheme": "^2.0.0"
   }
 }

yarn.lock

@@ -8103,6 +8103,11 @@ vuepress-plugin-smooth-scroll@^0.0.3:
   dependencies:
     smoothscroll-polyfill "^0.4.3"
 
+vuepress-theme-default-prefers-color-scheme@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/vuepress-theme-default-prefers-color-scheme/-/vuepress-theme-default-prefers-color-scheme-2.0.0.tgz#c5d305b1b4d10d0915b4bb413e554966d5171b25"
+  integrity sha512-4sA3DCiaIIHVjcIC5+mF00mf29IU27KSH97Ga4xb4nUwwlC6eYHg2qchEVOgV25XogCtGgpZ/DCrTkywxvuBcg==
+
 vuepress@^1.8.2:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/vuepress/-/vuepress-1.8.2.tgz#97e8bf979630611fc7b621fc4cc35b798ee5e847"