フロントのエンド

Web開発をがんばりたいブログ

JavaScript

「Darkmode.js」webサイトにダークモードをちゃちゃっと実装出来そう

by:
19/09/25

iPadOSにダークモードがきて、いよいよもう実装をさけられんよなぁというサイトのダークモード。

ライブラリをぶっ込んでチャチャッと済ませられそうで捗る。

Darkmode.js

WordPressのプラグインもあるのでさらに加速。

Blackout: Dark Mode Widget – WordPress plugin | WordPress.org

さくっとさわってみたけども、body直下に `div` を作ってcssの色味反転的な大胆な作りになっていて、そのまま使えば全ての色味が変わってしまう。

ロゴや写真、アイコンも何もかも色味が反転する。

そういうのを救済する措置として

.button {
  isolation: isolate;
}

.darkmode--activated .logo {
  mix-blend-mode: difference;
}

cssのプロパティーを持たせるのはやっておかないと凄いことになる。

試しにこのサイトにも入れてみたけども、簡単ではありました。

これ、どれだけつかわれるんだろう??

プラグインさして、cssをちょいと弄れば終わりという手軽さは便利やなと感じました。

コメントを残す