Skip to main content

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 ModeDark 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 切换
  • ✅ 重新设计顶部导航栏
  • ✅ 添加主题切换开关
  • ✅ 实现主题持久化
  • ✅ 优化色彩方案和组件样式
  • ✅ 添加响应式设计支持