ダークモード

ダークは、配色 4 種それぞれに用意しています。ライト固定・ダーク固定・端末の設定に追従の 3 つから選べます。

既定はライト固定です。 そのまま使う場合、この項は読まなくて差し支えありません。

ダークの配色は用意してあり、[ブロック管理] → 配色・明暗の 1 行で有効にできます。ただし 有効にする前に、下の「ダークにする前に確かめること」を必ずご確認ください。

切り替えたときに一緒に変わるもの

切り替えの手順は ダークにするにあります。

エラーページ（404 など）も一緒に変わります。 エラーページは EC-CUBE が default_frame.twig を通さずに出しますが、同じブロックを読むようにしてあるので、直すのは 1 か所で済みます。

auto を選んだ場合、サイト側に切り替えボタンは表示されません。 見ている人の OS の設定をそのまま読むだけです（Mac なら システム設定 → 外観、 Windows なら 設定 → 個人用設定 → 色）。お客様ごとに見え方が変わるため、どちらで見られても問題ない状態にしておく必要があります。

ダークにする前に確かめること

テンプレートが用意している画面（商品一覧・商品詳細・カート・ご購入手続き・マイページ・各フォーム・404）は、4 つの配色プリセットすべてでダークを確認済みです。文字のコントラストも基準（AA / 4.5:1）を満たしています。

確認できないのは、店ごとに違う素材です。 次の 3 つは暗い地の上に出ると破綻することがあり、テンプレート側では直せません。

素材	何が起きるか	確かめ方
ロゴ帯（Block/logos.twig）のロゴ画像	ロゴは並びを揃えるためグレーに落として薄く表示します。濃い色・背景透過のロゴは暗い地に沈んでほとんど見えなくなります	ダークにしてロゴ帯を見る。沈むなら白抜きのロゴに差し替える
カテゴリ説明・新着情報などに貼った HTML	<span style="color:#333"> のように文字色を直接書いていると、暗い地の上で読めなくなります	色の指定を外す（外すとテンプレート側の色に従います）
バナー・特集などの画像	白地に文字を焼き込んだ画像は、暗い地の上で白い板になります	背景透過の画像にするか、ダーク用の画像を別に用意する

商品写真（白背景で撮ったもの）は、暗い地で光る四角にならないよう、受け皿ごと明るいタイルにしています（--g-product-plate）。こちらは対応済みです。