生成AIが書いたダークモード切り替えが、Studioに持ち込むと消える理由

生成AIに「ダークモードに対応して」と頼むと、訪問者のOS設定や切り替えボタンに応じて色が変わるサイトが返ってきます。ところがこのサイトをStudioに持ち込むと、色の切り替えそのものが動かなくなることがあります。

この記事では、なぜダークモードの切り替えがStudioで動かなくなるのか、理由と現実的な対処法を整理します。

理由：色を切り替えている仕組みが、Studio側には無い

生成AIが書くダークモードは、主に2つの技術で動いています。ひとつは、色をまとめて定義しておき、OS側の「ダークモードにしている」という設定を読み取って値を差し替える仕組み（CSSのprefers-color-scheme）。もうひとつは、切り替えボタンを押すとJavaScriptが要素の状態を書き換え、それに応じた色を適用する仕組みです。

どちらも「条件によって、複数の見た目を切り替える」という仕組みそのものが必要です。Studioでは基本的に、1つの状態に対して1つの色を指定する作り方になっており、公式ヘルプで確認する限り、公開後のサイトを閲覧者ごとに自動でダークモードへ切り替える標準機能は見当たりませんでした（見つかったのは、エディタ画面自体の表示モード設定のみでした）。持ち込んだ時点で、この「切り替えの条件」の部分が失われてしまいます。

実際にはどうなるか

取り込んだ直後は、生成AIが最後に表示していた状態（ライトかダークか）の色がそのまま固定された、ふつうの1色のサイトになります。エラーが表示されるわけではなく、切り替えボタンを押しても何も起こらない、という形で気づくことが多いです。

対処のしかた

• どちらか一方の配色に絞って公開する（多くのサイトでは、これがもっとも手堅い選択です）
• 明暗2種類のデザインをどうしても両方見せたい場合は、色を変えた2つのページを別々に用意し、リンクで行き来できるようにする
• 切り替えの動きそのものを再現したい場合は、カスタムコードやEmbedボックスでコードごと持ち込む方法もあるが、その部分はStudioの画面上で色を直接編集できなくなる

まとめ

ダークモードの切り替えがStudioで動かないのは、コードの間違いではなく「複数の見た目を条件で切り替える」仕組みそのものがStudio側に無いためです。公開時にはどちらか一方の配色に絞るのが現実的な選択になります。

同じく「仕組みの違い」が原因で持ち込めないケースは、生成AIが書いたCSSアニメーションが、Studioにそのまま持ち込めない理由や生成AIが書いたスライダー・アコーディオンのJavaScriptが、Studioで動かない理由でも扱っています。