Result

簡単なダークモードを少しのCSSとJSで実装する的なやつ

以前はCSSだけでシンプルなLight/Darkモードというものをご紹介しました

前回はCSS変数を使用してライト/ダークの色を管理しました。今回はもう少し手を抜くというか、filter: invertを使って反転させます

CSS変数の方が実用的ではありますが、反転で済ませられそうなら楽そう

css

.inverted {
  filter: invert(100%);
  background-color: #333;
}

.inverted.rotated {
  filter: invert(100%) hue-rotate(180deg);
}

背景を黒くして他の要素は反転させます

hue-rotateを併用して、反転する事で問題が生じる場合はその箇所をサポート、みたいな

js

const invertToggle = document.querySelector("#invert")
const rotateToggle = document.querySelector("#rotate")
const doc = document.documentElement

const classToggleFn = className => e => {
  if(e.target.checked) {
    doc.classList.add(className)
  } else {
    doc.classList.remove(className)
  }
}

invertToggle.addEventListener('input', classToggleFn('inverted'))
rotateToggle.addEventListener('input', classToggleFn('rotated'))

チェックボックスにチェックが入ったらHTMLタグにclassを付与させてCSSで管理します

html

<p>
  <label class="check">
    <input type="checkbox" id="invert" />
    ダーク/ライト
  </label>
</p>
<p>
  <label class="check">
    <input type="checkbox" id="rotate" />
    特定の要素を反転させない
  </label>
</p>
<p>hogehoge</p>

can i use

filterのブラウザ対応状況です

via

Smarter inverted “dark mode”