🎭 UIテーマの配色カタログ

背景は1色ではない。どのテーマも、画面の地・一段沈めた面・境界線で少しずつ違う明るさを使っています。カードやモーダルを浮いて見せるにはこの差が要ります。daisyUIが base-100 / 200 / 300 と3段持っているのは、この差を最初から用意しておくためです。

状態は色数を絞る。成功・情報・注意・危険の4つに割り当てる色は、どのテーマでもだいたい緑・青・黄・赤で共通しています。ここを独自の色にすると意味が伝わらなくなるため、変えるとしても色相はずらしすぎないのが無難です。

文字色は背景とセットで決める。daisyUIはすべての色に「その上に置く文字色」を対で持たせています。主要色を変えたら文字色も一緒に変える、という決まりにしておくと、コントラスト不足が起きにくくなります。

状態の変化を色で示す。jQuery UIのテーマは、ボタンの「通常・マウスを乗せた時・選択中」でそれぞれ背景色と文字色を持っています。今のフレームワークでは影や透明度で表すことが増えましたが、色だけで状態を表す設計は今でも参考になります。

暗いテーマは明るいテーマの反転ではない。背景を黒にして文字を白にしただけでは、主要色が浮きすぎて眩しくなります。暗いテーマのほうが主要色の彩度を落としているものが多いので、明暗を並べて見比べてみてください。