WEB関係

Darkmode.jsでブログにダークモードを実装してみた

更新日:

最近、ダークモードが流行っている気がします。

長時間スマホを使う人が増えたので、明るい色だと目が疲れるんですかね?

このブログのカラーは白なんですが、ブログの機能としてダークモードを実装してみようかなと…

先日下記のサイトで知りました。たった4行でダークモード実装は素晴らしい!

超軽量コードの「Darkmode.js」を使ってブログにダークモードを実装してみました。

このブログの右上に表示されている🌓を押してみてください。

↑こんな感じで、目に優しいダークモードに切り替わります(・∀・)

ほぼ外部ファイルを読み込むだけなので、誰でも簡単に実装できます。

WEBサイトにダークモードを実装するにあたって

「ボタンでスクリプト動かして背景と文字の色を切り替えるだけじゃん」

と思う人もいるかもしれないけど、実際に実装しようと思ったら結構めんどくさいんですよ。

ダークモードの実装方法

↓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」で目に優しいサイトを作ってあげましょう。







関連記事

【2019年】ロリポップと比較してさくらのレンタルサーバが1歩リードか

安くてお手軽なサーバーとして比較されがちなさくらのレンタルサーバとロリポップ。 どちらも2016年あたりから2018年までに、かなり性能がアップしている印象がある。 特に昔のロリポップは「安かろう悪か …

クリック率をアップさせるボタンはHTML+CSSだけで超簡単に作れます

Webサイトを作る時、ボタンのデザインは意外と重要です。 ボタンのデザイン次第でクリック率が変わってしまうのは、実際に身をもって体験しています。 ちょっと前まではPhotoshopでボタンを作ることが …

【PHP】日付比較で期間を指定して条件分岐してみる

日付での条件分岐はよく使うんですが、期間を指定しての分岐は普通にWEBサイト作ってたら滅多に使いません。 というより、今日とある制作案件で初めて使いました(笑) 非常に簡単なんですが、今後コピペで使え …

1つのメールアドレスでWordPressに複数ユーザーを作成する方法

仕事でクライアントから50人以上のユーザーを登録しなくてはならないサイト制作を依頼されました。 複数の店舗がそのサイトにそれぞれの情報を登録していくタイプのWEBサイトですね。 しかし、WordPre …

【3分で完成】CSS3だけでSVGアニメーションロゴ作ってみた

あまりにも地味すぎて、気づいている人はいないかもしれないけど…このブログのロゴはSVGをアニメーションさせています。 ページを読み込んだ時、線を書くようなアニメーションでロゴが表示されます。 イラスト …

この記事をシェアする

ranking人気の記事

plofileプロフィール

運営者:ERA
職業:WEBクリエイター
趣味:ゲーム
仕事中はずっとパソコン、家に帰るとずっとゲームをして1日中ブルーライトを浴び続ける生活をしています。
詳細はこちら