feat(theme): migrate to Tailwind CSS variables and refactor theme system

docs/package.json

@@ -19,7 +19,8 @@
     "@rspress/plugin-preview": "^1.44.0",
     "@tailwindcss/postcss": "^4.1.11",
     "@types/node": "^18.11.17",
+    "autoprefixer": "^10.4.22",
     "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.10"
+    "tailwindcss": "^4.1.17"
   }
 }

docs/rspress.config.ts

@@ -60,7 +60,7 @@ export default defineConfig({
       message: "MIT Licensed | © 2025 DevCloudFE. All Rights Reserved.",
     },
   },
-  globalStyles: path.resolve(__dirname, "./docs/tailwind.css"),
+  globalStyles: path.resolve(__dirname, "theme/styles/index.css"),
   route: {
     cleanUrls: true,
   },

docs/tailwind.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  content: [
+    "./docs/**/*.{md,mdx,js,ts,jsx,tsx}",
+    "./theme/**/*.{js,ts,jsx,tsx}",
+  ],
+  darkMode: ["selector"],
+  theme: {
+    extend: {
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: "hsl(var(--primary))",
+      },
+    },
+  },
+};

docs/theme/styles/index.css

@@ -0,0 +1,40 @@
+@import "tailwindcss";
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(222.2 84% 4.9%);
+  --color-primary: hsl(221.2 83.2% 53.3%);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+
+  --rp-c-bg: var(--color-background);
+  --rp-c-text: var(--color-foreground);
+  --rp-c-brand: var(--color-primary);
+  --rp-c-brand-light: color-mix(in srgb, var(--color-primary) 80%, transparent);
+}
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --primary: 221.2 83.2% 53.3%;
+}
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --primary: 217.2 91.2% 59.8%;
+}
+
+@layer base {
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+@layer components {
+  .rspress-doc a {
+    @apply text-primary hover:underline;
+  }
+}

docs/theme/index.tsx → docs/theme/styles/index.tsx

@@ -2,8 +2,8 @@ import { useLang } from "rspress/runtime";
 import {
   HomeLayout as BasicHomeLayout,
   Layout as BasicLayout,
-  //   getCustomMDXComponent,
 } from "rspress/theme";
+import "./styles/index.css";
 
 function HomeLayout() {
   //   const { code: Code } = getCustomMDXComponent();
@@ -21,6 +21,7 @@ const Layout = () => {
             : "🚧 MateChat React 文档仍在开发中"}
         </div>
       }
+      // components={{ ... }}
     />
   );
 };

src/tailwind.css

@@ -1,3 +1,40 @@
 @import "tailwindcss";
-
 @custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-background: hsl(0 0% 100%);
+  --color-foreground: hsl(222.2 84% 4.9%);
+  --color-primary: hsl(221.2 83.2% 53.3%);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-primary: var(--primary);
+
+  --rp-c-bg: var(--color-background);
+  --rp-c-text: var(--color-foreground);
+  --rp-c-brand: var(--color-primary);
+  --rp-c-brand-light: color-mix(in srgb, var(--color-primary) 80%, transparent);
+}
+
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --primary: 221.2 83.2% 53.3%;
+}
+
+.dark {
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --primary: 217.2 91.2% 59.8%;
+}
+
+@layer base {
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+@layer components {
+  .rspress-doc a {
+    @apply text-primary hover:underline;
+  }
+}