背景色に合わせて文字色や画像の色を変更したいときに使えるMidnight.js

ダウンロードはこちら「Midnight.js」から。
今回作成したデモ
以下、デモを参照しながらみるとわかりやすいです!

HTML

headerでjqueryとMidnight.jsを読み込む

 

CSS

JS

今回h1タグで囲まれた「Midnight」の箇所の色を変更したいので、h1タグをdivで囲み、そこにふったクラス.ttlを指定しました。すると、h1タグが.midnightHeaderというクラスが付いたdivで勝手に囲われるので、cssにて.defaultの時と、.darkの時で色などを設定します。

 
 
 
文字でなくても、例えばロゴの色を変更したい場合は、ロゴをsvgで作成しfillの色を変更したり、背景画像として設置し、cssで.midnightHeader.defaultのときと.midnightHeader.darkのときでbackgroundを変更するなどでもうまく動作してくれます。