HTMLでダークモードを作成する方法


  1. ダークモード用のCSSスタイルを作成する まず、ダークモード用のスタイルを定義するためにCSSファイルを作成します。例えば、"dark-mode.css"という名前のファイルを作成します。以下は、ダークモード用の一般的なスタイルの例です。
body {
  background-color: #333;
  color: #fff;
}
a {
  color: #fff;
}
/* 他のスタイルルールを追加する */
  1. ダークモード用のスタイルを適用する HTMLファイルの<head>セクション内で、ダークモード用のスタイルを適用するためにCSSファイルを読み込みます。以下は、HTMLファイル内でCSSファイルを読み込む方法の例です。
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="dark-mode.css" media="(prefers-color-scheme: dark)">
  <!-- 他の<head>内の要素を追加する -->
</head>
<body>
  <!-- ページのコンテンツを追加する -->
</body>
</html>

<link>要素のhref属性にCSSファイルのパスを指定し、media属性に(prefers-color-scheme: dark)を指定します。これにより、ユーザーの環境がダークモードをサポートしている場合にのみ、ダークモード用のスタイルが適用されます。

  1. ユーザーがダークモードを切り替えられるようにする ユーザーがダークモードを切り替えられるようにするために、トグルスイッチやボタンを追加する方法もあります。以下は、JavaScriptを使用してダークモードの切り替えを実現する例です。
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="dark-mode.css" media="(prefers-color-scheme: dark)">
  <script>
    function toggleDarkMode() {
      var body = document.getElementsByTagName("body")[0];
      body.classList.toggle("dark-mode");
    }
  </script>
</head>
<body>
  <button onclick="toggleDarkMode()">ダークモード切り替え</button>
  <!-- ページのコンテンツを追加する -->
</body>
</html>

上記の例では、toggleDarkMode()関数がボタンがクリックされるたびに呼び出され、body要素のdark-modeクラスがトグルされます。dark-modeクラスは、ダークモード用のスタイルを指定するためにCSSファイル内で定義する必要があります。

これらの手順を実行することで、HTMLでダークモードを作成することができます。ユーザーの環境設定やユーザーが切り替えた設定に基づいて、ダークモードが自動的に適用されるようになります。また、ユーザーが切り替えるためのUI要素を追加することもできます。