2019年11月9日(土)

簡易的なダークモード

• 0
• 1
• 2
• 4

Result

See the Pen Smarter inverted “dark mode” by kachibito
(@kachibito) on CodePen.

簡単なダークモードを少しの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....