CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSを使ってWebサイトにダークモード／ライトモードを実装する方法

ページの文字色（color）と背景色（background-color）を切り替えるだけで、Webサイトにダークモード／ライトモード機能を簡単に追加できます。本記事では、CSSと少量のJavaScriptを組み合わせて、ボタン操作で表示モードを切り替える実装方法を、実際に動作するサンプルコードとともにわかりやすく解説します。

基本の構文

ダークモードを適用する場合は、次のような構文を使用します。セレクターに対して文字色を白、背景色を黒に指定することで、暗い環境でも視認性の高い表示を実現できます。

Selector {
   color: white;
   background-color: black;
}

実装例1：テキスト中心のページ

以下の例では、ボタンをクリックするとJavaScriptのclassList.toggle()メソッドによってbody要素に「dark」クラスが付与・解除され、ページ全体の配色が切り替わります。あわせて、ボタンのラベルも現在のモードに応じて更新される仕組みです。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            font-size: 1.4em;
            text-align: center;
         }
         .dark {
            color: white;
            background-color: black;
         }
      </style>
   </head>
   <body>
      <div>
         <p>これはサンプルテキストです。下のボタンをクリックすると、ページの背景色と文字色が切り替わり、ダークモードとライトモードの見た目を簡単に確認できます。</p>
         <button id="btn" onclick="change()">Normal Mode</button>
      </div>
      <script>
         let btnText = document.getElementById("btn");
         function change() {
            let btn = document.body;
            btn.classList.toggle("dark");
            if (btnText.innerHTML === "Normal Mode") {
               btnText.innerHTML = "Dark Mode!";
            } else {
               btnText.innerHTML = "Normal Mode";
            }}
      </script>
   </body>
</html>

このコードを実行すると、次のような出力が得られます。

CSSを使ってWebサイトにダークモード／ライトモードを実装する方法

実装例2：画像を含むページ

次の例では、テキストに加えて画像を含むページに、同じモード切替機能を実装しています。ダークモードに切り替えても画像はそのまま表示され、背景色と文字色だけが変化する点に注目してください。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            font-size: 1.4em;
            text-align: center;
         }
         .dark {
            color: white;
            background-color: black;
         }
      </style>
   </head>
   <body>
      <div>
         <button id="btn" onclick="change()">Normal Mode</button>
         <p>これはサンプルテキストです。</p>
         <img src="https://images.unsplash.com/photo-1610718055968-4e3cf23d96db?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=200" />
      </div>
      <script>
         let btnText = document.getElementById("btn");
         function change() {
            let btn = document.body;
               btn.classList.toggle("dark");
               if (btnText.innerHTML === "Normal Mode") {
                  btnText.innerHTML = "Dark Mode!";
               } else {
                  btnText.innerHTML = "Normal Mode";
            }}
      </script>
   </body>
</html>

このコードを実行すると、ライトモードとダークモードのそれぞれで次のように表示されます。

CSSを使ってWebサイトにダークモード／ライトモードを実装する方法 

CSSを使ってWebサイトにダークモード／ライトモードを実装する方法

実装のポイント

より実用的なサイトでは、色の値をCSSカスタムプロパティ（変数）として定義しておくと、テーマごとの配色管理が容易になります。また、@media (prefers-color-scheme: dark)メディアクエリを併用すれば、OSやブラウザの設定に応じて自動的にダークモードを適用することも可能です。ユーザーの選択をlocalStorageに保存しておけば、ページを再読み込みしても設定が維持され、より快適なユーザー体験を提供できます。

  1. 【Microsoft Edge】Webサイトにダークモードを強制表示させる方法

    Microsoft Edgeブラウザの設定を変更することで、任意のWebサイトやWebコンテンツを強制的にダークモードで表示させることができます。これにより、通常は白い背景で表示されるページが、黒い背景に切り替わります。 以前、Google ChromeでWebサイトにダークモードを強制する方法をご紹介しましたが、今回はMicrosoft Edgeでの手順を解説します。なお、この方法はEdge自体の「ダークテーマ」を有効にする設定とは異なる点に注意してください。テーマの変更ではブラウザの外観しか変わらず、Webページの内容までは暗くなりません。 EdgeでWebサイトにダークモードを強制する

  2. Android版Chromeでダークモードを有効にする方法【アップデートから設定まで解説】

    Chrome 74でついに実現したダークモード Chromeはアップデートを重ねるごとに、バグ修正やユーザーが長年待ち望んでいた機能が追加されていきます。Chrome 74では、従来の真っ白な画面に疲れた目を休ませてくれる「ダークモード」がついに搭載されました。 Android版Chromeのダークモードを利用するには、まずChromeを最新バージョンにアップデートしておく必要があります。一度有効にしてしまえば、従来の白い画面にはもう戻りたくなくなるかもしれません。 Android版Google Chromeをアップデートする方法 自分が使っているChromeのバージョンがわからない場合は、