| name | marp-theme |
| description | Marpテーマの追加・変更・確認ワークフロー。「テーマを追加して」「配色を変えたい」「テーマの見え方を確認して」「全テーマを見比べたい」、または themes/ のCSSを触るときに必ず使う。コントラスト検査とギャラリーでの実物確認、登録先の更新手順を含む。 |
Marpテーマの追加・変更ワークフロー
テーマは themes/ にあり、CSS変数の上書きだけで作る。組み方そのものを変えるときだけ layout-*.css（唯一セレクタを持つレイヤー）を足す。
確認のしかた
| コマンド | 何ができるか |
|---|
npm run gallery | 全テーマを template/slides.md の全レイアウトパターンでPNG化し、一覧HTMLを生成してブラウザで開く。通常表示は代表4枚（表紙 / 章扉 / 箇条書き / コード）で、テーマごと・一括で全パターンに展開できる |
npm run gallery -- sunrise wave-coral | テーマを絞って確認する（全テーマ生成は数分かかるので、確認対象が決まっているときはこちら） |
npm run theme-check | 配色のコントラスト比を機械的に検査する。閾値割れがあれば終了コード1 |
npm run theme-check -- sunrise | テーマを絞って検査する |
ギャラリーは名前・説明での絞り込みと、配色／組み合わせの切り替えができる。画像はクリックで原寸。生成物は .gallery/（.gitignore済み）。
目視だけで判断しない。 濃色パネル上の小さいラベルなど、目視では気づけない低コントラストが必ず残る。npm run theme-check を通してから npm run gallery で実物を見る、の順で確認する。
手順
- 作る: 配色だけなら
themes/wine.css、雰囲気ごと変えるなら themes/casual-mint.css、暗いキャンバスや白地＋装飾など組み方から変えるなら themes/layout-aurora.css / themes/layout-wave.css を手本にする
- 検査:
npm run theme-check を通す（閾値割れゼロにする）
- 実物確認:
npm run gallery -- <テーマ名> で4枚を見る
- 登録: 下の5箇所を更新する
- 見本スクショ:
npm run docs-shot で docs/*.png を撮り直す（marp-shots スキル）
登録先（テーマの追加・削除・改名・用途変更のとき）
このリストが正。hook や他のドキュメントはここへ誘導するだけなので、変更はこの節に対して行う。
- README.md — 冒頭のテーマ数、該当する一覧表、ディレクトリ構成の
themes/。レイアウトレイヤーを足したならMarp特有の注意書きも。件数を書くのは「テーマN種」「名前はN個」の2表現だけにする（この2つは npm run theme-check が実数と照合する。それ以外の件数表記は腐るので書かない）
- CLAUDE.md — 構成セクションのテーマ一覧
- .claude/skills/marp-deck/SKILL.md — テーマ選択の一覧
- .vscode/settings.json —
markdown.marp.themes。layout-* レイヤー自体も登録する（未登録だとVS Codeプレビューで @import が解決できない）。登録漏れは npm run theme-check が検出する
- scripts/docs-shot.mjs —
COLOR_THEMES / TONES / LAYOUTS に追加してから npm run docs-shot
npm run new のテーマ一覧・template/slides.md・ギャラリーは themes/ から動的に列挙するので更新不要。テーマCSSの2行目コメント（カテゴリ / 配色: 用途 の1行）がそのまま一覧の説明文になるため、この形式で書く。
決まりごと・制約の参照先
