DatomsDBS 主题风格指南

概述

DatomsDBS 现在支持 Light Mode 和 Dark Mode 切换，设计风格参考 Google Cloud Console，提供专业、现代的用户体验。

主题切换功能

实现方式

• CSS变量驱动: 使用 CSS 自定义属性实现主题切换
• HTML属性控制: 通过 html[data-theme="dark"] 选择器切换主题
• localStorage持久化: 用户选择的主题会保存在本地存储中
• 跨页面同步: 用户端和管理端共享主题设置

切换开关

• 位置: 顶部导航栏右侧，用户信息旁边
• 样式: Google Cloud Console 风格的滑动开关
• 图标: 太阳 (☀️) 表示 Light Mode，月亮 (🌙) 表示 Dark Mode
• 交互: 平滑的过渡动画，悬浮时有视觉反馈

色彩方案

Light Mode (默认)

--primary-color: #1a73e8;           /* Google Blue */
--background-color-body: #ffffff;    /* 纯白背景 */
--background-color-card: #ffffff;    /* 卡片背景 */
--text-color-primary: #202124;      /* 主文字色 */
--text-color-secondary: #5f6368;    /* 次要文字色 */
--border-color-base: #dadce0;       /* 基础边框色 */

Dark Mode

--primary-color: #8ab4f8;           /* 适合深色背景的蓝色 */
--background-color-body: #202124;    /* 深色主背景 */
--background-color-card: #303134;    /* 卡片背景 */
--text-color-primary: #e8eaed;      /* 浅色主文字 */
--text-color-secondary: #9aa0a6;    /* 次要文字色 */
--border-color-base: #3c4043;       /* 深色边框 */

状态色彩

状态	Light Mode	Dark Mode
成功	#137333	#81c995
警告	#f9ab00	#fdd663
危险	#d93025	#f28b82
信息	#1a73e8	#8ab4f8

组件样式

顶部导航栏 (Header)

• 高度: 64px (Google 标准)
• 背景: 与页面主体背景一致
• 边框: 底部有细边框分割
• 阴影: 轻微阴影增加层次感
• 布局: 左侧Logo，右侧用户信息和控件

按钮系统

• 主按钮: 使用主色调，白色文字
• 次按钮: 透明背景，主色调边框和文字
• 危险按钮: 红色系，适配两种主题
• 悬浮效果: 颜色变化和轻微阴影

卡片组件

• 背景: 与主题背景形成对比
• 边框: 细边框，颜色适配主题
• 圆角: 8px (Google 风格)
• 阴影: 轻微阴影，Dark Mode 下更加微妙

表单元素

• 输入框: 背景色适配主题，聚焦时有蓝色边框
• 选择框: 与输入框保持一致的样式
• 复选框: 原生样式，适配主题色彩

响应式设计

移动端适配

• Header高度: 56px (移动端)
• 侧边栏: 全宽显示，可折叠
• 按钮: 全宽布局
• 间距: 减少内边距以适应小屏幕

断点

• 桌面端: > 768px
• 移动端: ≤ 768px

技术实现

文件结构

public/
├── css/
│   └── styles.css          # 用户端样式
├── admin/css/
│   └── admin.css           # 管理端样式
├── js/
│   └── theme-manager.js    # 主题管理脚本
└── admin/js/
    └── theme-manager.js    # 管理端主题脚本

主题管理器 API

// 获取当前主题
window.themeManager.getCurrentTheme()

// 设置主题
window.themeManager.setTheme('dark')

// 切换主题
window.themeManager.toggleTheme()

// 检查是否为深色模式
window.themeManager.isDarkMode()

事件系统

// 监听主题变化
document.addEventListener('themeChanged', (event) => {
  console.log('Theme changed to:', event.detail.theme);
});

最佳实践

CSS 变量使用

• 所有颜色都通过 CSS 变量定义
• 避免硬编码颜色值
• 使用语义化的变量名

对比度要求

• 文字与背景对比度 ≥ 4.5:1
• 重要元素对比度 ≥ 7:1
• 符合 WCAG 2.1 AA 标准

动画和过渡

• 使用 cubic-bezier(0.4, 0.0, 0.2, 1) 缓动函数
• 过渡时间: 0.2s (标准), 0.1s (快速)
• 避免过度动画影响性能

浏览器兼容性

支持的浏览器

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

降级策略

• CSS 变量不支持时回退到 Light Mode
• localStorage 不可用时使用默认主题
• 优雅降级，不影响核心功能

维护指南

添加新颜色

1. 在 :root 中定义 Light Mode 颜色
2. 在 html[data-theme="dark"] 中定义 Dark Mode 颜色
3. 使用语义化命名
4. 更新本文档

测试清单

• 主题切换功能正常
• 颜色对比度符合要求
• 移动端显示正确
• localStorage 持久化工作
• 跨页面主题同步
• 所有组件在两种主题下都正常显示

更新日志

v1.0.0 (2025-05-29)

• ✅ 实现 Light/Dark Mode 切换
• ✅ 重新设计顶部导航栏
• ✅ 添加主题切换开关
• ✅ 实现主题持久化
• ✅ 优化色彩方案和组件样式
• ✅ 添加响应式设计支持