Shopify にダークモードを追加できるアプリ6選！写真を反転させずに配色だけ切り替える

「ダークモードって、うちのストアに入れる意味があるんでしょうか？」

お問い合わせでよくいただく質問です。答えを先に言うと、
夜間のアクセスが多いストアなら意味があります。ただし入れ方を間違えると逆効果です。

この記事は、その「意味があるのか」「どう選ぶのか」「入れたら何が起きるのか」を、
いただく質問の順に並べてお答えする形で書いています。
気になるところから読んでいただいて構いません。

そもそもダークモードを入れる意味はあるのでしょうか

スマートフォンで夜に買い物をする方は少なくありません。
暗い部屋で真っ白なページを開くと、まぶしくて読み続けるのがつらくなります。
読みづらいページは、それだけで離脱の理由になります。

とはいえ、すべてのストアに必要というわけではありません。
判断の目安はこうです。

• 向いている: 夜間のアクセスが多い、読み物ページが多い、長時間の比較検討をともなう商材
• 急がなくてよい: 昼間の購入が中心、写真の色そのものが商品価値（アート作品、生花など）

後者にあたる場合でも、写真の色を保てる方式のアプリを選べば導入できます。
この記事の主題はそこです。

どのアプリを選んでも同じではないのですか

いいえ、中でやっていることが違います。 ここが最も大事な分かれ道です。

大きく2つの作り方があります。

ひとつは、テーマが持っている色の設定値だけを差し替える方法。
背景の色、文字の色、といった「色の指定」を暗い値に書き換えるので、
画像そのものには触れません。商品写真は元の色のまま残ります。

もうひとつは、ページ全体の色を丸ごと反転させる方法。
白は黒に、黒は白になります。手軽で、どんなテーマでもとりあえず暗くなります。
ただし画像も一緒に反転してしまうので、写真を打ち消す処理が別に必要です。
そしてこの打ち消しは、完全には元に戻りません。

Shopify App Store で低評価が集中しているのは、後者を使ったアプリです。
「画像が単純に色反転されて見栄えが悪い」という指摘が繰り返し書かれています。

日本語で使えるアプリはありますか

2026年9月時点で、Shopify App Store のダークモードアプリは7本ほどあります。
NightTheme、Twilight、Darkify、GoodSwitch、Darklix、Night Eye、Glasses。

このうち日本語に対応しているものは、当社のアプリを除いて1本もありません。
管理画面もテーマエディタの設定項目も英語のままです。

レビュー総数も7本合わせて19件と、カテゴリ自体がまだ小さいのが現状です。
相場は月額 $3.99 から $9.99 のあいだで、
永続的な無料プランを持つのは Glasses の1本だけ（評価は 1.0）です。

シンプルダークモード｜お手軽配色切り替え・目に優しい表示

株式会社UnReact が開発した、日本語で使えるダークモードアプリです。
月額 $2.99（年額 $29.99）、7日間の無料体験があります。
相場の下限を下回る価格に設定しています。

色の設定値だけを差し替える方式を既定にしているので、
商品写真はネガにならず、元の色のまま表示されます。

お客様は右下のボタンを押すだけです

会員登録もログインも要りません。選んだ状態はブラウザに残るので、
次に訪れたときも同じ配色で開きます。

保存先はブラウザの中だけで、Shopify の顧客データには何も書きません。

ページ全体がまとめて切り替わります

ヘッダーもフッターも商品一覧も同時に変わります。ページごとの設置は不要です。

読み込んだ瞬間に一瞬だけ白く光る、いわゆる「ちらつき」も起きません。
最初の描画より前に、保存された選択を反映しているためです。

色は自分で決められます

背景色、文字色、アクセントの背景色、アクセントの文字色の4つを指定できます。
空欄にしておけば、いまのテーマの配色から自動で作られます。
ブランドカラーに寄せたいときだけ埋めてください。

自動生成では、明るさを単純に切り詰めるのではなく圧縮しています。
テーマは近い明るさでセクションの境目を作るので、
切り詰めると境目が消えてのっぺりした画面になってしまうためです。

スマートフォンでもそのまま動きます

追加の設定は要りません。ボタンは画面の右下に固定されます。

テーマへの追加はワンクリックです

管理画面でテーマを選んで「テーマに追加」を押すと、テーマエディタが開きます。
右上の「保存」を押せば、その時点からストアに表示されます。

• インストールはこちら
• ご利用ガイドはこちら

Darkify ‑ Dark Mode Toggle

月額 $3.99（年額 $39.99）。評価は 3.8（2件）です。
有料アプリの中では最安帯にあたります。

設定できるのは色とトグルボタンの位置で、項目を絞ったシンプルな作りです。
レビューには「トグルボタンがカートボタンと重なる」という指摘があり、
ボタン位置を動かせることが実用面で効いてきます。
英語のみの対応です。

NightTheme ‑ Dark Mode Switch

月額 $4.99 から（上位プランは $9.99）。評価は 5.0（7件）で、
このカテゴリでは評価もレビュー数も最上位のアプリです。

端末の OS 設定に追従する機能を持っていて、手動の切り替えと併用できます。
SVG アイコンの反転や CSS でのカスタマイズにも対応します。
高評価のレビューではサポート対応の速さが挙げられています。英語のみの対応です。

Darklix ‑ Dark Mode Switcher

TODO: 画像を入れる（Darklix ‑ Dark Mode Switcher のアプリストア画像）

月額 $9.99 から。今回調べた中では最も高い価格帯です。レビューはまだありません。

OS 設定への追従に加えて、ダークモード時に画像そのものを別のものへ
差し替える機能（Media Replacement）を持っています。
写真を反転させるのではなく、ダーク用の写真を用意して入れ替えるという考え方です。
手間はかかりますが、色の再現を最優先するなら理にかなった方式です。英語のみの対応です。

GoodSwitch ‑ Dark Mode Toggle

月額 $3.99。新しいアプリで、レビューはまだありません。
ライトとダークの選択肢をお客様に提供する、という位置づけです。

価格は Darkify と同じ最安帯です。実績がまだ無いぶん、
無料体験のあいだに主要ページを一通り確認しておくのが安全です。英語のみの対応です。

Dark Mode ‑ Night Eye

月額 $4.99（年額 $39.99）。評価は 2.0（1件）です。
時間帯による自動切り替え（スケジュール）を持っているのが特徴で、
この機能を備えるのは7本中2本だけです。

レビューでは「トグルの状態が維持されない」という指摘が出ています。
ページを移動すると元に戻ってしまう、という症状です。英語のみの対応です。

入れる前に決めておく3つのこと

1. 商品写真を反転させてよいか

ここを最初に決めてください。 色そのものが商品価値になる商材
（アパレル、コスメ、食品、インテリア）では、
全体を反転する方式のアプリは避けたほうが安全です。

赤いニットが青緑になり、木目のテーブルが紫になります。
打ち消しの処理を入れても完全には戻りません。

2. どのテーマで使うか

色の設定値を差し替える方式は、テーマが配色の変数を持っていることが前提です。
Dawn や Horizon はこの仕組みを持っているので相性が良い一方、
独自制作のテーマや古いテーマは変数を使っていないことがあります。

また、アプリの有効化と設定はテーマごとに保存されます。
テーマを切り替えたら、新しいほうでも有効にし直す必要があります。

3. チェックアウトは対象外だと理解しているか

どのアプリを使っても、チェックアウトとサンクスページは暗くなりません。
これらは Shopify 側が表示するページで、通常のアプリを入れられないためです。

「全ページ対応」と書かれていても、この2つは含まれていません。
購入完了まで暗いままにはならない、と理解しておいてください。

業種別に見た、入れ方の目安

同じダークモードでも、扱う商品によって気をつける場所が変わります。

アパレル・雑貨

色の再現がそのまま売上に効くので、写真を反転しない方式を選んでください。
あわせて確認したいのがカラースウォッチ（色見本）です。

スウォッチは「その色そのもの」を見せる部品なので、
配色の変数ではなくベタ書きの色で作られていることがほとんどです。
設定値を差し替える方式では明るいまま残りますが、これは正しい挙動です。
赤い見本が暗い赤になったら、色を選ぶ役に立ちません。

食品・飲料

こちらも写真の色が命です。加えて、原材料表示やアレルギー表記が
読みづらくなっていないかを確認してください。

小さい文字は、背景とのコントラストが下がると一気に読めなくなります。
文字色を自分で指定できるアプリなら、少し明るめに寄せておくと安全です。

型番商材・パーツ・工具

スペック表を多用する商材です。表の罫線が消えていないかを見てください。

罫線は「ごく薄いグレー」で引かれていることが多く、
暗い背景に対して明るさを切り詰める実装だと背景と同化します。
比較しながら読む商材で罫線が消えると、致命的に読みにくくなります。

ハンドメイド・一点もの

写真が主役で、かつ点数が少ないカテゴリです。
背景色を自分で指定して、写真が映える暗さに調整するのが向いています。

真っ黒（#000）ではなく、少し明るい暗色（#16181b あたり）にすると、
写真の輪郭が沈まずに見えます。

読み物が多いストア

ブログやレシピ、使い方の記事を持っているストアは、
ダークモードの効果がいちばん出やすいカテゴリです。

長文を読む場面では明るい画面が負担になるので、
記事ページでの切り替え率を見ておくと導入効果を判断しやすくなります。

自分で実装する場合

アプリを使わずに作る場合、どんな処理になるのかを見ておきましょう。
やることは「テーマが持っている色を集めて、暗い値を作り、書き戻す」の3つです。

色を集める

テーマの配色は1か所にまとまっていません。
:root に書かれているもの、配色クラスごとに分散しているもの、
要素の style 属性に直接書かれているものがあります。

// スタイルシートを走査して、カスタムプロパティを全部集める
const collect = () => {
  const found = new Map();
  for (const sheet of document.styleSheets) {
    let rules;
    try { rules = sheet.cssRules; } catch (e) { continue; } // 別オリジンは読めない
    for (const rule of rules) {
      if (!rule.style) continue;
      for (const prop of rule.style) {
        if (!prop.startsWith("--")) continue;
        found.set(rule.selectorText + "|" + prop, rule.style.getPropertyValue(prop).trim());
      }
    }
  }
  return found;
};

🚨 変数名で絞り込まないでください。
テーマごとに命名が違うため、名前で絞ると必ず取りこぼします。
たとえば Dawn が実際に地色に使うのは --gradient-background で、
--color- では始まりません。
全部拾って、値が色として読めたものだけを対象にするのが正解です。

暗い値を作る

明るさを反転しますが、単純に上限で切り詰めてはいけません。

// L は 0〜100 の明度。反転しつつ、幅を圧縮して境目を残す
const toDark = (L) => 8 + (100 - L) * 0.84;

テーマは「白」と「ごく薄いグレー」のように、
近い明るさの差でセクションの境目を作っています。
切り詰めると両方が同じ暗さになり、境目が消えてのっぺりします。
圧縮すれば、差を保ったまま全体を暗くできます。

元の書き方を保って書き戻す

値の形は1つではありません。#ffffff のような16進数、
rgb(255 255 255 / 1) のような関数形式、
そして 255 255 255 のような数値の並びだけの形があります。

// 生のトリプレット（255 255 255）は、そのままの形で返す
const writeBack = (original, r, g, b) => {
  if (/^\s*\d+[\s,]+\d+[\s,]+\d+\s*$/.test(original)) {
    const sep = original.includes(",") ? ", " : " ";
    return [r, g, b].join(sep);   // rgb(...) で包まない
  }
  return "rgb(" + r + " " + g + " " + b + ")";
};

数値の並びは rgb(var(--x)) のように使われることがあり、
ここを rgb(...) で包んで返すと rgb(rgb(255 255 255)) になって壊れます。
元の形を保つのが鉄則です。

全体を反転する方式にする場合

こちらは短く書けますが、アイコンの扱いに注意が必要です。

html[data-theme="dark"] { filter: invert(1) hue-rotate(180deg); }

/* 写真は打ち消す */
html[data-theme="dark"] :is(img, video, picture, canvas, iframe) {
  filter: invert(1) hue-rotate(180deg);
}

/* 🚨 currentColor を使う SVG は打ち消さない。アイコンは文字色に追従する UI 部品 */
html[data-theme="dark"] svg:has([fill="currentColor"]) { filter: none; }

カートや検索のアイコンまで打ち消すと、元の暗い色に戻ります。
反転後の暗い背景と同化して、ヘッダーからアイコンが消えます。
エラーは出ないので、気づくのはお客様からの問い合わせです。

ちらつきを防ぐ

保存した選択は、最初の描画より前に反映する必要があります。

<!-- 外部ファイルにしない。defer も async も付けない -->
<script>
  (function () {
    try {
      var v = localStorage.getItem("theme");
      if (v === "dark") document.documentElement.setAttribute("data-theme", "dark");
    } catch (e) { /* プライベートブラウジングでは読めない。無視してよい */ }
  })();
</script>

Shopify テーマの {%% javascript %%} タグは自動的に defer されるため、
この用途には使えません。Liquid に直接書いたインラインスクリプトが必要です。

属性を付けるだけでレイアウトには触らないので、CLS（レイアウトのずれ）も悪化しません。

まとめ

最初の質問に戻ります。「ダークモードを入れる意味はあるのか」。

夜間のアクセスが多いストアなら、読みやすさの改善として意味があります。
ただし入れ方を間違えると、商品写真が別の色になって逆効果になります。

選ぶときは、次の順に確かめてください。

1. 写真の色を保てる方式か（設定値の差し替えか、全体の反転か）
2. 使っているテーマで崩れないか（無料体験のあいだに主要ページを一通り開く）
3. チェックアウトは対象外だと理解しているか
4. 日本語で設定できるか

「シンプルダークモード｜お手軽配色切り替え・目に優しい表示」は、
この4つすべてに答えられるように作りました。
月額 $2.99、7日間の無料体験があります。まずは試してみてください。

参考記事

• [Shopify にダークモードを追加する方法5選！実装方式の違いと選び方を検証](https://qiita.com/eijiSaito/items/TODO: Qiita 公開後の id を差し替える)