From 8429e678bcf7052f9117938d170ca8b6dfb7bb46 Mon Sep 17 00:00:00 2001 From: MyPrototypeWhat Date: Tue, 11 Nov 2025 17:03:14 +0800 Subject: [PATCH] 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 | 5 +++-- packages/ui/src/styles/theme.css | 4 ---- src/renderer/src/assets/styles/color.css | 10 +++++++++- src/renderer/src/assets/styles/scrollbar.css | 2 +- .../src/assets/styles/selection-toolbar.css | 2 +- src/renderer/src/assets/styles/tailwind.css | 16 +++------------- src/renderer/src/context/ThemeProvider.tsx | 2 -- .../pages/home/Messages/Blocks/CitationBlock.tsx | 4 ++-- 8 files changed, 19 insertions(+), 26 deletions(-) diff --git a/electron.vite.config.ts b/electron.vite.config.ts index 76c1b55401..c6dc1c0cd1 100644 --- a/electron.vite.config.ts +++ b/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: { diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css index e690247754..4c018864b0 100644 --- a/packages/ui/src/styles/theme.css +++ b/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 */ diff --git a/src/renderer/src/assets/styles/color.css b/src/renderer/src/assets/styles/color.css index 5d625937e7..03c53b6424 100644 --- a/src/renderer/src/assets/styles/color.css +++ b/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; } +*/ diff --git a/src/renderer/src/assets/styles/scrollbar.css b/src/renderer/src/assets/styles/scrollbar.css index 461384381e..62a4354f49 100644 --- a/src/renderer/src/assets/styles/scrollbar.css +++ b/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); } diff --git a/src/renderer/src/assets/styles/selection-toolbar.css b/src/renderer/src/assets/styles/selection-toolbar.css index 6efcb57d1f..09be283630 100644 --- a/src/renderer/src/assets/styles/selection-toolbar.css +++ b/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); diff --git a/src/renderer/src/assets/styles/tailwind.css b/src/renderer/src/assets/styles/tailwind.css index 888d988cc4..3b5c85c120 100644 --- a/src/renderer/src/assets/styles/tailwind.css +++ b/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; diff --git a/src/renderer/src/context/ThemeProvider.tsx b/src/renderer/src/context/ThemeProvider.tsx index 1681bac88e..e700f67232 100644 --- a/src/renderer/src/context/ThemeProvider.tsx +++ b/src/renderer/src/context/ThemeProvider.tsx @@ -55,7 +55,6 @@ export const ThemeProvider: React.FC = ({ 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 = ({ 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]) diff --git a/src/renderer/src/pages/home/Messages/Blocks/CitationBlock.tsx b/src/renderer/src/pages/home/Messages/Blocks/CitationBlock.tsx index 1871289cc9..06ac3b36c9 100644 --- a/src/renderer/src/pages/home/Messages/Blocks/CitationBlock.tsx +++ b/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)'