配色パターン比較
全体トークンは --color-bg(背景)、--color-main(メイン/リンク基調)、--color-accent(ホバー等)です。ヘッダーでライト/ダークを切り替えて確認できます。以下はブロック単位の上書き例です。
現行(デフォルト)
全体の :root をそのまま利用しています。
bg
main
accent
main
black
gray-dark
gray
gray-light
暖色アクセント
main
black
gray-dark
gray
gray-light
寒色アクセント
main
black
gray-dark
gray
gray-light
ダークトーン試作
同じ変数名で背景・文字を入れ替えた例です(サイト全体のダークモード実装時の参考用)。
main
black
gray-dark
gray
gray-light