Fix UI theme details

.vitepress/theme/style.scss

@@ -2,10 +2,31 @@
 @tailwind components;
 @tailwind utilities;
 
-/* .vitepress/theme/custom.css */
+/* 
+  .vitepress/theme/custom.css 
+
+  https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+*/
 :root {
   --vp-c-brand-1: #5622cf;
   --vp-c-brand-2: #7350ff;
+  --vp-font-family-base: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
+    Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
+    Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+
+  --vp-c-divider: #e4e4eb;
+  --vp-c-sidebar-border: #e0e0e9;
+
+  --vp-c-text-2: #202020;
+
+  --vp-sidebar-width: 300px;
+  --vp-sidebar-bg-color: #f8f9fa;
+
+  --vp-layout-max-width: 1800px;
+}
+
+.VPDoc .content-container {
+  max-width: 820px !important;
 }
 
 ul {
@@ -33,6 +54,10 @@ ol {
   border-radius: 5px;
   font-size: 1em;
 
+  & > p {
+    margin: 0;
+  }
+
   &-bg-1 {
     @apply bg-red-50 dark:bg-red-950;
   }
@@ -103,7 +128,20 @@ ol {
   }
 }
 .VPSidebar {
-  border-right: 1px solid var(--vp-c-divider);
+  border-right: 1px solid var(--vp-c-sidebar-border);
+
+  .VPSidebarItem.level-1 .text {
+    color: var(--vp-c-text-2) !important;
+    font-size: 0.9em;
+  }
+
+  .VPSidebarItem.level-2 .text,
+  .VPSidebarItem.level-3 .text,
+  .VPSidebarItem.level-4 .text,
+  .VPSidebarItem.level-5 .text {
+    font-weight: normal;
+    color: var(--vp-c-text-2) !important;
+  }
 }
 .VPSidebarItem.level-0 {
   .VPLink {
@@ -119,3 +157,8 @@ ol {
     }
   }
 }
+
+.vp-doc table tr td > p {
+  margin: 0;
+  line-height: 1.7;
+}

package.json

@@ -8,14 +8,17 @@
   },
   "dependencies": {
     "autocorrect-node": "^2.8.4",
+    "autoprefixer": "^10.4.16",
     "feishu-pages": "0.6.3",
     "glob": "^10.3.10",
     "medium-zoom": "^1.0.8",
     "opencc-js": "^1.0.5",
+    "postcss": "^8.4.30",
     "sass": "^1.69.3",
-    "vitepress": "^1.0.0-rc.22"
+    "tailwindcss": "^3.3.3",
+    "vitepress": "^1.0.0-rc.31"
   },
   "devDependencies": {
     "prettier": "^3.0.3"
   }
-}
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['**/*.md'],
+  theme: {
+    extend: {},
+  },
+  darkMode: 'class',
+  plugins: [],
+};