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

新着ピック  






















新着ニュース

初のオンライン開催!第10回 Alteryx User Groupに参加しました #alteryx_ug | Developers.IO

「Xbox Series X」、旧作ゲームもHDRで表現--フレームレート2倍も

「Windows 10 May 2020 Update」にドライバーの互換性に関する問題が報告

「Windows 10 May 2020 Update...

ZDNet Japan / 1時間前


AWS Chatbotを使ってSlackのプライベートチャンネルに連携できないときの対処方法 | Developers.IO

【6/24(水)リモート】「Sumo Logicウェビナー 〜ログ収集、監視、分析をデモで紹介します!〜」を開催します | Developers.IO

Twitter、予約投稿をTwitter.comで可能に

トランプ氏、SNS標的の大統領令に署名--ツイートへの警告ラベル受け

プログラミングスクール「テックキャンプ」運営のdivが18.3億円調達、新型コロナ禍でオンライン授業強化へ | TechCrunch Japan

スマートリングが取得する生体情報で無症状コロナ感染者を早期発見、ウエストバージニア大学が開発 | TechCrunch Japan

コロナ禍でニーズ増す金融サービス 「LINE Score」「LINE Pocket Money」の戦略とは?

Nuroがトヨタ・プリウスベースの自動運転車と自社製R2配達ロボで米大手薬局チェーンの処方薬を配達 | TechCrunch Japan

「Xbox Series X」では4世代前のゲームとも後方互換 HDR+フレームレート倍化ゲームも

データ漏洩通知は行間を読め、本当の意味を解読する方法 | TechCrunch Japan

ショートムービーのQuibiがAirPlayをサポート、iPhoneなどでのコンテンツシェアが容易に | TechCrunch Japan

Hulu、離れていても一緒に視聴できる「Watch Party」機能をテスト

本⽥圭佑氏らが「挑戦者FUND」設立--21世紀の課題「孤独・退屈・不安」解決を目指す

YouTube、動画をチャプター分割できる新機能「Video Chapters」

アマゾン支援のEVメーカーRivianが保険商品の提供を計画か | TechCrunch Japan

クラウドベースのコールセンターシステム「Aircall」が約70億円を調達 | TechCrunch Japan

このままでは潰れる! 小規模ホテルが挑む「シェルター事業」とは

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

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