EmDashのデザインを変える｜theme.cssでブランド色を変えた手順
EmDashのブログ雛形は、色・文字・余白を src/styles/tokens.css の「トークン」で決めています。編集部が theme.css だけを書き換えてリンクとボタンを青にした手順と、触らないほうがよいファイルを説明します。
EmDash のブログ雛形（cloudflare:blog）は、見た目を CSS の変数（トークン）でまとめて決めています。このサイトの青い色も、編集部が1つのファイルだけを書き換えて付けたものです。
触るのは theme.css だけ
雛形の src/styles/ には2つのファイルがあります。
tokens.css… 色・文字の大きさ・余白・影などの初期値が全部入っているtheme.css… 上書き用。最初は中身が空
theme.css の先頭の説明には「サイトの見た目を変えるときに編集するのはこのファイル」と書かれています。tokens.css の値は @layer base の中にあり、theme.css の値は層の外にあるので、theme.css に書いた値が必ず勝ちます。tokens.css を直接書き換えると、雛形を新しくしたときに差分が分かりにくくなるので、編集部は触っていません。
ブランド色は3つセットで変える
初期値のブランド色は、明るい画面で黒（#171717）、暗い画面で白（#fafafa）です。リンクやボタンの色がこれで決まっています。
編集部は theme.css に次の4行を書きました。
:root {
--color-brand: light-dark(#1d4ed8, #93c5fd);
--color-brand-hover: light-dark(#1e40af, #bfdbfe);
--color-on-brand: light-dark(#ffffff, #0a0a0a);
line-height: 1.8;
}--color-brand… リンク・ボタン・選択枠の色--color-brand-hover… マウスを載せたときの色--color-on-brand… ブランド色の上に載る文字の色（ボタンの文字）
light-dark(明るいとき, 暗いとき) の形で書くと、端末の「ダークモード」設定に合わせて自動で切り替わります。色を1つだけ書くと、両方のモードで同じ色になります。
theme.css の説明にも「3つのブランド用トークンは一緒に設定する」とあります。--color-brand だけ変えると、ボタンの文字が背景に溶けて読めなくなることがあるためです。
日本語のための行間
最後の line-height: 1.8; は、日本語の本文を読みやすくするために編集部が足したものです。英語向けの雛形のままだと、漢字とかなが詰まって見えました。
文字の種類（フォント）は別のファイル
フォントは theme.css ではなく astro.config.mjs で読み込んでいます。日本語フォントへの切り替えは次の記事にまとめました。
