Shopify にダークモードを追加する方法5選！実装方式の違いと選び方を検証
ダークモードのアプリを入れて、最初に驚くのはたいてい商品写真です。
白かった背景が黒くなるところまでは想定どおり。ところが商品写真までネガフィルムのように反転して、
赤いニットが青緑に、木目のテーブルが紫になる。「これは出せない」とその日のうちに削除する——
Shopify App Store のダークモードアプリで、いちばん多い低評価がこれです。
この記事では、ダークモードの実装方式が3つあることと、
その違いが「写真がネガになるかどうか」を決めていることを整理します。
そのうえで、現在 Shopify App Store にあるダークモードアプリを実データで比較します。
- 対象読者: Shopify でストアを運営していて、ダークモードの導入を検討している方
- 前提: テーマは Dawn / Horizon 系を想定（他テーマは各アプリの対応状況を要確認）
ダークモードの実装方式は3つある
「ダークモードにする」と一口に言っても、やっていることはアプリごとに違います。
大きく3方式あり、写真の見え方・崩れやすさ・カスタマイズ性がここで決まります。
方式1: CSS カスタムプロパティを反転する
テーマが持っている配色変数（--color-background など）を読み取り、
明度を反転した値を書き戻す方式です。
/* テーマ側が持っている値 */
:root { --color-background: #ffffff; --color-foreground: #121212; }
/* ダークモード時に上書きする */
html[data-theme="dark"] { --color-background: #16181b; --color-foreground: #e8e8e8; }
色の指定を差し替えるだけなので、img タグの中身には一切触りません。
だから写真は元の色のまま残ります。
弱点は、テーマが変数を使っていない箇所には効かないこと。
独自セクションに background: #fff と直接書かれていたら、そこだけ白いまま残ります。
方式2: filter で全体を反転する
ページ全体に filter: invert(1) をかけて、まとめて暗くする方式です。
html[data-theme="dark"] { filter: invert(1) hue-rotate(180deg); }
/* 写真だけ、もう一度反転して打ち消す */
html[data-theme="dark"] img { filter: invert(1) hue-rotate(180deg); }
変数を使っていない箇所にも効くのが強みで、独自セクションが多いストアでも一応暗くなります。
弱点は2つあります。1つは、写真の打ち消しが完全ではないこと。
CSS の hue-rotate は本物の色相回転ではなく行列による線形近似なので、
2回かけても元に戻りません。オレンジがピンクに寄る、といったずれが残ります。
もう1つは、アイコンまで巻き込むこと。
カートや検索のアイコンは currentColor で文字色に追従する SVG のことが多く、
これを写真と同じように再反転すると元の暗い色に戻り、
暗い背景と同化して見えなくなります。エラーは出ないので、気づくのは客からの問い合わせです。
方式3: ダーク用の CSS を手で書く
テーマのクラス名を調べて、ダーク時の配色を自分で書く方式です。
アプリの「追加 CSS」欄がこれにあたります。
思ったとおりに作れる代わりに、テーマを更新するたびに壊れる可能性があります。
全体をこれで作るのは現実的ではなく、方式1で足りない箇所を埋める補助として使うのが実用的です。
3方式の比較
| 方式1 CSS変数の反転 | 方式2 filter で全反転 | 方式3 手書きCSS | |
|---|---|---|---|
| 写真の色 | 元のまま | ずれる（近似のため） | 元のまま |
| 変数を使わない箇所 | 効かない | 効く | 書けば効く |
| アイコンの消失 | 起きない | 起こりうる | 起きない |
| テーマ更新への強さ | 強い | 強い | 弱い |
| 導入の手間 | 少ない | 少ない | 多い |
既定は方式1、足りない箇所を方式3で埋め、どうしても届かないときだけ方式2。
この順番が、崩れにくさと手間のバランスが取れます。
Shopify App Store のダークモードアプリを実データで見る
2026年9月7日時点で、Shopify App Store のダークモードアプリは次の状況です。
| アプリ | 月額 | 評価 | レビュー数 | 日本語 |
|---|---|---|---|---|
| NightTheme ‑ Dark Mode Switch | $4.99〜 | 5.0 | 7 | なし |
| Twilight | $4.99 | 4.0 | 5 | なし |
| Darkify ‑ Dark Mode Toggle | $3.99 | 3.8 | 2 | なし |
| GoodSwitch ‑ Dark Mode Toggle | $3.99 | 未評価 | 0 | なし |
| Darklix ‑ Dark Mode Switcher | $9.99〜 | 未評価 | 0 | なし |
| Dark Mode ‑ Night Eye | $4.99 | 2.0 | 1 | なし |
| Glasses: One‑Click Darkmode | 無料プランあり | 1.0 | 4 | なし |
目を引くのは3点です。
- レビュー総数が7社合わせて19件しかない。カテゴリ自体がまだ小さい
- 相場は月額 $3.99〜$9.99。永続無料プランを持つのは Glasses だけで、その評価は 1.0
- 日本語対応のアプリが1つも無い。管理画面もテーマエディタの設定項目も英語のまま
低評価の内訳を見ると、「画像が単純反転されて見栄えが悪い」（Glasses）と
「トグルの状態が維持されない・読み込み時に一瞬ライトで出る」（Night Eye / Twilight）が目立ちます。
前者は方式2の弱点そのもの、後者は初期描画の作り方の問題です。
シンプルダークモード｜お手軽配色切り替え・目に優しい表示
| 項目 | 内容 |
|---|---|
| 開発 | 株式会社UnReact（日本） |
| 価格 | 月額 $2.99 / 年額 $29.99 |
| 無料体験 | 7日間 |
| 実装方式 | 方式1（CSS変数の反転）＋方式3（追加CSS）／方式2も選択可 |
| 対応テーマ | Dawn / Horizon |
| 対応言語 | 20言語（日本語を含む） |
| 設定項目 | 6項目（色4・簡易反転・追加CSS） |
上の表で挙げた市場の3つの特徴に、そのまま対応する作りになっています。
価格は相場の下限を下回る $2.99、日本語対応、既定は方式1です。
ストアフロントの全ページに切り替えボタンが出る
アプリ埋め込みなので、ページごとに設置する必要がありません。
有効にした時点で、トップも商品ページもコレクションもカートも対象になります。
お客様の選択はブラウザの localStorage にだけ保存されます。
Shopify の顧客データには何も書かないので、Protected Customer Data の申請も不要です。
ワンタップでページ全体が切り替わる
ちらつき（FOUC）対策として、初回描画より前に保存された選択を反映しています。
外部ファイルや {%% javascript %%} タグは使わず、Liquid に直接書いたインラインスクリプトで処理します。
{%% javascript %%} タグは Shopify 側で自動的に defer されるため、
初期描画の確定には間に合わないのがその理由です。
この処理は data-* 属性を付けるだけでレイアウトには触らないので、CLS も悪化しません。
色は自分で決められる（指定しなければ自動生成）
背景色・文字色・アクセント背景色・アクセント文字色の4項目。
空欄なら、テーマの配色から自動生成されます。
自動生成では、明度を単純にクランプせず圧縮しています。
テーマは近い明度でセクションの境目を作るので、クランプすると境目が潰れてのっぺりするからです。
スマートフォンでもそのまま動く
テーマへの追加はワンクリック
管理画面でテーマを選んで「テーマに追加」を押すと、テーマエディタが開きます。
あとは右上の「保存」を押すだけです。
NightTheme ‑ Dark Mode Switch
| 項目 | 内容 |
|---|---|
| 価格 | 月額 $4.99〜（上位プラン $9.99） |
| 評価 | 5.0（7件） |
| 特徴 | OS設定への追従、SVGアイコンの反転、CSSカスタマイズ |
| 日本語 | なし |
このカテゴリでレビュー数と評価がいちばん高いアプリです。
OS の prefers-color-scheme に追従する機能を持ち、手動トグルと併用できます。
高評価レビューではサポートの速さが挙がっています。
Glasses: One‑Click Darkmode
| 項目 | 内容 |
|---|---|
| 価格 | 無料プランあり（Plus 月額 $4.99 / 年額 $29.99） |
| 評価 | 1.0（4件） |
| 特徴 | テーマ非依存の反転型。ワンクリック導入 |
| 日本語 | なし |
7社で唯一、永続的な無料プランを持つアプリです。テーマを選ばず動きます。
一方で評価は 1.0。低評価の内容は「画像が単純に色反転されて見栄えが悪い」
「カスタマイズできない」に集中しています。方式2の弱点がそのまま出た形です。
まず無料で試したい場合の選択肢になりますが、写真中心のストアでは要検証です。
Darkify ‑ Dark Mode Toggle
| 項目 | 内容 |
|---|---|
| 価格 | 月額 $3.99 / 年額 $39.99 |
| 評価 | 3.8（2件） |
| 特徴 | 色とトグル位置の設定。最安帯 |
| 日本語 | なし |
有料アプリの中では最安帯です。設定は色とボタン位置に絞られています。
低評価では「トグルボタンがカートボタンと重なる」という指摘があり、
ボタン位置を変えられることが効いてくるタイプのアプリです。
Twilight
| 項目 | 内容 |
|---|---|
| 価格 | 月額 $4.99（年額プランなし） |
| 評価 | 4.0（5件） |
| 特徴 | 背景色・文字色のカスタマイズ、CSS調整 |
| 日本語 | なし |
評価とレビュー数のバランスが良いアプリです。
低評価では「読み込み時に一瞬ライトで表示される」「数量セレクターの配色が漏れる」が挙がっています。
前者は初期描画の作り方、後者はテーマ固有の要素の取りこぼしです。
入れる前に確認しておく4つのこと
1. 商品写真をどう見せたいか
これがいちばん先です。 色の再現が売上に直結する商材
（アパレル、コスメ、食品、インテリア）なら、方式2のアプリは避けたほうが安全です。
無料だからと入れて、写真がネガになって取り下げる——というのが最も多い失敗です。
2. テーマが配色変数を使っているか
方式1のアプリは、テーマが配色変数を持っていることが前提です。
Dawn / Horizon は color_scheme_group を持つので相性が良い一方、
独自制作のテーマや古いテーマは変数を使っていないことがあります。
確認は簡単で、ストアフロントで検証ツールを開き、html 要素の Computed から
--color で始まるカスタムプロパティが並んでいるかを見ます。
🚨 変数名だけで判断しないでください。 Dawn が実際に地色に使うのは
--gradient-background で、--color- では始まりません。
名前で絞ると必ず取りこぼします。
3. チェックアウトは対象外だと理解しているか
どのアプリを使っても、チェックアウトとサンクスページは暗くなりません。
これらは Shopify 側が描画するページで、通常のアプリを入れられないためです
（Checkout UI Extension が必要で、これは Shopify Plus 限定）。
「全ページ対応」と書かれていても、この2つは含まれません。
4. 誰が切り替えるのか
手動トグルだけのアプリと、OS 設定に追従するアプリがあります。
OS 追従は「暗くしたい人には最初から暗い」利点がある一方、
店側が意図した見た目と違う状態で最初の1画面が表示されることになります。
ブランドの第一印象を固定したいなら、手動トグルのみのほうが扱いやすいです。
導入したら、この順に確認する
無料体験のあいだに確認しておきたい項目を、影響の大きい順に並べます。
全ページを見る必要はありません。壊れやすい場所は決まっています。
1. 商品ページの写真とカラーバリエーション
最優先はここです。商品写真の色、そしてカラースウォッチ（色見本）を確認します。
スウォッチは背景色をベタ書きで持っていることが多く、
方式1では暗くならず、方式2では色そのものが変わります。
「赤」と書かれたスウォッチが青緑になっていたら、その時点で方式2は使えません。
2. ヘッダーのアイコン
カート、検索、アカウントの3つを見ます。
方式2のアプリでアイコンが消えるのはここです。
アイコンは currentColor で文字色に追従する SVG のことが多く、
写真と同じ扱いで再反転すると、暗い背景と同化します。
スクロールしてヘッダーが固定表示に変わったときも確認してください。
固定時だけ背景が透明になるテーマがあり、そこだけ配色が抜けることがあります。
3. カートドロワー
カートに商品を入れて、右から出てくるドロワーを開きます。
あとから DOM に挿入される要素なので、
読み込み時に一度だけ処理する実装だと、ここだけ白いまま残ります。
数量セレクターの配色漏れも、実際に低評価で指摘されている箇所です。
4. ページ遷移と再読み込み
ダークにしてから別ページへ移動し、そのあと再読み込みします。
- 移動先でライトに戻る → 状態の保存ができていない
- 再読み込みで一瞬だけ白く光る → 初期描画の確定処理が無い、または defer されている
後者は「動いてはいる」ので見逃されがちですが、
毎回目に入るので体験としてはかなり気になります。
5. スマートフォン幅
トグルボタンの位置を確認します。
カートボタンや「今すぐ購入」と重なっていないかが要点です。
実際に低評価で指摘されている干渉です。
入れたあとに見ておく数値
ダークモードは「入れて終わり」にしやすい機能です。
効いているかを判断するために、次の3つを見ておくと無駄になりません。
切り替えが使われている割合
トグルの押下をイベントとして計測できるなら、
セッションのうち何％がダークに切り替えたかを見ます。
// GA4 の例。切り替え時に一度だけ送る
document.addEventListener("click", (e) => {
const btn = e.target.closest("[data-dark-toggle]");
if (!btn) return;
const next = document.documentElement.getAttribute("data-theme") === "dark" ? "light" : "dark";
window.gtag?.("event", "theme_switch", { theme: next });
});
数％しか使われていないなら、ボタンが見つけられていない可能性があります。
位置や大きさを見直す判断材料になります。
時間帯ごとの利用率
夜間（20時〜翌2時）のセッションで切り替え率が上がるなら、
想定どおりの使われ方をしています。
日中と変わらないなら、まぶしさ以外の理由（好み）で使われていることになり、
訴求の仕方を変える余地があります。
Core Web Vitals の変化
導入前後で LCP と CLS を比べます。
初期描画の確定処理を入れる関係で同期スクリプトが1つ増えるため、
LCP がわずかに悪化することはあります。
CLS が悪化した場合は、切り替え処理がレイアウトに触っています。
色の変更だけならレイアウトは動かないので、実装を確認してください。
よくある質問
ダークモードを入れると SEO に影響しますか
配色を切り替えるだけで、HTML の構造やテキストは変わりません。
ただし方式2（filter による全反転）は描画コストがかかるため、
Core Web Vitals の観点では方式1のほうが有利です。
表示速度は落ちませんか
方式1なら、やっているのは CSS カスタムプロパティの上書きだけなので影響は小さいです。
ただし初期描画の確定処理を入れる関係で、
同期スクリプトが1つ増える点は理解しておいてください。
レイアウトに触らない実装なら CLS は悪化しません。
商品のカラースウォッチが暗くならないのですが
スウォッチは「その色そのもの」を見せる部品なので、
配色変数ではなくベタ書きの色で作られていることがほとんどです。
方式1では対象外になり、明るいまま残ります。
これは不具合ではなく、むしろ正しい挙動です。
赤いスウォッチが暗い赤になったら、色を選ぶ役に立ちません。
周囲の枠線だけを暗くしたい場合は、追加 CSS で枠線の色を指定してください。
追加 CSS を書いたのに反映されません
多くはテーマ側の !important に負けています。
たとえば Horizon はヘッダーの背景に !important を使っているので、
こちらも !important を付けないと上書きできません。
.header__row { background: #16181b !important; }
クラス名の取り違えもよくあります。ブラウザの検証ツールで実際のクラス名を
確認してから書いてください。
テーマを変えたら設定はどうなりますか
アプリ埋め込みの有効化と設定値はテーマごとに保存されます。
新しいテーマに切り替えたら、そちらでも有効にし直す必要があります。
お客様が選んだ設定は次回も残りますか
多くのアプリはブラウザの localStorage に保存するので、同じブラウザなら残ります。
別の端末やシークレットウィンドウでは引き継がれません。
まとめ
この記事で見たことを、判断に使える形に畳むとこうなります。
- 実装方式が体験を決める。写真をネガにしたくないなら方式1（CSS変数の反転）を選ぶ
- 方式2は最後の手段。変数を使わない箇所にも効く代わりに、写真の色がずれ、アイコンが消えることがある
- チェックアウトはどのアプリでも対象外。「全ページ」の意味を確認してから導入する
- カテゴリはまだ小さい（7社・レビュー総数19件）。日本語対応のアプリは現時点で1つもない
まず方式1のアプリを無料体験で入れ、暗くならない箇所を追加 CSS で埋める。
それでも届かないときだけ方式2を検討する——という順番が、やり直しがいちばん少なくて済みます。