コピペで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/

新着ピック  






















新着ニュース

大阪メトロ、顔認証でゲートを開閉する改札機の実験--地下鉄の動物園前駅など4駅で

PFUの「Happy Hacking Keyboard Professional」がUSB Type-CとBluetooth両対応に進化、シンプルな有線モデルも用意

JR東日本など、NFCタグで各種タッチ対応サービスを技術検証--交通や決済で活用へ

高齢者の自動車暴走事故はなぜ起きるのか ボルボの「世界的第一人者」に聞いた

【レポート】AWS Wavelength登場!5Gで超低遅延なアプリケーションを動かそう #CMP212 #reinvent | Developers.IO

[レポート] MGT313 ゴールドマン・サックスのエンタープライズ規模のガバナンス設計 #reinvent | Developers.IO

ACMから証明書が削除できない事象と謎のロードバランサー | Developers.IO

Looker Year End Party(忘年会)で『JOIN 2019』の参加報告をしてきました #looker #JOINdata | Developers.IO

[レポート]What’s New in AWS CloudFormation #reinvent #DOP408 | Developers.IO

【レポート】ライフサイエンスの未来の研究室 #LFS302 #reinvent | Developers.IO

非白人女性がシリコンバレーでベンチャー投資を獲得した秘訣 | TechCrunch Japan

[レポート] 次世代のAmazon EC2の強化 Nitroシステムの詳細 #CMP303 #reinvent | Developers.IO

人間のモチベーションを高めるAI、オムロンとスクエニが開発へ 表情から感情を読み取り助言 卓球ロボで実験も

[AIM303] – 推測をやめる:AIを使って顧客の会話を理解する #reinvent | Developers.IO

マットレスとIoT家電が連携して眠りをサポート、パナソニックとふとんの西川

API Gatewayでカスタムドメインを利用する(SSL証明書のみAWS機能で用意するパターン) | Developers.IO

既存の銀行や保険会社にスタートアップに比肩する開発スピードを与えるFintechOSとは? | TechCrunch Japan

[アップデート]Amazon FSxのダッシュボードでCloudWatchのモニタリングが可能になりました | Developers.IO

5Gの活用も視野に ドコモ回線を使った製造業向けIoTサービス「OMNIedge」始動

[レポート]機械学習で精度が改善し続ける&あらゆるソースからデータを入れられる検索新サービスAmazon Kendraの紹介 (AIM208-R1 #reinvent ) | Developers.IO

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

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