配色パターン比較

全体トークンは --color-bg(背景)、--color-main(メイン/リンク基調)、--color-accent(ホバー等)です。ヘッダーでライト/ダークを切り替えて確認できます。以下はブロック単位の上書き例です。

現行(デフォルト)

全体の :root をそのまま利用しています。

bg
main
accent
main
black
gray-dark
gray
gray-light

見出し

本文の色味の確認用です。リンクcodeを含みます。

引用ブロック


暖色アクセント

main
black
gray-dark
gray
gray-light

見出し

本文の色味の確認用です。リンクcodeを含みます。

引用ブロック


寒色アクセント

main
black
gray-dark
gray
gray-light

見出し

本文の色味の確認用です。リンクcodeを含みます。

引用ブロック


ダークトーン試作

同じ変数名で背景・文字を入れ替えた例です(サイト全体のダークモード実装時の参考用)。

main
black
gray-dark
gray
gray-light

見出し

本文の色味の確認用です。リンクcodeを含みます。

引用ブロック