Result
以前書いたCSSで出来る簡易的なダークモードの改良版です。
以前のコードだと画像や動画なども反転させてしまい、機能しなかったので画像や動画も含められるように。
尚、以前同様にダークモードのスイッチにはJSを使用していますのでCSSのみで施工したい場合は便宜変更ください。
css
.inverted {
filter: invert(100%) hue-rotate(180deg);
}
.inverted img,
.inverted iframe{filter: invert(100%) hue-rotate(180deg);
}
方法はいたって単純で、反転させたくない要素を再反転させればOKです。
たとえばvideoタグも追加したい場合は
.inverted img,
.inverted iframe,
.inverted video{filter: invert(100%) hue-rotate(180deg);
}
という感じで追加すれば反転させずにダークモードを維持できます。
といっても、簡易版には変わりないのでコンテンツに応じて導入をご検討ください。
