cavin/smart-crop-ui

Fork 0

Files

peng b907cc4299 生产管理系统前端 - 瓦力0.71原型图更新

2025-10-28 15:26:08 +08:00

9.1 KiB

Raw Blame History

Dark 模式实现说明

📋 概述

智慧农业生产管理系统现已全面支持 Dark 模式（深色模式），用户可以在浅色和深色主题之间自由切换，提供更舒适的视觉体验。

✨ 主要特性

🎨 主题系统

✅ 自动主题切换 - 点击导航栏的主题切换按钮即可切换
✅ 主题持久化 - 用户选择的主题会保存到 localStorage，刷新页面后保持
✅ 平滑过渡 - 所有颜色变化都有过渡动画效果
✅ 绿色农业主题保持 - Dark 模式下仍然保持绿色农业的主题色系

🎯 使用指南

如何切换主题

位置： 顶部导航栏右侧，消息通知图标左侧

操作步骤：

找到导航栏右上角的主题切换按钮
浅色模式 显示 🌙 月亮图标
深色模式 显示 ☀️ 太阳图标
点击按钮即可切换主题

视觉效果：

┌─────────────────────────────────────────────────────────────┐
│ 🌱 智慧农业生产管理系统                    [🌙] [🔔] [👤]  │
│                                           主题切换           │
└─────────────────────────────────────────────────────────────┘

🎨 颜色方案

浅色模式（Light Mode）

元素	颜色	说明
背景色	`#ffffff`	纯白背景
前景色	`#030213`	深色文字
主题色	`#22c55e`	绿色（农业主题）
边框色	`rgba(0, 0, 0, 0.1)`	浅灰色边框
卡片背景	`#ffffff`	白色卡片
强调色	`#e9ebef`	浅灰色
侧边栏	`#fafafa`	浅色侧边栏

深色模式（Dark Mode）

元素	颜色	说明
背景色	`#0f1419`	深色背景
前景色	`#e7e9ea`	浅色文字
主题色	`#22c55e`	绿色（农业主题保持）
边框色	`rgba(255, 255, 255, 0.1)`	深色边框
卡片背景	`#1a1f26`	深色卡片
强调色	`#1f2937`	深灰色
侧边栏	`#1a1f26`	深色侧边栏

🏗️ 技术实现

1. ThemeProvider 主题提供者

位置： /components/ThemeProvider.tsx

功能：

使用 React Context 管理全局主题状态
自动添加/移除 dark 类名到 <html> 元素
主题状态持久化到 localStorage

使用方式：

import { useTheme } from './components/ThemeProvider';

function MyComponent() {
  const { theme, toggleTheme, setTheme } = useTheme();
  
  return (
    <button onClick={toggleTheme}>
      {theme === 'light' ? '🌙' : '☀️'}
    </button>
  );
}

2. CSS 变量系统

位置： /styles/globals.css

浅色模式变量：

:root {
  --background: #ffffff;
  --foreground: oklch(0.145 0 0);
  --primary: #030213;
  --border: rgba(0, 0, 0, 0.1);
  /* ... 更多变量 */
}

深色模式变量：

.dark {
  --background: #0f1419;
  --foreground: #e7e9ea;
  --primary: #22c55e;
  --border: rgba(255, 255, 255, 0.1);
  /* ... 更多变量 */
}

3. Tailwind Dark 模式支持

配置方式：

@custom-variant dark (&:is(.dark *));

使用示例：

<div className="bg-white dark:bg-gray-900">
  <h1 className="text-gray-900 dark:text-gray-100">标题</h1>
</div>

🎨 设计原则

1. 颜色对比度

✅ 浅色模式 - 深色文字 + 浅色背景
✅ 深色模式 - 浅色文字 + 深色背景
✅ 对比度比例 - 符合 WCAG AA 标准（至少 4.5:1）

2. 主题色保持

🌱 绿色主题 - 无论浅色/深色模式，都保持绿色农业主题
🎨 色调调整 - Dark 模式下使用稍亮的绿色（#22c55e）提高可读性

3. 过渡动画

所有颜色变化都添加了 transition-colors 类，实现平滑过渡：

className="bg-white dark:bg-gray-900 transition-colors"

📦 更新的组件

1. App.tsx

✅ 集成 ThemeProvider
✅ 更新背景色使用 CSS 变量
✅ 添加过渡动画

2. Navigation.tsx

✅ 添加主题切换按钮
✅ 集成 useTheme hook
✅ 更新导航栏和菜单项样式
✅ 优化用户菜单背景渐变

3. Sidebar.tsx

✅ 更新侧边栏背景色
✅ 优化菜单项激活状态颜色
✅ 添加深色模式 hover 效果

4. globals.css

✅ 定义深色模式 CSS 变量
✅ 优化表单字段样式
✅ 确保水波动画在深色模式下正常显示

🎯 适配建议

对于新开发的组件

推荐做法：

// ✅ 使用 CSS 变量（自动适配）
<div className="bg-background text-foreground">

// ✅ 使用 Tailwind dark 变体
<div className="bg-white dark:bg-gray-900">

// ✅ 使用语义化颜色类
<div className="bg-card text-card-foreground border-border">

避免：

// ❌ 硬编码颜色
<div style={{ background: '#ffffff', color: '#000000' }}>

// ❌ 不考虑深色模式的固定颜色
<div className="bg-white text-black">

对于现有组件的适配

检查硬编码颜色
- 搜索 bg-white、bg-gray-50 等固定颜色类
- 替换为 bg-background、bg-card 等语义化类

添加 dark 变体

// Before
<div className="bg-white text-gray-900">

// After
<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">

添加过渡动画

<div className="... transition-colors">

🔍 测试清单

基础功能测试

主题切换按钮显示正确
点击按钮可以切换主题
主题切换时有平滑过渡
刷新页面后主题保持

视觉效果测试

导航栏在深色模式下显示正常
侧边栏在深色模式下显示正常
激活菜单项颜色对比明显
卡片和对话框在深色模式下正常
表单输入框在深色模式下可读

子系统测试

智能农机管理系统
地块信息管理系统
农事操作管理系统
农业资产管理系统
AI作物模型精准决策系统
水肥一体化控制系统
中心配置管理系统

📱 响应式支持

Dark 模式在不同设备上都能正常工作：

✅ 桌面端 - 完整功能
✅ 平板 - 适配良好
✅ 手机 - 按钮和文字大小合适

🎨 特殊组件适配

1. 绿色主题元素

// 保持绿色主题，深色模式下使用稍亮的绿色
className="text-green-700 dark:text-green-400"
className="bg-green-50 dark:bg-green-950"
className="border-green-600 dark:border-green-400"

2. 图表组件

深色模式下的图表颜色已在 CSS 变量中定义：

.dark {
  --chart-1: #22c55e; /* 绿色 */
  --chart-2: #3b82f6; /* 蓝色 */
  --chart-3: #f59e0b; /* 橙色 */
  --chart-4: #8b5cf6; /* 紫色 */
  --chart-5: #ec4899; /* 粉色 */
}

3. 水波动画

水肥一体化系统的水波动画在深色模式下也能正常显示。

🚀 未来优化

计划中的改进

系统主题跟随 - 自动跟随操作系统主题设置
主题预览 - 提供主题切换前的预览功能
自定义主题 - 允许用户自定义主题颜色
深色模式优化 - 进一步优化对比度和可读性

📝 代码示例

使用主题切换

import { useTheme } from './components/ThemeProvider';

function ThemeToggle() {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <button 
      onClick={toggleTheme}
      className="p-2 rounded-lg bg-gray-100 dark:bg-gray-800 
                 hover:bg-gray-200 dark:hover:bg-gray-700
                 transition-colors"
    >
      {theme === 'light' ? (
        <Moon className="w-5 h-5" />
      ) : (
        <Sun className="w-5 h-5" />
      )}
    </button>
  );
}

创建深色模式友好的组件

function Card({ title, children }) {
  return (
    <div className="bg-card border border-border rounded-lg p-4 transition-colors">
      <h3 className="text-card-foreground mb-2">{title}</h3>
      <div className="text-muted-foreground">{children}</div>
    </div>
  );
}

🎉 总结

智慧农业生产管理系统的 Dark 模式现已完全实现，主要特点：

✅ 一键切换 - 点击导航栏按钮即可切换主题 ✅ 自动保存 - 用户选择会自动保存，刷新后保持 ✅ 平滑过渡 - 所有颜色变化都有过渡动画 ✅ 主题保持 - 绿色农业主题在深色模式下依然突出 ✅ 全系统支持 - 所有7大子系统都已适配深色模式

立即体验： 点击导航栏右上角的 🌙 或 ☀️ 图标切换主题！

📞 技术支持

如果在使用 Dark 模式时遇到任何问题，请：

检查浏览器是否支持（推荐使用最新版 Chrome、Firefox、Safari）
清除浏览器缓存并刷新页面
查看浏览器控制台是否有错误信息

最后更新：2025-10-24

9.1 KiB Raw Blame History Unescape Escape