最近、ダークモードが流行っている気がします。
長時間スマホを使う人が増えたので、明るい色だと目が疲れるんですかね？
このブログのカラーは白なんですが、ブログの機能としてダークモードを実装してみようかなと…
先日下記のサイトで知りました。たった4行でダークモード実装は素晴らしい！
超軽量コードの「Darkmode.js」を使ってブログにダークモードを実装してみました。
このブログの右上に表示されている🌓を押してみてください。
↑こんな感じで、目に優しいダークモードに切り替わります（・∀・）
【※追記】ごめんなさい！現在このサイトではダークモードは非表示にしています。
ほぼ外部ファイルを読み込むだけなので、誰でも簡単に実装できます。
ダークモードの実装方法
↓Darkmode.jsならこんなに簡単なコードで実装できてしまいます。
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script> <script> new Darkmode().showWidget(); </script>
本当に4行で実装できてしまいました。
基本的に<body>タグの中ならどこに設置しても問題ないと思います。
コードを設置したら、それだけで完成です。
デフォルト設定で自動的に右下に追従するボタンが出てきます。
オプションも用意されているので、微調整も可能です。（以下、公式サイトより）
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: ''
}
const darkmode = new Darkmode(options);
darkmode.showWidget();
ボタンの位置や色を調整することができます。
ユーザービリティ的にはデフォルトが一番分かりやすいと思います。
サイトによっては調整が必要
このブログは無料WordPressテーマの「Stinger8」を使っていますが、基本的にはダークモードを使用することで弊害はありませんでした。
ただ、PC表示のグローバルメニューが真っ黒になってますね（笑）
このブログでナビを使ってる人は少ないんで、気が向いたら直します…。
シンプルなサイトなら問題なく実装できると思いますが、デザインが凝っているサイトだとダークモードのためのCSS調整などが必要になってくる可能性があるので注意ですね。
サイトを運営している人は、気が向いたら「Darkmode.js」で目に優しいサイトを作ってあげましょう。
人気の記事
プロフィール