デザイントークンで CSS を保守しやすくする
色・余白・文字サイズを CSS 変数にまとめて、デザインの一貫性と変更のしやすさを両立させる方法。
このサイトでは、デザインに関わる値をすべて src/styles/tokens.css に集めています。
light-dark() で配色を1か所に
ライトとダークの色を light-dark() でまとめて書くと、テーマごとに定義を二重に持たなくて済みます。
:root {
color-scheme: light dark;
--color-bg: light-dark(#fbfaf8, #0e0e11);
}この記事は日本語版のみです。英語版のブログ一覧には表示されません。