コピペでWebサイトにダークモードを追加できるプラグイン「Darkmode Widget」

2019/06/21 09:00

スマホファーストの今、Webサイトのダークモード化もユーザーからの要望の常連になりつつありますが、やはり導入するの面倒。そんなとき、サクッと導入できるプラグインをご紹介します。

◆ コピペでWebサイトにダークモードを追加できるプラグイン「Darkmode Widget」
https://darkmodejs.learn.uno/

紹介

VanillaJSで構築され非常に軽量なのが特徴。こちらオープンソースとしても提供されています。

導入

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>
<script>
  new Darkmode().showWidget();
</script>

最も簡単な導入方法は、こちらのスニペットをWebサイトのheaderに貼り付けるだけです。

右下に黒丸の切り替えボタンが出現します。ただちょっと味気ないので

var options = {
  bottom: '64px', // default: '32px'
  right: 'unset', // default: '32px'
  left: '32px', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#100f2c',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: false, // default: true,
  label: '🌓' // default: ''
}
new Darkmode(options).showWidget();

このようにパラメータをつけることで

ボタンをカスタマイズすることも可能です。

ボタンを押すと、このように一瞬でダークモードに切り替わります。

背景を白と黒で切替するため、一部CSSの調整が必要になりますが手軽にダークモードを導入できる点で非常に重宝しそうです。

実装は数秒で終わるのでぜひ試してみてください!

◆ コピペでWebサイトにダークモードを追加できるプラグイン「Darkmode Widget」
https://darkmodejs.learn.uno/

ログイン
会員登録
Register
記事をPICKする

会員登録すると、もっと便利に利用できます。