theme-customizationlisted
Install: claude install-skill yusei531642/vibe-editor
# theme-customization
vibe-editor のテーマシステムは **CSS 変数 + zustand 設定 + Monaco custom theme** の 3 系統が連動して動く。
新テーマ追加・色調整は **4 層を必ず同期** させる必要があり、どれか 1 つを忘れるとテーマ切替時に色が崩れる。
> デザイン上の色決定 (Claude.ai 風 / Linear 風など) は **`claude-design`** skill 側に集約されている。
> この skill は「決まった色をコードに正しく落とす」ための実装手順。
---
## 4 層の関係
```
┌────────────────────────────────────────────┐
│ 1. shared.ts: ThemeName ユニオン │ 型定義 (TS / Rust 両用)
│ 2. themes.ts: THEMES{ name: ThemeVars } │ 色トークン (TS から CSS 変数を流し込む)
│ 3. tokens.css: :root[data-theme="..."] {…} │ CSS 側で参照する変数群
│ 4. monaco-setup.ts: monaco.editor.defineTheme│ Monaco エディタ専用カスタム配色
└────────────────────────────────────────────┘
```
`ThemeVars` (themes.ts:3-25) のフィールドが UI 全体で参照される CSS 変数の真実の出所。
`tokens.css` は CSS 側のフォールバック / 互換 / 派生変数を定義する場所で、テーマごとに値が直接書かれているわけではない (ほとんどは themes.ts の値が `useEffect` で `document.documentElement.style.setProperty` される)。
---
## Step 1: `shared.ts` の `ThemeName` を拡張
```ts
// src/types/shared.ts
export type ThemeName =
| 'claude-dark'
| 'claude-light'
| 'dark'
| 'light'
| 'midnight'
| 'glass'
| 'sunset'; // ← 新テーマを追加
```
これを足すと、`AppSettings.theme` の型もこの新名を受け付けるようになる。
`APP_SETTINGS_SCHEMA_VERSION` (shared.ts) は **既存値の意味を変えるなら** bump、追加だけなら不要。
---
## Step 2: `themes.ts` の `THEMES` に新エントリを追加
`ThemeVars` の **全フィールドを埋める**。省略すると undefined が CSS 変数に流れて崩れる。
```ts
// src/renderer/src/lib/themes.ts
export const THEMES: Record<ThemeName, ThemeVars> = {
// 既存…
sunset: {
bg: '#1a0f0a',
bgPane