配色方案 - Firefly

建议原则：

主题色只影响 5 类元素：主按钮、导航选中态、勾选框/开关、焦点环、当前 Tab 高亮
状态色（橙/红/绿）不随主题变，保持语义稳定
灰阶随主题做微调（暖主题用暖灰，冷主题用冷灰），这是”高级感”的关键
用 HSL/OKLCH 变量，方便同一套色自动生成 hover / soft 背景

二、配色方案（项目名 Emulsion = 胶片乳剂，用胶片命名很贴切）#

主题	定位	Primary	Hover	Soft 背景	页面背景	说明
银盐 Silver（默认）	当前中性风格	`#18181b`	`#27272a`	`#f4f4f5`	`#fafafa`	保留现状
柯达 Kodak	暖金黄	`#c9860a`	`#a86e05`	`#fdf5e3`	`#fcfaf6`	摄影感最强，与橙色状态相近，注意区分
富士 Fuji	深翠绿	`#0f7a5c`	`#0b5f48`	`#e5f4ee`	`#f8fbf9`	清爽、护眼、专业
爱克发 Agfa	砖红	`#c2410c`	`#9a3412`	`#fdece4`	`#fcf9f7`	复古、有冲击力
依尔福 Ilford	石板蓝灰	`#3b5b8a`	`#2e4a72`	`#e9eef6`	`#f8f9fb`	黑白胶片品牌，沉稳工具感
宝丽来 Polaroid	靛紫	`#5b5bd6`	`#4747b8`	`#ecebfb`	`#f9f9fc`	现代、年轻，偏 SaaS
樱花 Sakura（可选）	玫粉	`#c2497a`	`#9d3762`	`#fbe9f0`	`#fcf9fa`	柔和，给女性向用户

每个主题内附带 对比度检查：以上 Primary 在白底上的对比度均 ≥ 4.5:1（柯达金稍弱，白字建议用 #1c1500 深字或加深到 #b0740a）。

选中态处理建议（左侧导航”存储整理”）：

背景用 primary-soft，文字/图标用 primary，左侧可加 2px 的 primary 竖线，比现在纯灰更有辨识度。

三、Token 设计#

CSS

1
:root,
2
[data-accent="silver"] {
3
  --bg: 0 0% 98%;
4
  --card: 0 0% 100%;
5
  --fg: 240 10% 4%;
6
  --muted: 240 5% 96%;
7
  --muted-fg: 240 4% 46%;
8
  --border: 240 6% 90%;
9

10
  --primary: 240 6% 10%;
11
  --primary-hover: 240 5% 15%;
12
  --primary-fg: 0 0% 98%;
13
  --primary-soft: 240 5% 96%;      /* 选中态背景 */
14
  --primary-soft-fg: 240 6% 10%;
15
  --ring: 240 6% 10%;
16

17
  /* 语义色：不随主题变 */
18
  --success: 142 71% 35%;
19
  --warning: 32 95% 44%;
20
  --danger: 0 72% 51%;
21
  --info: 217 91% 60%;
22
}
23

24
[data-accent="kodak"] {
25
  --bg: 40 40% 98%;
26
  --border: 40 20% 89%;
27
  --muted: 40 30% 95%;
28
  --muted-fg: 40 8% 45%;
29
  --primary: 39 90% 41%;
30
  --primary-hover: 39 94% 34%;
31
  --primary-fg: 40 60% 6%;
32
  --primary-soft: 40 87% 94%;
33
  --primary-soft-fg: 39 94% 30%;
34
  --ring: 39 90% 41%;
35
}
36

37
[data-accent="fuji"] {
38
  --bg: 150 30% 98%;
39
  --border: 150 12% 89%;
40
  --muted: 150 20% 95%;
41
  --muted-fg: 150 6% 44%;
42
  --primary: 162 78% 27%;
43
  --primary-hover: 162 80% 21%;
44
  --primary-fg: 0 0% 100%;
45
  --primary-soft: 156 40% 93%;
46
  --primary-soft-fg: 162 78% 22%;
47
  --ring: 162 78% 27%;
48
}
49

50
[data-accent="agfa"] {
51
  --bg: 25 40% 98%;
52
  --border: 25 18% 89%;
53
  --muted: 25 30% 95%;
54
  --muted-fg: 25 8% 45%;
55
  --primary: 17 88% 40%;
56
  --primary-hover: 17 88% 32%;
57
  --primary-fg: 0 0% 100%;
58
  --primary-soft: 20 86% 94%;
59
  --primary-soft-fg: 17 88% 32%;
60
  --ring: 17 88% 40%;
61
}
62

63
[data-accent="ilford"] {
64
  --bg: 220 25% 98%;
65
  --border: 220 14% 89%;
66
  --muted: 220 20% 95%;
67
  --muted-fg: 220 8% 45%;
68
  --primary: 216 40% 39%;
69
  --primary-hover: 216 43% 31%;
70
  --primary-fg: 0 0% 100%;
71
  --primary-soft: 216 42% 94%;
72
  --primary-soft-fg: 216 43% 31%;
73
  --ring: 216 40% 39%;
74
}
75

76
[data-accent="polaroid"] {
77
  --bg: 240 25% 98%;
78
  --border: 240 14% 90%;
79
  --muted: 240 20% 95%;
80
  --muted-fg: 240 6% 46%;
81
  --primary: 240 60% 60%;
82
  --primary-hover: 240 45% 50%;
83
  --primary-fg: 0 0% 100%;
84
  --primary-soft: 243 67% 95%;
85
  --primary-soft-fg: 240 45% 45%;
86
  --ring: 240 60% 60%;
87
}

如果用 Tailwind（看风格大概率是 shadcn/ui）：

JavaScript

1
colors: {
2
  background: 'hsl(var(--bg))',
3
  border: 'hsl(var(--border))',
4
  primary: {
5
    DEFAULT: 'hsl(var(--primary))',
6
    hover: 'hsl(var(--primary-hover))',
7
    foreground: 'hsl(var(--primary-fg))',
8
    soft: 'hsl(var(--primary-soft))',
9
    'soft-foreground': 'hsl(var(--primary-soft-fg))',
10
  },
11
  // ...
12
}

这样现有 bg-primary text-primary-foreground 的组件一行不改就能换色。

四、React 侧实现#

React

1
export const ACCENTS = [
2
  { id: 'silver',   name: '银盐',  color: '#18181b' },
3
  { id: 'kodak',    name: '柯达',  color: '#c9860a' },
4
  { id: 'fuji',     name: '富士',  color: '#0f7a5c' },
5
  { id: 'agfa',     name: '爱克发', color: '#c2410c' },
6
  { id: 'ilford',   name: '依尔福', color: '#3b5b8a' },
7
  { id: 'polaroid', name: '宝丽来', color: '#5b5bd6' },
8
] as const;
9
export type AccentId = typeof ACCENTS[number]['id'];

React

1
import { createContext, useContext, useEffect, useState } from 'react';
2
import { GetAccent, SetAccent } from '../../wailsjs/go/main/App';
3
import { WindowSetBackgroundColour } from '../../wailsjs/runtime';
4
import { ACCENTS, AccentId } from './accent';
5

6
const Ctx = createContext<{ accent: AccentId; setAccent: (a: AccentId) => void }>(null!);
7

8
export function AccentProvider({ children }: { children: React.ReactNode }) {
9
  const [accent, setAccentState] = useState<AccentId>(
10
    () => (localStorage.getItem('accent') as AccentId) || 'silver'   // 先用缓存避免闪烁
11
  );
12

13
  useEffect(() => { GetAccent().then(a => a && setAccentState(a as AccentId)); }, []);
14

15
  useEffect(() => {
16
    document.documentElement.dataset.accent = accent;
17
    localStorage.setItem('accent', accent);
18
    // 同步窗口底色，避免 resize 时露白/露黑
19
    const bg = getComputedStyle(document.documentElement).getPropertyValue('--bg');
20
    // 可选：把 hsl 转 rgb 后传给 WindowSetBackgroundColour(r,g,b,255)
21
  }, [accent]);
22

23
  const setAccent = (a: AccentId) => { setAccentState(a); SetAccent(a); };
24
  return <Ctx.Provider value={{ accent, setAccent }}>{children}</Ctx.Provider>;
25
}
26
export const useAccent = () => useContext(Ctx);

避免首屏闪烁：在 index.html 的 <head> 里加一段内联脚本：

HTML

1
<script>
2
  document.documentElement.dataset.accent = localStorage.getItem('accent') || 'silver';
3
</script>

选择器 UI（放在左下角”浅色”下拉旁，或设置页）：

React

1
export function AccentPicker() {
2
  const { accent, setAccent } = useAccent();
3
  return (
4
    <div className="flex gap-2">
5
      {ACCENTS.map(a => (
6
        <button key={a.id} title={a.name} onClick={() => setAccent(a.id)}
7
          className={cn('h-6 w-6 rounded-full border-2 transition',
8
            accent === a.id ? 'border-foreground scale-110' : 'border-transparent')}
9
          style={{ background: a.color }} />
10
      ))}
11
    </div>
12
  );
13
}

五、Go 侧持久化#

1
type Settings struct {
2
    Theme  string `json:"theme"`  // light / dark / system
3
    Accent string `json:"accent"` // silver / kodak / ...
4
    Lang   string `json:"lang"`
5
}
6

7
func (a *App) GetAccent() string { return a.settings.Accent }
8

9
func (a *App) SetAccent(id string) error {
10
    allowed := map[string]bool{"silver": true, "kodak": true, "fuji": true,
11
        "agfa": true, "ilford": true, "polaroid": true}
12
    if !allowed[id] {
13
        return fmt.Errorf("invalid accent: %s", id)
14
    }
15
    a.settings.Accent = id
16
    return a.saveSettings() // 写入 os.UserConfigDir()/emulsion/settings.json
17
}

如果你已有设置结构，直接加一个字段即可。

六、落地检查清单#

全局 grep 硬编码的 bg-black、bg-zinc-900、#18181b → 替换成 bg-primary
左侧导航选中态：bg-primary-soft text-primary-soft-fg，可加 border-l-2 border-primary
顶部 Tab（本地存储 / S3 …）选中态同上
Checkbox / Switch / Radio 的 checked 色用 --primary
搜索框 focus 用 ring-primary/40
状态徽标（孤立/缺失/已关联）保持独立变量，不要挂到 accent 上
柯达主题下”孤立文件”橙色与主色接近，可把警告色稍微往红偏（--warning: 24 95% 45%）或保持不动，视觉上验证一下
深色模式：同样的 accent id 下另写一套 .dark[data-accent=...]，把 --primary 提亮 10–15% 的 L 值即可复用

音乐

音乐

二、配色方案（项目名 Emulsion = 胶片乳剂，用胶片命名很贴切）#

三、Token 设计#

四、React 侧实现#

五、Go 侧持久化#

六、落地检查清单#

文章分享

评论区

音乐

文章目录