Shopify にダークモードを追加できる「シンプルダークモード｜お手軽配色切り替え・目に優しい表示」のご利用ガイド
はじめに
夜、布団の中でスマートフォンを開く。真っ白なページが目に飛び込んできて、思わず画面を伏せる。
——買い物客にとって、これは珍しい体験ではありません。
Shopify は、ネットショップを作って運営できるサービスです。そこへ機能を足すのが Shopify アプリで、
本アプリ「シンプルダークモード｜お手軽配色切り替え・目に優しい表示」は、ストアフロントにダークモードの切り替えボタンを1つ置くアプリです。
お客様がボタンを押すと、ページの配色が暗い色に切り替わります。
配色は、あなたが Dawn / Horizon テーマにすでに設定している色から自動で作られます。
だからダークモードにしても、ストアの雰囲気はそのまま残ります。
写真がネガのように反転することもありません。
料金：月額 $2.99（年額 $29.99）。7 日間の無料体験があります。
「シンプルダークモード」でできること
できることは 3 つです。
- ストアフロントのすべてのページに、ダークモードの切り替えボタンを追加する
- いまのテーマの配色から、ダーク用の配色を自動で作る
- 写真や商品画像は、元の色のまま表示する
ストアフロントをダークモードに切り替える
お客様は右下のボタンを押すだけです。ログインも会員登録も要りません。
選んだ状態はブラウザに残るので、次に来たときも同じ配色で開きます。
ワンタップでページ全体を切り替える
ヘッダーもフッターも商品一覧も、まとめて切り替わります。
ページごとに設定する必要はありません。
ダークモードの色を自分で決める
自動生成の色が気に入らないときは、背景色・文字色・アクセント色を自分で指定できます。
指定しなければ自動生成のままです。
スマートフォンでもそのまま使える
ボタンの位置も配色の切り替えも、スマートフォンで同じように動きます。追加の設定は要りません。
1 クリックでテーマに追加できる
アプリの管理画面からテーマを選んで押すだけで、テーマエディタが開きます。
アプリをインストールする
Shopify の管理画面から入れます。5 分もかかりません。
1. 「設定」を開く
Shopify 管理画面の左下にある「設定」をクリックします。
2. 「アプリと販売チャネル」から App Store へ移動する
「アプリと販売チャネル」をクリックし、「Shopify App Store」へ進みます。
3. アプリを検索する
検索窓にアプリ名を入れて、表示されたアプリをクリックします。
4. 「インストール」をクリックする
アプリの詳細ページが開いたら、左側の「インストール」を押します。
5. 権限を確認してインストールを完了する
権限の確認画面が出ます。本アプリが求めるのはテーマの読み取り（read_themes）だけです。
顧客情報にも注文情報にも触れません。内容を確認して、インストールを完了してください。
まず最初にやること — テーマに追加して有効にする
🚨 インストールしただけでは、ストアには何も出ません。 テーマへの追加が要ります。
やることは 2 手順だけです。
テーマを選んで「テーマに追加」を押す
アプリの管理画面を開くと、いちばん上に「テーマに ダークモード 機能を追加」のカードがあります。
- 「テーマを選択」で、追加したいテーマを選びます（公開中のテーマには「（公開中のテーマ）」と付きます）
- 「テーマに追加」をクリックします
新しいタブでテーマエディタが開き、左側に本アプリの設定パネルが出ます。
補足：このボタンはホームページのテーマエディタを開きます。
ただし本アプリはアプリ埋め込みなので、どのページで有効にしてもストア全体に効きます。
「商品ページにも追加しなければ」と考える必要はありません。
テーマエディタで「保存」を押す
テーマエディタの「埋め込みアプリ」に、アプリが有効の状態で並んでいます。
右上の「保存」を押すと、ストアフロントに切り替えボタンが出ます。
効く範囲・効かない範囲を知っておく
管理画面の青い案内が、そのまま答えになっています。
- 効く：トップ、商品ページ、コレクション、カート、ブログなど、オンラインストアが表示するページ
- 効かない：チェックアウト、サンクスページ（注文状況ページ）
チェックアウトとサンクスページは Shopify 側が表示するページなので、アプリを入れられません。
購入完了まで暗いままにはならない、と覚えておいてください。
管理画面でできること
本アプリの管理画面は 1 ページだけです。ここで保存する設定はありません。
配色の設定はテーマエディタ側、お客様の選んだ配色はブラウザ側に持つ設計だからです。
テーマに追加する
前章のとおりです。「テーマを選択」で対象テーマを選び、
- 「テーマに追加」 … テーマエディタを開いて、その場で有効にできる状態にします
- 「テーマをプレビュー」 … 公開せずに、追加した状態を確認できます
迷ったら「テーマに追加」で構いません。テーマエディタで保存するまで、公開中のストアは変わりません。
管理画面の言語を切り替える
「言語設定」で、この管理画面の表示言語を選べます。20 言語に対応しています。
「言語を選択」で選んでから「変更する」を押してください。
この設定が変えるのはアプリの管理画面だけです。
ストアフロントの切り替えボタンの読み上げラベルは、ストアの言語に従います。
ストアフロントの設定 — テーマエディタで色を決める
本アプリの設定は、すべてテーマエディタの中にあります。
「オンラインストア」→「テーマ」→「カスタマイズ」→ 左の「埋め込みアプリ」から開いてください。
設定は 4 グループ・6 項目です。全部空欄のままでも動きます。
ダークモードの配色
ページの地色と文字色を決めるグループです。
| 設定名 | 何を決めるか | 既定値 |
|---|---|---|
| ダークモードの背景色 | ページの地色 | 空欄（テーマの配色から自動生成） |
| ダークモードの文字色 | 本文や見出しの文字色 | 空欄（同上） |
空欄にしておくのがおすすめです。テーマの配色から自動で作られるので、
セクションごとの明暗の差もそのまま保たれます。
ブランドカラーに寄せたいときだけ、背景色を指定してください。
そのときは文字色もセットで決めると、読みづらくなりません。
アクセント色（任意）
ボタンや強調ブロックなど、アクセント配色に使う色のグループです。
| 設定名 | 何を決めるか | 既定値 |
|---|---|---|
| ダークモード時のアクセント背景色 | アクセント配色の地色 | 空欄（自動生成） |
| ダークモード時のアクセント文字色 | アクセント配色の文字色 | 空欄（自動生成） |
セール告知など「ここだけ目立たせたい」箇所がある場合に効きます。
🚨 色の指定が効くのは、下の「簡易反転モード」が OFF のときだけです。
簡易反転モードはページ全体をまとめて反転する仕組みなので、
個別に色を決めるという概念がありません。設定パネルの注記にも同じことが書いてあります。
簡易反転モード
自動配色ではうまくいかない箇所があるときの、代わりの手段です。既定は OFF です。
| 設定名 | 内容 | 既定値 |
|---|---|---|
| 自動配色の代わりに簡易反転を使用する | ページ全体の色を反転してダーク化する | OFF |
独自に作り込んだセクションや、テーマの外で書いた CSS が多いストアでは、
自動配色が届かないことがあります。そのときにこれを ON にすると、力技で全体を暗くできます。
ただし写真の色味は元と完全には一致しません（次章に実例があります）。
色を正確に見せたい商品を扱うストアでは、OFF のままにしてください。
追加の CSS
自動配色が拾いきれない箇所を、自分で直すための欄です。
ここに書いた CSS は、ダークモードのときだけ適用されます。ライトモードには影響しません。
要素を検証してクラス名を調べ、次のように書きます。
.my-section { background: #111; color: #eee; }
セレクタを書かずに宣言だけ書くこともできます（ページ全体に効きます）。
覚えておきたい点が 2 つあります。
- テーマ側が
!importantを使っている箇所は、こちらも!importantを書かないと上書きできません
（Horizon のヘッダー背景などが該当します） - 入力した文字のうち
<だけは取り除かれます。{ } >はそのまま使えるので、セレクタは普通に書けます
こんなときはこう設定する
そのまま使いたい（おすすめ）
6 項目すべて空欄・簡易反転モード OFF。 これが既定です。
テーマの配色から自動で作るので、ストアの雰囲気が保たれ、写真も元の色のままです。
切り替え前と並べると違いが分かります。写真の色はそのままで、地色と文字だけが入れ替わっています。
ブランドカラーに寄せたい
「ダークモードの背景色」と「ダークモードの文字色」を指定します。
アクセントも合わせたいときは「アクセント色（任意）」の 2 項目も埋めてください。
背景と文字はセットで決めるのがコツです。片方だけ変えると、
自動生成された相手側の色と合わずに読みづらくなります。
自動配色で暗くならない箇所がある
まず「追加の CSS」で、その箇所だけ直せないか試してください。
それでも数が多くて手に負えないときに、簡易反転モードを ON にします。
ON にすると、こう見えます。
ページ全体が暗くなる代わりに、写真の色味が元と少しずれます。
上の画像でも、空のオレンジがピンク寄りに変わっています。
これは反転の打ち消しに使う色相回転が近似計算のためで、設定では直せません。
色の再現が大事なストアでは、簡易反転モードは使わないでください。
スマートフォン中心のストア
追加の設定は要りません。ボタンは画面の右下に固定され、スマートフォンでもそのまま押せます。
うまく表示されないときは
切り替えボタンがストアに出てこない
順に確認してください。
- テーマエディタで保存しましたか。「テーマに追加」を押しただけでは保存されていません
- 有効にしたテーマは、いま公開中のテーマですか。設定はテーマごとに保存されます。
テーマを切り替えたら、新しいテーマでもう一度有効にしてください - アプリ埋め込みのトグルは ON ですか。テーマエディタの「埋め込みアプリ」で確認できます
自動で有効にならないことがあります。そのときは管理画面にこの案内が出ます。
テーマエディタの「アプリ埋め込み」から手動で有効にしてください。
チェックアウトが暗くならない
仕様です。チェックアウトとサンクスページ（注文状況ページ）は Shopify 側が表示するページで、
アプリを入れられません。オンラインストアのページだけが対象です。
指定した色が反映されない
簡易反転モードが ON になっていないか確認してください。 ON のあいだ、色の指定は効きません。
OFF に戻すと、指定した色が使われます。
追加の CSS を書いたのに変わらない
多くはテーマ側の !important に負けています。同じ宣言に !important を付けてください。
クラス名の取り違えもよくあるので、ブラウザの検証ツールで実際のクラス名を確認してから書きます。
テーマを変えたら効かなくなった
アプリ埋め込みの有効化はテーマごとの設定です。新しいテーマで有効にし直してください。
よくある質問
お客様が選んだ配色はどこに保存されますか
お客様のブラウザ（localStorage）にだけ保存されます。Shopify 側にも当社にも送られません。
顧客情報や注文情報には一切触れないアプリです。
対応しているテーマは
Dawn と Horizon です。この 2 つで実機確認しています。
他のテーマでも動くことはありますが、配色の作り方がテーマごとに違うため、保証はできません。
ページを開いた瞬間に白くちらつきませんか
ちらつかないように作ってあります。ページが最初に描画される前に、
保存された選択を反映する仕組みを入れています。
切り替えボタンの位置は変えられますか
現在の版では変えられません。画面の右下に固定で表示されます。
商品写真がネガのように反転しませんか
既定の自動配色モードでは反転しません。写真は元の色のまま表示されます。
簡易反転モードを ON にしたときだけ、色味が少しずれます。
無料で試せますか
7 日間の無料体験があります。期間中に解約すれば費用はかかりません。
おわりに
「シンプルダークモード｜お手軽配色切り替え・目に優しい表示」は、次の 3 つを実現します。
- ストアフロントの全ページに、ダークモードの切り替えボタンを置く
- いまのテーマの配色から、ストアらしさを保ったままダーク配色を作る
- 写真と商品画像は、元の色のまま見せる
設定は 6 項目だけ。空欄のままテーマに追加して保存すれば、その日から使えます。
夜に見に来たお客様が、目を細めずにあなたの商品を眺められるようになります。
料金：月額 $2.99（年額 $29.99）／ 7 日間の無料体験あり
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
.png?w=400){kind=icon}
