MuseNotes Help Center

Appearance

MuseNotes 调色板文档 ​

概述 ​

MuseNotes 使用 Google Keep 风格的调色板系统，提供 24 种颜色选项：

  • 12 种纯色：适合简洁的笔记
  • 12 种背景图案：为笔记添加视觉趣味

所有颜色都支持深色模式，会根据系统主题自动切换。

颜色列表 ​

纯色 (Solid Colors) ​

颜色名称类名浅色模式深色模式用途建议
默认note-color-default#ffffff#202124通用笔记
红色note-color-red#faafa8#5c2b29重要事项、警告
橙色note-color-orange#f39f76#614a19待办事项
黄色note-color-yellow#fff8b8#635d19提醒、高亮
绿色note-color-green#e2f6d3#345920完成事项、成功
青色note-color-teal#b4ddd3#16504b想法、创意
蓝色note-color-blue#d4e4ed#2d555e信息、参考
深蓝note-color-dark-blue#aeccdc#1e3a5f工作相关
紫色note-color-purple#d3bfdb#42275e学习、知识
粉色note-color-pink#f6e2dd#5b2245个人事务
棕色note-color-brown#e9e3d4#442f19归档、历史
灰色note-color-gray#efeff1#3c3f43草稿、临时

背景图案 (Background Patterns) ​

图案名称类名SVG 来源边框色（浅色）边框色（深色）适用场景
庆祝note-color-bg-celebrationGoogle Keep#ffd4a3#5a4a3a生日、节日、成就
美食note-color-bg-foodGoogle Keep#ffcab0#5a3a2a食谱、餐厅推荐
购物note-color-bg-groceryGoogle Keep#c7e8d4#2a4a3a购物清单
音乐note-color-bg-musicGoogle Keep#e8d4f0#4a3a5a歌单、音乐笔记
笔记note-color-bg-notesGoogle Keep#d4e8f0#2a3a5a学习笔记、摘要
地点note-color-bg-placesGoogle Keep#c7e8e0#2a4a4a旅行计划、地点
食谱note-color-bg-recipeGoogle Keep#ffe4b3#5a4a2a烹饪步骤
旅行note-color-bg-travelGoogle Keep#b3d9f0#2a3a4a旅行日记、行程
视频note-color-bg-videoGoogle Keep#ffb3c1#5a2a3a影视笔记、观影清单
花卉note-color-bg-flowersGoogle Keep#ffd4e5#5a2a4a园艺、自然
山脉note-color-bg-mountainsGoogle Keep#d4d9dd#3a3a3a户外活动、探险
海滩note-color-bg-beachGoogle Keep#b3e5f0#2a4a5a度假、海边活动

技术实现 ​

CSS 文件结构 ​

所有颜色定义位于 src/styles/note-colors.css：

css
/* 纯色 - 浅色模式 */
.note-color-red {
  background-color: #faafa8;
  border-color: #faafa8;
}

/* 纯色 - 深色模式 */
.dark .note-color-red {
  background-color: #5c2b29;
  border-color: #5c2b29;
}

/* 背景图案 - 浅色模式 */
.note-color-bg-celebration {
  background-image: url(https://www.gstatic.com/keep/backgrounds/celebration_light_0714.svg);
  background-size: cover;
  background-position: right bottom;
  border-color: #ffd4a3;
}

/* 背景图案 - 深色模式 */
.dark .note-color-bg-celebration {
  background-image: url(https://www.gstatic.com/keep/backgrounds/celebration_dark_0714.svg);
  border-color: #5a4a3a;
}

组件使用 ​

NoteCard.tsx ​

tsx
const noteColorClasses: Record<NoteColor, string> = {
  default: 'note-color-default',
  red: 'note-color-red',
  'bg-celebration': 'note-color-bg-celebration',
  // ...
};

// 使用
<Card className={noteColorClasses[note.color]} />

NoteEditor.tsx ​

tsx
// 颜色选择器按钮
const noteColorClasses: Record<NoteColor, { bg: string; ring: string }> = {
  red: { 
    bg: "note-color-red", 
    ring: "ring-[#faafa8] dark:ring-[#5c2b29]" 
  },
  'bg-celebration': { 
    bg: "note-color-bg-celebration note-color-picker-btn", 
    ring: "ring-pink-300 dark:ring-pink-700" 
  },
  // ...
};

// 编辑器背景
const noteBgClasses: Record<NoteColor, string> = {
  red: "note-color-red",
  'bg-celebration': "note-color-bg-celebration",
  // ...
};

设计原则 ​

1. 颜色对比度 ​

  • 所有纯色在浅色和深色模式下都保持良好的文本可读性
  • 深色模式使用更深、更柔和的颜色以减少眼睛疲劳

2. 边框处理 ​

  • 纯色笔记：边框颜色与背景色一致，创建统一的视觉效果
  • 背景图案笔记：边框颜色与图案主色调协调，不干扰图案显示

3. 深色模式 ​

  • 使用 Tailwind 的 .dark 类前缀自动切换
  • 深色模式颜色经过精心调整，保持与浅色模式相同的视觉层次

4. 可访问性 ​

  • 所有颜色组合都通过 WCAG AA 级对比度测试
  • 颜色不是传达信息的唯一方式（配合图标和文字）

添加新颜色 ​

如需添加新颜色，请按以下步骤操作：

1. 更新类型定义 ​

在 shared/types.ts 中添加新颜色：

typescript
export type NoteColor = 
  | 'default' 
  | 'red'
  // ... 现有颜色
  | 'new-color'  // 新增
  | 'bg-new-pattern';  // 新增背景图案

2. 添加 CSS 定义 ​

在 src/styles/note-colors.css 中添加样式：

css
/* 纯色 */
.note-color-new-color {
  background-color: #hexcode;
  border-color: #hexcode;
}

.dark .note-color-new-color {
  background-color: #dark-hexcode;
  border-color: #dark-hexcode;
}

/* 背景图案 */
.note-color-bg-new-pattern {
  background-image: url(path/to/pattern.svg);
  background-size: cover;
  background-position: right bottom;
  border-color: #border-color;
}

.dark .note-color-bg-new-pattern {
  background-image: url(path/to/pattern-dark.svg);
  border-color: #dark-border-color;
}

3. 更新组件映射 ​

在 src/components/notes/NoteCard.tsx 和 src/components/notes/NoteEditor.tsx 中添加映射：

tsx
const noteColorClasses: Record<NoteColor, string> = {
  // ... 现有颜色
  'new-color': 'note-color-new-color',
  'bg-new-pattern': 'note-color-bg-new-pattern',
};

4. 添加到调色板 ​

在 NoteEditor.tsx 的 colorPalette 数组中添加：

tsx
const colorPalette: NoteColor[] = [
  // ... 现有颜色
  "new-color",
  "bg-new-pattern",
];

最佳实践 ​

颜色选择建议 ​

  1. 工作笔记：使用蓝色系（蓝色、深蓝）
  2. 个人事务：使用暖色系（粉色、橙色）
  3. 重要提醒：使用红色或黄色
  4. 已完成事项：使用绿色
  5. 创意想法：使用紫色或青色
  6. 特殊场景：使用对应的背景图案

性能优化 ​

  • CSS 类比内联样式性能更好
  • 背景图片使用 Google CDN，加载速度快
  • 深色模式切换无需 JavaScript，由 CSS 处理

维护建议 ​

  • 所有颜色定义集中在 note-colors.css，便于统一管理
  • 修改颜色只需更新 CSS 文件，无需修改组件代码
  • 使用语义化的类名，提高代码可读性

参考资源 ​

更新日志 ​

2024-12-01 ​

  • ✅ 初始版本：24 种颜色（12 纯色 + 12 背景图案）
  • ✅ 完整的深色模式支持
  • ✅ 重构为 CSS 类系统
  • ✅ 优化背景图案边框颜色