配色を選ぶ
Glass には aurora（紫×水色）・cosmetic（桜色）・aqua（翡翠色）・mono（無彩色） の 4 つの配色があり、それぞれにライトとダークがあります。扱う商材に合わせて選んでください。
切り替えは、ブロックに書いた 2 行を書き換えるだけです。CSS を書く必要はありません。
既定は aurora（ライト）です。 そのままでよければ何もしなくて差し支えありません。
手順（最初の 1 回だけ）
「配色・明暗」のブロックは最初はありません。使うときに 1 回だけ作ります。
- [コンテンツ管理] → [ブロック管理] → [新規作成]
- 「ブロック名」に
配色・明暗、「ファイル名」にtheme（ファイル名はあとから変更できません） - 次の内容をすべて貼り付けて [登録]
【全文】 ここに書いてあるものが、そのままブロックの中身になります。
【全文】 下の内容をそのまま貼り付けてください。
{#
Glass - Design Template for EC-CUBE 4.2 / 4.3
配色と明暗
**レイアウト管理での配置は不要です。** default_frame.twig と error.twig が
直接読み込みます。ブロック管理に登録するのは、管理画面から配色を
変えられるようにするためです。登録しなくても、下の値が使われます。
▼ 配色（glass_preset）▼
aurora 紫〜水色。既定
cosmetic 桜色。化粧品・雑貨
aqua 翡翠色。食品・健康
mono グラファイト。アパレル・ジュエリー・インテリア
▼ 明暗（glass_theme）▼
light ライト固定（既定）
dark ダーク固定
auto 見る人の端末の設定に合わせる
▼ ダークにする前に読んでください ▼
ダークにすると、**テンプレートが用意していない部分**まで暗い地の上に
出ます。具体的には
・店が入れるロゴ（濃い色・背景透過のものは沈みます）
・カテゴリ説明や新着情報に貼った HTML の文字色
・白地に文字を焼き込んだバナー画像
これらは店ごとに違うため、テンプレート側では直せません。一度ダークに
して上の 3 つを見たうえで決めてください。
**値を間違えても壊れません。** 一覧にない値を書いたときは既定に戻します。
#}
{# 配色 … aurora（既定・紫×水色） / cosmetic（桜色） / aqua（翡翠色） / mono（無彩色） #}
{% set glass_preset = 'aurora' %}
{# 明暗 … light（既定・ライト固定） / dark（ダーク固定） / auto（端末の設定に追従） #}
{% set glass_theme = 'light' %}
{# ▲ 書き換えるのは上の 2 行だけです。一覧にない値は既定に戻します。 #}
{# ▼ この行は消さないでください。選んだ値をテンプレートへ渡しています。 #}
{{- glass_preset }} {{ glass_theme -}}
レイアウト管理での配置は不要です。 次からはこのブロックを開いて、 glass_preset の行を書き換えるだけです。
4 つのプリセット
| 値 | 配色 | 向いている商材 |
|---|---|---|
aurora（既定） | ヴァイオレット × シアン | テック / ガジェット / D2C |
cosmetic | ローズ × アプリコット | コスメ / スキンケア / ジュエリー |
aqua | ティール × ミント | サプリ / ヘルスケア / 食品 |
mono | グラファイト（無彩色） | アパレル / インテリア / ギャラリー |
ダークにする
同じブロックの glass_theme を変えます。
| 値 | 動き |
|---|---|
light（既定） | 常にライト |
dark | 常にダーク |
auto | 見ている人の端末（OS）の設定に合わせる |
ダークにする前に、自店のロゴ・バナー・白背景の商品写真が暗い地の上で沈まないかご確認ください。 これらは店ごとに違うため、テンプレート側では直せません。
ロゴが沈むときは、[コンテンツ管理] → [CSS管理] に次の 1 行を足すと反転します（白黒のロゴ向けです。色付きは ロゴと店名を変える の image_dark を使ってください）。
:root { --g-logo-filter: invert(1) brightness(1.6); }
エラーページ（404 など）の配色も一緒に変わります。