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

スマホファーストの今、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/

新着ピック  






















新着ニュース

 | Developers.IO

| Developers.IO

DevelopersIO / 2時間前


Amazon SageMakerで複数のモデルを同じエンドポイントにホスティングしてみた | Developers.IO

Amazon SESのSMTPエンドポイントを試してみた | Developers.IO

[小ネタ]KMSカスタマーキーのエイリアス名を変更する方法 | Developers.IO

[小ネタ]ngコマンドを使ってNetlifyにデプロイしてみる | Developers.IO

ベンチャーキャピタリストは疲弊している | TechCrunch Japan

マイクロソフトは現在攻撃にさらされているIEのセキュリティバグを修正へ | TechCrunch Japan

アマゾンがインドの何千もの小規模商店と提携 | TechCrunch Japan

ポケモンGO、「交換による進化」の気になるところを「ローブシン」で検証

NHK大河ドラマ「麒麟がくる」で話題 明智光秀が敗死しなければ「明智幕府」は誕生していたか?

AutoScalingの「起動設定」をCloudformationで変更するときの手っ取り早いやりかた | Developers.IO

ユーザーフィードバックを一元化し強力な顧客コミュニティを構築するSaaS、Harvestr | TechCrunch Japan

AWS IoTで証明書からデバイスを特定してみる | Developers.IO

Angular製静的サイトジェネレータScullyを試してみた | Developers.IO

ラズパイ4にFirecrackerの環境を構築してMicroVMを動かそう!! | Developers.IO

Mozillaが70人レイオフ、新製品の立ち上げに遅れ | TechCrunch Japan

[レポート]Create your first application in the cloud with Amazon Lightsail #dem152 #reinvent | Developers.IO

ポケモンGOでポッチャマのコミュニティ・デイ、19日開催 タマゴふ化距離が4分の1に

MicrosoftとSlackの争いは、2020年も広告やアクティブユーザーの数などで行われる | TechCrunch Japan

NHK大河ドラマ「麒麟がくる」に登場 将軍よりも関白の権威を政治に利用した豊臣秀吉

もっと見る
会員登録
Register
記事をPICKする

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