モード切り替えデモ

サンプル

dark-modeがbodyに追加されCSSカスタムプロパティの変数が、
dark-modeで定義したものに上書きされて
色味やフォントが変わっているのがわかります。

transitionで指定する時間も変数にできます。
ダークモードへの変化スピードをゆっくりに、
戻す時は素早くしているのも定義できます。

CSS

      
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');

:root {
    --background-color: #ffffff;
    --text-color: #333;
    --card-bg: #e8e8e8;
    --button-bg: #007bff;
    --button-text: #fff;
    --font-family: Arial, sans-serif;
    --font-size-small: 12px;
    --font-size-default: 16px;
    --font-size-large: 20px;
    --transition-time-short: 0.3s;
}

.dark-mode {
    --background-color: #222;
    --text-color: #fff;
    --card-bg: #333;
    --button-bg: #ff9800;
    --button-text: #000;
    --font-family: 'Noto Sans', sans-serif;
    --font-size-small: 10px;
    --font-size-default: 14px;
    --font-size-large: 18px;
    --transition-time-short: 2s;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: var(--font-size-default);
    transition: background-color var(--transition-time-short), color var(--transition-time-short), font-family var(--transition-time-short);
    text-align: center;
    padding: 20px;
}

.card {
    background-color: var(--card-bg);
    transition: background-color var(--transition-time-short);
    padding: 20px;
    margin: 20px auto;
    width: 50%;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

button {
    background-color: var(--button-bg);
    color: var(--button-text);
    font-size: var(--font-size-small);
    transition: background-color var(--transition-time-short), color var(--transition-time-short);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    opacity: 0.8;
}

h1 {
    font-size: var(--font-size-large);
}

h2 {
    font-size: var(--font-size-default);
}

/* コードブロックのスタイル */
.code-block-wrap {
    text-align: center;
    margin: 0 auto;
    width: 70%;
}