style(tailwind): migrate to Tailwind CSS and update theme handling

- Integrated Tailwind CSS into the project by adding necessary imports and configurations.
- Updated CSS files to reflect the transition to Tailwind, including commenting out old styles and adjusting theme-related attributes.
- Changed theme mode handling in the ThemeProvider and CitationBlock components for consistency with the new class-based approach.

electron.vite.config.ts

@@ -1,3 +1,4 @@
+import tailwindcss from '@tailwindcss/vite'
 import react from '@vitejs/plugin-react-swc'
 import { CodeInspectorPlugin } from 'code-inspector-plugin'
 import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
@@ -80,7 +81,6 @@ export default defineConfig({
   },
   renderer: {
     plugins: [
-      (async () => (await import('@tailwindcss/vite')).default())(),
       react({
         tsDecorators: true,
         plugins: [
@@ -96,7 +96,8 @@ export default defineConfig({
         ]
       }),
       ...(isDev ? [CodeInspectorPlugin({ bundler: 'vite' })] : []), // 只在开发环境下启用 CodeInspectorPlugin
-      ...visualizerPlugin('renderer')
+      ...visualizerPlugin('renderer'),
+      tailwindcss()
     ],
     resolve: {
       alias: {

packages/ui/src/styles/theme.css

@@ -8,10 +8,6 @@
  * Generated on: 2025-11-07T08:56:09.444Z
  */
 
-@import 'tailwindcss';
-
-@custom-variant dark (&:is(.dark *));
-
 @theme {
   /* ==================== */
   /* Primitive Colors */

src/renderer/src/assets/styles/color.css

@@ -1,3 +1,10 @@
+/* ==================================================
+ * 旧的 color.css 已被注释，等待完全移除
+ * 项目正在迁移到 Tailwind CSS
+ * ==================================================
+ */
+
+/*
 :root {
   --color-white: #ffffff;
   --color-white-soft: rgba(255, 255, 255, 0.8);
@@ -19,7 +26,7 @@
   --color-background-soft: var(--color-black-soft);
   --color-background-mute: var(--color-black-mute);
   --color-background-opacity: rgba(34, 34, 34, 0.7);
-  --inner-glow-opacity: 0.3; /* For the glassmorphism effect in the dropdown menu */
+  --inner-glow-opacity: 0.3;
 
   --color-primary: #00b96b;
   --color-primary-soft: #00b96b99;
@@ -145,3 +152,4 @@
   --color-list-item: #252525;
   --color-list-item-hover: #1e1e1e;
 }
+*/

src/renderer/src/assets/styles/scrollbar.css

@@ -12,7 +12,7 @@
   --scrollbar-thumb-radius: 10px;
 }
 
-body[theme-mode='light'] {
+body.light {
   --color-scrollbar-thumb: var(--color-scrollbar-thumb-light);
   --color-scrollbar-thumb-hover: var(--color-scrollbar-thumb-light-hover);
 }

src/renderer/src/assets/styles/selection-toolbar.css

@@ -56,7 +56,7 @@ html {
   --selection-toolbar-button-bgcolor-hover: #333333;
 }
 
-[theme-mode='light'] {
+html.light {
   --selection-toolbar-border: none;
   --selection-toolbar-box-shadow: 0px 2px 3px rgba(50, 50, 50, 0.1);
   --selection-toolbar-background: rgba(245, 245, 245, 0.95);

src/renderer/src/assets/styles/tailwind.css

@@ -1,7 +1,9 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
-@source '../../../../../packages/ui/src/components/**/*.{js,ts,jsx,tsx}';
+
 @import '../../../../../packages/ui/src/styles/theme.css';
+@source '../../../../../packages/ui/src/components/*.{js,ts,jsx,tsx}';
+@custom-variant dark (&:is(.dark *));
 
 /* 如需自定义:
 1. 清晰地组织自定义 CSS 到相应的层中。
@@ -19,7 +21,6 @@
 :root {
   --icon: #00000099;
 
-  /* Shadcn Variables - 只保留 @theme inline 中使用的变量 */
   --primary-foreground: oklch(0.985 0 0);
   --card-foreground: oklch(0.145 0 0);
   --popover-foreground: oklch(0.145 0 0);
@@ -44,7 +45,6 @@
 .dark {
   --icon: #ffffff99;
 
-  /* Shadcn Dark Mode Variables - 只保留 @theme inline 中使用的变量 */
   --primary-foreground: oklch(0.205 0 0);
   --card-foreground: oklch(0.985 0 0);
   --popover-foreground: oklch(0.985 0 0);
@@ -68,13 +68,7 @@
 
 /* shadcn中的默认变量(排除了与ui库冲突的变量，只映射ui库缺少的变量) */
 @theme inline {
-  /* Icon 颜色 - 应用特定变量 */
   --color-icon: var(--icon);
-
-  /* Shadcn Tailwind Mappings - 只映射 UI 库缺少的变量 */
-  /* 注意：--color-primary, --color-background 等核心变量由 UI 库的 theme.css 提供 */
-
-  /* Foreground colors - UI 库缺少的 */
   --color-primary-foreground: var(--primary-foreground);
   --color-card-foreground: var(--card-foreground);
   --color-popover-foreground: var(--popover-foreground);
@@ -83,17 +77,14 @@
   --color-accent-foreground: var(--accent-foreground);
   --color-destructive-foreground: var(--destructive-foreground);
 
-  /* Input - UI 库缺少的 */
   --color-input: var(--input);
 
-  /* Chart colors - UI 库缺少的 */
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
 
-  /* Sidebar extensions - UI 库缺少的 */
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
@@ -101,7 +92,6 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
-  /* 跑马灯动画 - 应用特定 */
   --animate-marquee: marquee var(--duration) infinite linear;
   --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
 

src/renderer/src/context/ThemeProvider.tsx

@@ -55,7 +55,6 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
   useEffect(() => {
     // Set initial theme and OS attributes on body
     document.body.setAttribute('os', isMac ? 'mac' : isWin ? 'windows' : 'linux')
-    document.body.setAttribute('theme-mode', actualTheme)
     if (actualTheme === ThemeMode.dark) {
       document.body.classList.remove('light')
       document.body.classList.add('dark')
@@ -76,7 +75,6 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
 
     // listen for theme updates from main process
     return window.electron.ipcRenderer.on(IpcChannel.NativeThemeUpdated, (_, actualTheme: ThemeMode) => {
-      document.body.setAttribute('theme-mode', actualTheme)
       setActualTheme(actualTheme)
     })
   }, [actualTheme, initUserTheme, language, navbarPosition, setSettedTheme, settedTheme])

src/renderer/src/pages/home/Messages/Blocks/CitationBlock.tsx

@@ -71,8 +71,8 @@ function CitationBlock({ block }: { block: CitationMessageBlock }) {
               dangerouslySetInnerHTML={{
                 __html:
                   (block.response?.results as GroundingMetadata)?.searchEntryPoint?.renderedContent
-                    ?.replace(/@media \(prefers-color-scheme: light\)/g, 'body[theme-mode="light"]')
-                    .replace(/@media \(prefers-color-scheme: dark\)/g, 'body[theme-mode="dark"]')
+                    ?.replace(/@media \(prefers-color-scheme: light\)/g, 'body.light')
+                    .replace(/@media \(prefers-color-scheme: dark\)/g, 'body.dark')
                     .replace(
                       /background-color\s*:\s*#[0-9a-fA-F]{3,6}\b|\bbackground-color\s*:\s*[a-zA-Z-]+\b/g,
                       'background-color: var(--color-background-soft)'