ダークモードの実装方法

JavaScript

Posted at 2024-06-23

必要な部分のみ書いています。

index.html

<head>
  <link rel="stylesheet" type="text/css" id="dark-mode-link" href="./css/dark-mode.css">
</head>

<body>
  <p>ダークモード！</p>

  <script>
    const darkModetoggleSwitch = document.querySelector("#darkModetoggleSwitch")
    const darkModeLink = document.querySelector('#dark-mode-link');

    darkModetoggleSwitch.addEventListener('click', toggleDarkMode);

    function toggleDarkMode() {
      if (darkModeLink.href.includes('dark-mode.css')) {
        darkModeLink.href = '';
      } else {
        darkModeLink.href = 'dark-mode.css';
      }
    }
  </script>
</body>

dark-mode.css

body {
  background-color: #121212;
  color: #ffffff;
}

手動で切り替える方法。ボタンでの切り替え実装。参考サイトではローカルに保存して、最初の読み込み時に分けていたりしてます。

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #ffffff;
  }
 }

OSの設定で切り替える方法です。mac、windows、ios、androidどれでもいけると思います。

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up