<body>
  <div class="content">
        <h1 id="text">ライトモード</h1>
    </div>
</body>
@charset "UTF-8";

/* 変数 */

:root {
    --text: #444444;
    --back: #FFFFFF;

    --change: 0.5s ease-in-out;
}

/* ダークモードの場合 */
:root.darkmode {
    --text: #EBEBEB;
    --back: #231802;
}

/* 基本設定 */
body {
    font-family: sans-serif;
    background: var(--back);
    color: var(--text);
    transition: var(--change);
    height: 100vh;
    margin: 0;
}

/* コンテンツ */
.content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
}

.content #text {
    margin-bottom: 20px;
}

.darkmode .content {
    transition: var(--change);
}

// テキストの切り替え
let osDark = window.matchMedia("(prefers-color-scheme: dark)");
let text = document.getElementById("text");

// ダークモードがオンのときに実行する処理
function darkModeOn() {
  document.documentElement.classList.add("darkmode");
  text.innerText = "ダークモード";
}

// ダークモードがオフのときに実行する処理
function darkModeOff() {
  document.documentElement.classList.remove("darkmode");
  text.innerText = "ライトモード";
}

// ロード時の状況に応じて切り替え
if (osDark.matches) { // OSでダークモードがオンの場合
  darkModeOn();
}

// osの設定が変更されたら実行する
osDark.addListener(function () {
  if (osDark.matches) { // ダークモードをオンにした場合
    darkModeOn();
  } else { // ダークモードをオフにした場合
    darkModeOff();
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.