サイトをダークモードに切り替えできるWordPressプラグイン「WP Dark Mode」

Webサイトをダークモードに切り替えができるWordPressプラグイン「WP Dark Mode」の機能と使い方を解説します。

ダークモードとは、別名ナイトモードやダークテーマとも呼ばれ、OSやソフトウェア、Webサイトの色調を薄暗い色合いに切り替える機能のことを指します。視覚的な快適性や電力の節約のためにダークモードを取り入れることが多いです。

WP Dark Mode機能概要

WP Dark Mode（無料版）の機能は次の通り。

• Webサイトをオン・オフでダークモードに切り替えできる。
• Webサイトを最初からダークモードにすることもできる。
• 管理画面をダークモードにできる。

無料版ではかなり機能が制限されていますが、有料版にアップグレードすると、カラーやテンプレートの選択肢が豊富にあったり、ダークモード時のみ適用されるカスタムCSSが使えたりと利便性が高いです。

インストール

管理画面から「WP Dark Mode」を検索してインストールするか、下のボタンからもダウンロード可能です。プラグインファイルを wp-content/pluginsディレクトリにアップした後、管理画面から有効化してください。

WP Dark Mode

プラグインのインストールにつきましてはこちらで詳しく解説しています。

使い方

プラグインを有効化すると、サイト右下に三日月アイコンが表示されます。

アイコンをクリックすると、ダークモードに切り替えられえます。

↑こんな感じ。ロゴ（画像）以外は問題なくダークモードに対応できています。

ロゴを反転させたい場合は、CSSのfiterプロパティを利用する手もあります。

WordPressの管理画面もダークモードにするとこんな感じ。

それでは設定方法の解説に移ります（無料版で使える設定のみ解説）。

>> 解説に使用したWordPressテーマは「NULL」

General Settings

Enable Frontend Darkmode：ダークモードを有効にする
Enable Backend Darkmode：バックエンドダークモードを有効にする
Enable OS aware Dark Mode：OS 対応のダークモードを有効にする
Block Editor Dark Mode：ブロックエディターのダークモード

Advanced Settings

Make Dark Mode Default：ダークモードをデフォルトにする

Color Settings

Want to use color presets?：カラープリセット

Switch Settings

Show Floating Switch：切り替えアイコンを表示
Floating Switch Style：アイコンの選択
Switch Size：アイコンサイズ
Floating Switch Position：アイコンの表示位置
Attention Effect：アイコンの注意効果

Image Settings

Low Brightness：ダークモードがオンの場合、画像の明るさを 80% まで有効
Grayscale：ダークモードがオンの場合、画像へのグレースケール効果を有効

Animation

Darkmode Toggle Animation：ダークモードとホワイトモードの間のダークモード切り替えアニメーションを有効に。
Animation Effect：アニメーション効果

まとめ

最近はダークモードを採用したブログを見ることが増えました。　ワンクリックでサイトイメージを変えられるのは便利ですね。WordPressのダッシュボードがダークモードに変更できるのも新鮮です。

「WP Dark Mode」を使ったダークモードの場合、懸念点はロゴをどうするかでしょう。ロゴだけは色が反転しないので、CSS調整が必要です。

>> WordPressテーマ「NULL」