ダークモード（にも切り替えられる）ボタンを設置できるWordPressプラグイン「ColorSwitch」を公開しました

ColorSwitch

WordPress用のカラースキーム切替プラグイン「ColorSwitch」をGitHubで公開しました。

もともとは、このブログ用に作ったダークモード切替プラグインが始まりです。汎用性を高めついでに公開してしまおうという流れ。

公式プラグインとして公開はまだしておらず、GitHubでの配布です。

やることはシンプルで、あらかじめ配色設定をしておき、サイト上にその配色に切り替えるボタンを設置します。読者がボタンを押すと、あらかじめ用意した配色にサイト全体が切り替わるので、ダークモードだけではなくどんな色合いにもできる自由度があります。

主な特徴は次のとおりです。

自由な配色ルール: CSSセレクタを指定して背景色／文字色／枠線色のルールを設定します。ダークモード専用ではないので、セピア風やハイコントラストなど、まったく違う色合いへの切替ボタンとしても使えます
例外指定: 色を変えたくない要素（広告、SNSボタン、コードブロックなど）をセレクタで対象外にできます
プリセット: ルールと例外指定のセットを名前を付けて保存できます（最大10件）。JSONでエクスポート／インポートも可能なので、同じテーマを使っているサイトであれば設定が使い回せます。
ボタンのカスタマイズ: アイコン、文字スタイル、サイズ、形状、色、設置場所まで設定でき、ボタンデザインのライブプレビューで確認しながら調整できます。設置場所はページの四隅（オフセット設定有）か、ショートコードでの設置が可能です。
日本語／英語対応: 管理画面はWordPressの言語設定に追従します

ColorSwitchには「ダーク色はこれ」といった決め打ちの設定項目がありません。代わりに、ルールのリストが配色そのものです。

インストール直後は、最低限の初期ルールが3つだけ入っています。

ここに「見出しはこの色」「サイドバーはこの背景」という具合に、自分のテーマに合わせてルールを足していく使い方です。ルールにはメモ欄があるので、「これは何のセレクタか」を書いておけます。なお、並び順がそのまま優先順位です。

配色を変えたくない要素は、例外指定にセレクタを書けば全ルールから対象外になります。1行に1つずつ書く形式で、//でコメントアウトができ、メモを付けることもできます。

初期値ではコードブロック用の pre と code が例外に入っています。コードブロックにも色を付けたい場合は、この2行を消せばルールの対象になります。

ほかにも「画像を少し暗くする」オプションがあり、切替時に画像だけ浮いて見えるのを抑えられます。

使っていて1つ分かったコツを書いておきます。

CSSの文字色は親要素から子要素へ継承されます。そのため、例外指定で要素をルールから外しても、親要素に付いた色が継承されて文字色が変わってしまうことがあります。

そういう要素は例外指定で逃がすのではなく、その要素自身に「元の色」を指定する専用ルールを1つ足して固定するのが確実です。セレクタに :not() なども普通に使えるので、細かい指定もできます。ちなみに、色はvar()も指定できます。

ボタンまわりの設定項目は多めです。

アイコン: 絵文字の自動表示（通常時🌙／切替時☀️）、記号、カスタム文字から選択。カスタムには絵文字や1文字のほか、Font Awesomeのクラス名（例: fa-solid fa-moon）も指定できます ※Font Awesome自体はサイト側で読み込まれている必要があります
見た目: 文字のサイズ・太さ・フォント、ボタンのサイズ、形状（丸／角丸／四角）、背景色と文字色（透明度の指定も可）。ボタンの背景色と文字色は切替時の色を通常時と別々に指定することもできます
設置場所: ページの四隅のいずれかにフローティング表示（端からの距離もpx単位で調整可）、またはショートコードで好きな場所に配置　⇒
初期表示: 「通常」か「切替済み」かを選べるほか、「OSがダークモードの場合は自動で切替済みにする」設定もあります

設定画面にはライブプレビューがあり、通常時のボタンと切替時のボタンを並べて確認しながら調整できます。