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

/* 変数 */

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

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

/* CSSでダークモードの実装(OSに合わせるだけの場合) */
@media (prefers-color-scheme: dark) {
    :root {
        --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");
osDark.addListener(function () {
            if (osDark.matches) { // ダークモードをオンにした場合
                text.innerText = "ダークモード";
            } else { // ダークモードをオフにした場合
                text.innerText = "ライトモード";
            }
        })

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.