サイト全体の色は src/styles/global.css の CSS カスタムプロパティで管理しています。ヘッダーの「ライト／ダーク／システム」で外観を切り替えると、同じ変数名の値だけがテーマごとに切り替わります。
いまのテーマで実際の色
次のブロックは Markdown に 生の HTML を書いています。style の background が var(--color-*) なので、表示モードを切り替えるとスウォッチも連動します（表の16進よりこちらが実装どおり）。スタイルは BlogPost.astro 側で :global(.token-swatch__chip) のように指定しているので、Markdown から挿入された要素にも高さなどが当たります。
--color-bg--color-text--color-heading--color-main--color-secondary--color-accent--color-sub--black / --gray など カンマ区切り RGB のトークンは rgb(var(...)) で載せられます。
--black--gray--gray-dark--gray-light意味のある3本柱
| 変数 | 役割 |
|---|---|
--color-bg | ページの地色 |
--color-main | ブランド寄りの基調（通常のリンク色） |
--color-accent | ホバー、引用の左線、テーマトグルなどの強調 |
ライトモード
クリーム地にフォレスト系の緑を合わせた構成です。
| トークン | 値の例 |
|---|---|
--color-bg | #f3efe6 |
--color-text | #3a3029 |
--color-heading | #6f5e52 |
--color-main | #3e8e7e |
--color-accent | rgb(var(--gray)) |
--gray（RGB 3値） | 130, 108, 94 |
--color-secondary | #6ba292 |
--color-sub | #ffffff（ヘッダーなどの面） |
--black・--gray・--gray-light・--gray-dark は rgb() / rgba() 用のカンマ区切り RGB です。ナビの文字色、補助テキスト、グラデーションや影などに使っています。
ダークモード
チャコール／ニュートラル寄りの背景に、セージグリーンとイエロー系アクセントを置いた構成です。
| トークン | 値 |
|---|---|
--color-bg | #2d2d3a |
--color-text | #e8eaef |
--color-heading | #f4f5f8 |
--color-main | #9ebfb4 |
--color-secondary | #a8b0c4 |
--color-accent | #e8c547 |
--color-sub | #363644 |
ライトとは違い、メイン＝セージ、アクセント＝黄色の役割分担のままです。
角丸
--radius-sm（6px）、--radius-md（14px）、--radius-lg（18px）を画像やコードブロックなどに使い分けています。
一覧で見る
同じ変数をブロックごとに上書きした比較用ページを 配色 に置いています。スウォッチと右脇のサンプルで、ブログ本文と近い要素の見え方を試せます。
実装を直したあとにこの記事と値がズレたら、global.css を正として frontmatter の更新日を足すか、本文の表だけ直す想定です。