CSSだけでシンプルなLight/Darkモード

Result

Webアプリやスマホアプリ等でよくあるダークモードをCSSだけで実現しよう、というもの
力業というわけでもなく、割と実践的でした。とはいえシンプルな方法なのである程度利用シーンは限られます

css

:root{/*基本のスタイル*/
  --bg: #f8fafc;
  --panel-bg: #FFFFFF;
  --panel-border: #CCCCCC;
  --panel-title: #343f44;
  --panel-text: #54666d;
  --btn: #3eb0ef;
}

.toggleDark{/*ライトモード時のトグルボタン*/
  display: block;
  color: #222;
}

.toggleLight{/*ダークモードからライトへ戻す際のボタン。非表示にしておく*/
  display: none;
  color: white;
}

#toggleMode:checked ~ .toggleDark{/*チェックが入ったら非表示*/
  display: none;
}

#toggleMode:checked ~ .toggleLight{/*チェックが入ったら表示*/
  display: block;
}

#container{/*メインコンテナ*/
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg);
  z-index: 1;
  padding: 50px 20px;
}

#toggleMode:checked ~ #container{/*トグルボタンが押されたら変数をオーバーライド*/
  --bg: #020202;
  --panel-bg: #111413;
  --panel-border: #1f2322;
  --panel-title: #8e9294;
  --panel-text: #505456;
  --btn: #2962fe;
  
  background-color: var(--bg);
}

/*各所の基本設定。CSS変数の部分だけトグルボタンで切り替わる事*/
.panel .content{
  width: 70%;
  float: left;
  padding: 20px;
  background-color: var(--panel-bg);
  height: 300px;
  border-radius: 0 10px 10px 0;
  border-top: 1px solid var(--panel-border);
  border-right: 1px solid var(--panel-border);
  border-bottom: 1px solid var(--panel-border);
  box-sizing: border-box;
}

.panel .content h2{
  margin-top: 20px;
  margin-bottom: 0;
  color: var(--panel-title);
}

.panel .content p{
  margin-top: 10px;
  font-weight: 300;
  color: var(--panel-text);
}

.panel .content button{
  border: 0;
  border-radius: 3px;
  background-color: var(--btn);
  padding: 10px 20px;
  color: white;
  cursor: pointer;
}

2つのCSS変数を用意し、checkboxで実装したトグルボタンにチェックが入ったら切り替える、という流れ
そのため、各マテリアルの色の設定箇所にはCSS変数で用意、:checkedになったら一括で切り替えられます

html

<input type="checkbox" id="toggleMode">
    <label for="toggleMode" class="toggleDark">暗くする</label>
    <label for="toggleMode" class="toggleLight">明るくする</label>
    <div id="container">
      <div class="panel">
        <div class="image" style="background-image:url('hoge.jpg')"></div>
        <div class="content">
          <h2>foobar</h2>
          <p>piyopiyo</p>
          <button>hogehoge</button>
        </div>
      </div>
    </div>

can i use

CSS変数のブラウザ対応状況です

via

Dark Mode without Javascript