主题系统
GanttFlow 提供了灵活的主题系统，支持亮色/暗色模式切换和完全自定义。
内置主题
GanttFlow 自带三种内置主题：
tsx
// 亮色主题
<EnhancedGanttChart options={{ theme: 'light' }} />
// 暗色主题
<EnhancedGanttChart options={{ theme: 'dark' }} />
// 自动跟随系统设置（默认）
<EnhancedGanttChart options={{ theme: 'auto' }} />CSS 变量覆盖
通过覆盖 CSS 变量可以实现完全自定义主题：
css
:root {
/* ===== 主色调 ===== */
--gantt-primary: #4f46e5;
--gantt-primary-hover: #4338ca;
--gantt-primary-light: #6366f1;
--gantt-primary-dark: #3730a3;
/* ===== 强调色 ===== */
--gantt-accent: #06b6d4;
--gantt-accent-hover: #0891b2;
/* ===== 成功/警告/错误 ===== */
--gantt-success: #10b981;
--gantt-warning: #f59e0b;
--gantt-error: #ef4444;
/* ===== 背景色 ===== */
--gantt-bg: #ffffff;
--gantt-bg-secondary: #f9fafb;
--gantt-bg-tertiary: #f3f4f6;
--gantt-bg-elevated: #ffffff;
/* ===== 文字颜色 ===== */
--gantt-text-primary: #111827;
--gantt-text-secondary: #6b7280;
--gantt-text-tertiary: #9ca3af;
/* ===== 边框颜色 ===== */
--gantt-border: #e5e7eb;
--gantt-border-hover: #d1d5db;
/* ===== 任务条颜色 ===== */
--gantt-task-bg: #4f46e5;
--gantt-task-progress: #4338ca;
--gantt-task-border: #3730a3;
--gantt-task-text: #ffffff;
/* ===== 周末/节假日背景 ===== */
--gantt-weekend-bg: #f9fafb;
--gantt-holiday-bg: #fef2f2;
/* ===== 今日线颜色 ===== */
--gantt-today-line: #ef4444;
/* ===== 依赖线颜色 ===== */
--gantt-dependency-line: #6b7280;
--gantt-critical-path: #ef4444;
/* ===== 尺寸配置 ===== */
--gantt-column-width: 60px;
--gantt-row-height: 44px;
--gantt-header-height: 56px;
/* ===== 圆角 ===== */
--gantt-radius: 8px;
--gantt-radius-sm: 4px;
--gantt-radius-lg: 12px;
/* ===== 阴影 ===== */
--gantt-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
--gantt-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* 暗色主题 */
.dark {
--gantt-bg: #111827;
--gantt-bg-secondary: #1f2937;
--gantt-bg-tertiary: #374151;
--gantt-bg-elevated: #1f2937;
--gantt-text-primary: #f9fafb;
--gantt-text-secondary: #d1d5db;
--gantt-text-tertiary: #9ca3af;
--gantt-border: #374151;
--gantt-border-hover: #4b5563;
--gantt-weekend-bg: #1f2937;
--gantt-holiday-bg: rgba(239, 68, 68, 0.1);
}任务颜色自定义
全局任务颜色
tsx
<EnhancedGanttChart
options={{
taskDefaultColor: '#4f46e5'
}}
/>单个任务颜色
tsx
const tasks = [
{
id: "1",
name: "后端开发",
start: "2023-03-01",
end: "2023-03-10",
color: "#10b981" // 绿色
},
{
id: "2",
name: "前端开发",
start: "2023-03-05",
end: "2023-03-15",
color: "#3b82f6" // 蓝色
},
{
id: "3",
name: "测试",
start: "2023-03-12",
end: "2023-03-20",
color: "#f59e0b" // 橙色
},
{
id: "4",
name: "运维部署",
start: "2023-03-18",
end: "2023-03-25",
color: "#ef4444" // 红色
},
]按进度设置颜色
tsx
const getTaskColor = (task) => {
if (task.progress === 100) return '#10b981' // 完成 - 绿色
if (task.progress >= 50) return '#3b82f6' // 进行中 - 蓝色
if (task.progress > 0) return '#f59e0b' // 开始但未完成 - 橙色
return '#6b7280' // 未开始 - 灰色
}
<EnhancedGanttChart
tasks={tasks}
getTaskColor={getTaskColor}
/>主题切换
通过 Props 切换
tsx
const [theme, setTheme] = useState<'light' | 'dark'>('light')
<EnhancedGanttChart
options={{ theme }}
/>通过 Ref 切换
tsx
const ganttRef = useRef(null)
const toggleTheme = () => {
ganttRef.current?.toggleTheme()
}
const setLightTheme = () => {
ganttRef.current?.setTheme('light')
}
const setDarkTheme = () => {
ganttRef.current?.setTheme('dark')
}
<>
<button onClick={toggleTheme}>切换主题</button>
<button onClick={setLightTheme}>亮色</button>
<button onClick={setDarkTheme}>暗色</button>
<EnhancedGanttChart ref={ganttRef} tasks={tasks} />
</>自动跟随系统
tsx
// 自动检测系统主题
<EnhancedGanttChart options={{ theme: 'auto' }} />自定义样式类
tsx
<EnhancedGanttChart
className="my-custom-gantt"
style={{
borderRadius: '12px',
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
overflow: 'hidden'
}}
/>css
.my-custom-gantt {
border: 2px solid #4f46e5;
}
.my-custom-gantt .gantt-task {
border-radius: 4px;
}暗黑模式适配
GanttFlow 会自动检测系统主题并应用对应样式。如需手动控制：
方式一：通过 HTML class
html
<html class="dark">
<!-- 强制启用暗色模式 -->
</html>方式二：通过 props
tsx
<EnhancedGanttChart options={{ theme: 'dark' }} />方式三：通过 JavaScript 检测
tsx
import { useEffect, useState } from 'react'
function useSystemTheme() {
const [theme, setTheme] = useState<'light' | 'dark'>('light')
useEffect(() => {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
setTheme(mediaQuery.matches ? 'dark' : 'light')
const handler = (e) => setTheme(e.matches ? 'dark' : 'light')
mediaQuery.addEventListener('change', handler)
return () => mediaQuery.removeEventListener('change', handler)
}, [])
return theme
}
function App() {
const theme = useSystemTheme()
return <EnhancedGanttChart options={{ theme }} />
}主题预设
企业蓝
css
:root {
--gantt-primary: #2563eb;
--gantt-primary-hover: #1d4ed8;
--gantt-task-bg: #2563eb;
}科技绿
css
:root {
--gantt-primary: #059669;
--gantt-primary-hover: #047857;
--gantt-task-bg: #059669;
}活力橙
css
:root {
--gantt-primary: #ea580c;
--gantt-primary-hover: #c2410c;
--gantt-task-bg: #ea580c;
}