macOSでダークモードが導入されて以降、一気にその波が広がっています。アプリなどもダークモードをサポートしたり、Webサイトでも行われるようになっています。プログラマやエンジニアでは背景を黒くするのが当たり前だったので、時代が追いついたと言えなくもなさそうです。 そんなダークモードをWebサイトでも使えるようにするのがDarkmode.jsです。切り替えを簡単にできます。

Darkmode.jsの使い方

実際に使っているところです。クリック一つで表示が切り替わります。

MOONGIFTで試したところ。

Darkmode.jsはmix-blend-modeというCSSプロパティを使うことで、全体の配色を逆転させています。MOONGIFTをデフォルトのまま適用すると見づらいですが、設定を変更することで容易にダークモードを導入できそうです。

Darkmode.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Darkmode.js sandoche/Darkmode.js: ? Add a dark-mode / night-mode to your website in a few seconds