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

新着ピック  






















新着ニュース

初心者向けチュートリアル『例 1: バケット所有者がユーザーにバケットのアクセス許可を付与』をやってみた | DevelopersIO

アップルのLightningと一般的なUSB-Cの両方で使えるセキュリティキーをYubicoが発売 | TechCrunch Japan

Microsoftが開発中のChromiumベースの新しいEdgeブラウザがベータ版に | TechCrunch Japan

大学スポーツ協会、KDDIらと5GやIoTを活用した選手育成やファン拡大

LINE「OpenChat」、違反行為の取り締まり強化 ユーザーには「通報」呼び掛け

iOS 13のプライバシー強化が競争を阻害するとアップルを非難するデベロッパー | TechCrunch Japan

AWS運用かんたん自動化ツール「opswitch」(オプスウィッチ)を使ってみよう! | DevelopersIO

今まで誰もやってなかった自律運転車から車酔いを追放するための研究 | TechCrunch Japan

AI利用のハードルを下げるH2O.aiがゴールドマンサックスのリードで約77億円調達 | TechCrunch Japan

仮想通貨でEdyやnanacoに入金--ディーカレット、「電子マネーチャージ」を提供開始

MITは色々なデバイスに同時に高品質のビデオストリームを配信する方法を開発 | TechCrunch Japan

グーグルの軽量版アプリGoogle Goが全世界で使えるように | TechCrunch Japan

【DataPipelineを触ってみる】DynamoDBからS3へのエクスポートをやってみた | DevelopersIO

デュアル画面のモンスターノート「ASUS ZenBook Pro Duo」が日本上陸--「Zenfone 6」も

[小ネタ] Gitのエイリアス設定を晒してみる(19個) | DevelopersIO

設定なしでデプロイできるZeit Now | DevelopersIO

園児のお昼寝をセンサーで見守り、体調の変化をAIでチェック 埼玉の保育園で実験

ダイソン、日本の住環境を考えたコードレスクリーナーを発売

ドコモ、KDDI、ソフトバンクが取扱再開--ファーウェイ「P30シリーズ」を写真で見る

窓の代わりにディスプレイ ソニーのクルマ、実用化へ ヤマハ発と共同開発

もっと見る
ログイン
会員登録
Register
記事をPICKする

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