WordPressサイトにダークモードボタンを追加する

もしWordPressでテキストが多いサイト、例えば小説共有サイトなどを構築している場合、ユーザーエクスペリエンスのために、サイトにダークモードを追加して、夜更かしの訪問者がサイトにアクセスした際に画面がまぶしすぎないようにすることを検討できます。 サイトにダークモードを追加する方法がわからない場合、WordPressプラグインが簡単にこの問題を解決してくれます。

Dark Mode for WordPress

Dark Mode for WordPressは、サイトにダークモード（ナイトモード）を簡単に追加するWordPressプラグインプラグインです。プラグインをインストールして有効化すると、サイトのフロントエンドに切り替えボタンが表示されます。 余分な設定項目はなく、すぐに使用できます。プラグインが読み込むのは1つのjsファイルのみなので、サイトの速度が遅くなる心配はありません。ダウンロードリンク

Blackout: Dark Mode Widget

Blackout: Dark Mode Widgetは、前述のDark Mode for WordPressよりも機能が少し充実しており、色やボタンのサイズ、位置を設定できるカスタマイズ機能が追加されています。ダウンロードリンク

Darkmode.js

上記の2つのプラグインは、実際にはどちらもDarkmode.jsを使用しています。 Darkmode.jsはオープンソースプロジェクトで、プロジェクトのURLは：https://github.com/sandoche/Darkmode.jsです。 したがって、自分でコードを追加できるなら、どんなサイトでもダークモード機能を実装できます。 最も簡単な方法は、以下のコードをコピーしてサイトのコードに追加するだけで、ダークモード機能を実現できます。

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.4.0/lib/darkmode-js.min.js"></script>
<script>
  new Darkmode().showWidget();
</script>

また、以下のコードを使用してjsファイルをカスタマイズすることもできます。例えば色など

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: ''
  autoMatchOsTheme: true // default: true
}

const darkmode = new Darkmode(options);
darkmode.showWidget();

サイト上でダークモードを使用したくない項目がある場合は、darkmode-ignoreクラスを追加して無効にしたり、isolation: isolate;を追加して無効にしたりできます。