テーマ設計の要点
ライトモードでは、次の3つを意識しています。
- 半透明パネル (
rgba) と強めのbackdrop-filter - 薄い境界線と内側のハイライト
- 背景レイヤーが透けて見えるコントラスト
ダークモードでは、同じコンポーネント形状を保ったまま見せ方を変えます。
- パネル境界に発光色を混ぜる
- ボックスシャドウを重ねて残光を作る
- 本文の可読性を優先して明度差を確保する
実装で避けたこと
効果を過剰に盛ると文字が読みにくくなるため、透明感と可読性のバランスを固定変数で管理しています。
BLOG POST
ライトモードでは、次の3つを意識しています。
rgba) と強めの backdrop-filterダークモードでは、同じコンポーネント形状を保ったまま見せ方を変えます。
効果を過剰に盛ると文字が読みにくくなるため、透明感と可読性のバランスを固定変数で管理しています。
RELATED