Blocksyでダークモードを用意するなら、テーマのグローバルカラーパレットが出力するCSS変数を、ダーク用の値で上書きするのが一番手堅い方法です。この記事では、子テーマにCSSと小さなスクリプトを追加して「OSの設定に合わせて自動で切り替わり、ボタンでも手動で切り替えられる」ダークモードを作る手順と、ちらつきや色の取り残しといったつまずきやすい点の確認方法を説明します。
実装方法は3通りある
Blocksyでダークモードを実現する方法は、大きく分けて次の3つです。
- Blocksy Pro の機能を使う：有料版（Blocksy Companion Pro）には、ヘッダーにカラーモードの切り替えを置ける要素が用意されています。名称や設定項目、無料版との線引きはバージョンで変わることがあるため、使う前に公式ドキュメントで確認してください（2026年10月現在）。
- ダークモード用プラグインを使う：WP Dark Mode などのプラグインは、テーマを問わず色を自動で反転・調整してくれます。導入は手軽ですが、自動変換のため画像やボタンの色が意図どおりにならないことがあり、細かい調整には結局CSSが必要になります。
- 子テーマで自作する：本記事で扱う方法です。Blocksyはパレットの色をCSS変数として出力しているので、その変数をダーク用に差し替えれば、ヘッダー・本文・フッターがまとめて切り替わります。追加の読み込みが少なく、配色を自分で決められるのが利点です。
Proを契約済みならまず標準機能を試し、無料版で運用している、あるいは配色を細かく制御したい場合は自作を選ぶ、という分け方が現実的です。
作業前の準備：バックアップと子テーマ
テーマのファイルを直接編集すると、Blocksyの更新で変更が消えます。大がかりな準備は要りませんが、次の2点は先に済ませてください。
- サイト全体（ファイルとデータベース）のバックアップを取る。
- Blocksyの子テーマを用意して有効化する。Creative Themes が配布している子テーマを使うか、自分で作ります。
自作する場合、wp-content/themes/blocksy-child/style.css の先頭は次のようにします。Template には親テーマのフォルダ名 blocksy を書きます。
/*
Theme Name: Blocksy Child
Template: blocksy
Text Domain: blocksy-child
*/カスタマイザーの設定はテーマごとに保存されるため、子テーマに切り替えると親テーマで設定したパレットなどは引き継がれません。設定済みの場合は、Blocksyに用意されている設定のエクスポート／インポート機能（提供場所はバージョンにより異なります）を使うか、手作業で設定を移してください。
パレットのCSS変数を確認する
最初に、Blocksyがどんな変数名で色を出力しているかを自分のサイトで確認します。サイトを表示してブラウザの開発者ツールを開き、html 要素（:root）に適用されているスタイルを見ると、Blocksy 2.x系では --theme-palette-color-1 から始まる変数が並んでいるはずです。古い1.x系では --paletteColor1 のような名前だったため、更新していないサイトでは名前が違う点に注意してください。
次に、外観 → カスタマイズ → 一般 → カラー（表記はバージョンにより異なります）で、パレットの何番が何に使われているかを確認します。標準の配色では、1〜2番がアクセント、3番が本文の文字、4番が見出し、5番が境界線、6〜8番が背景系に割り当てられていることが多いですが、サイトごとに変えられるので、このとおりとは限りません。ここで対応表を作っておくと、次の手順で迷いません。
ステップ1：OSの設定に合わせて配色を切り替える
子テーマの style.css に、ダーク時のパレットを書きます。prefers-color-scheme: dark はOSやブラウザがダーク設定のときに有効になるメディアクエリです。後で手動切り替えに対応させるため、data-color-mode="light" が付いているときは除外し、data-color-mode="dark" のときは常にダークにしています。
/* OSがダーク設定で、ユーザーが明示的にライトを選んでいないとき */
@media (prefers-color-scheme: dark) {
:root:not([data-color-mode="light"]) {
--theme-palette-color-3: #c9d1d9; /* 本文の文字 */
--theme-palette-color-4: #f0f3f6; /* 見出し */
--theme-palette-color-5: #30363d; /* 境界線 */
--theme-palette-color-6: #161b22; /* 薄い背景 */
--theme-palette-color-7: #0d1117; /* サイト背景 */
--theme-palette-color-8: #1c2128; /* カードなどの背景 */
color-scheme: dark;
}
}
/* ボタンでダークを選んだとき */
:root[data-color-mode="dark"] {
--theme-palette-color-3: #c9d1d9;
--theme-palette-color-4: #f0f3f6;
--theme-palette-color-5: #30363d;
--theme-palette-color-6: #161b22;
--theme-palette-color-7: #0d1117;
--theme-palette-color-8: #1c2128;
color-scheme: dark;
}番号と色の対応は、前の手順で作った対応表に合わせて書き換えてください。color-scheme: dark を指定すると、フォームの入力欄やスクロールバーなどブラウザが描く部品も暗い表示になります。
確認は、OSの表示設定をダークに切り替えるか、Chromeの開発者ツールの「レンダリング」パネルにある prefers-color-scheme のエミュレーションを使うと手早くできます。
ステップ2：手動の切り替えボタンを付ける
OSの設定とは別に、閲覧者が選べるボタンを付けます。選んだモードは localStorage に保存し、次のページでも引き継ぎます。
ここでつまずきやすいのが、ページを開いた瞬間に一度ライトで描画されてからダークに変わる「ちらつき」です。これを避けるには、本文が描画される前、つまり <head> の中で保存済みのモードを html 要素に反映させる必要があります。子テーマの functions.php に次を追加します。
<?php
// head の早い段階で保存済みのモードを反映（ちらつき防止）
add_action( 'wp_head', function () {
$js = "(function(){try{var m=localStorage.getItem('color-mode');if(m==='dark'||m==='light'){document.documentElement.setAttribute('data-color-mode',m);}}catch(e){}})();";
wp_print_inline_script_tag( $js );
}, 1 );
// 切り替えボタンの処理を読み込む
add_action( 'wp_enqueue_scripts', function () {
wp_enqueue_script(
'blocksy-child-color-mode',
get_stylesheet_directory_uri() . '/js/color-mode.js',
array(),
wp_get_theme()->get( 'Version' ),
true
);
} );
// 画面右下に切り替えボタンを出す
add_action( 'wp_footer', function () {
echo '<button type="button" class="color-mode-toggle" aria-pressed="false">' . esc_html__( 'ダークモード切替', 'blocksy-child' ) . '</button>';
} );子テーマに js/color-mode.js を作り、次の内容を保存します。
document.addEventListener('DOMContentLoaded', function () {
var btn = document.querySelector('.color-mode-toggle');
if (!btn) return;
var root = document.documentElement;
function current() {
var m = root.getAttribute('data-color-mode');
if (m) return m;
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
function sync() {
btn.setAttribute('aria-pressed', current() === 'dark' ? 'true' : 'false');
}
sync();
btn.addEventListener('click', function () {
var next = current() === 'dark' ? 'light' : 'dark';
root.setAttribute('data-color-mode', next);
try { localStorage.setItem('color-mode', next); } catch (e) {}
sync();
});
});ボタンの見た目は style.css で整えます。位置を固定する場合の例です。
.color-mode-toggle {
position: fixed;
right: 16px;
bottom: 16px;
z-index: 999;
padding: 8px 14px;
border: 1px solid var(--theme-palette-color-5);
border-radius: 999px;
background: var(--theme-palette-color-8);
color: var(--theme-palette-color-4);
cursor: pointer;
}ヘッダー内に置きたい場合は、wp_footer での出力をやめ、Blocksyのヘッダービルダーに用意されているHTML要素へ同じ <button> を貼り付ける方法もあります。スクリプトはクラス名でボタンを探すので、場所を変えてもそのまま動きます。
色が切り替わらない部分への対処
パレット変数を差し替えても、次のような部分は元の色のまま残ることがあります。
- ブロックで色を直接指定した箇所：段落やグループに任意のカラーコードを指定していると、その部分だけ変わりません。ブロックの色はパレットの色から選ぶように揃えると、切り替えに追従します。
- カスタマイザーで個別に色を指定した箇所：ヘッダーやフッターの背景をパレット以外の固定色にしている場合です。パレットの色を参照するように設定し直すか、そのセレクターだけ追加でCSSを書きます。
- ロゴや画像：黒い文字のロゴは暗い背景で読めなくなります。透過PNGの場合は、ダーク用のロゴを用意するか、ロゴの背景に余白付きの明るい色を敷くなどの対策が必要です。写真に
filterで反転をかけるのは不自然になりやすいので避けたほうが無難です。
調べるときは、開発者ツールで色が変わらない要素を選び、その色がどのルールから来ているかを確認します。変数を参照していない固定値であれば、そこが原因です。
キャッシュと表示確認
この方法は、モードの判定をすべて閲覧者のブラウザ側で行うため、ページキャッシュやCDNを使っていてもモードが混ざる心配はありません。ただし、CSSやJSを結合・圧縮する最適化プラグインを使っている場合は、変更後にキャッシュを削除してから確認してください。head に出したちらつき防止のスクリプトを「遅延読み込み」の対象にされると効果がなくなるため、除外設定が必要になることもあります。
最後に、次の点を一通り確認します。
- OSをダークにしたとき、初回表示からダークになるか
- ボタンで切り替えた後、別ページに移動しても選んだモードが保たれるか
- 本文と背景のコントラストが十分か（開発者ツールのコントラスト表示が参考になります）
- スマートフォン表示でボタンがメニューや他の要素と重ならないか
まとめ
- Blocksyではパレットの色がCSS変数で出力されるため、変数をダーク用に上書きするとサイト全体をまとめて切り替えられます。変数名はバージョンで異なるので、開発者ツールで実物を確認します。
prefers-color-schemeでOSに追従し、data-color-mode属性とlocalStorageで手動切り替えを加えます。ちらつきを防ぐ処理はheadの早い段階で実行します。- ブロックやカスタマイザーで固定色を使った箇所、ロゴ、最適化プラグインの遅延設定が、切り替わらない原因になりやすい部分です。
- 作業はバックアップを取ったうえで子テーマに対して行い、Pro版を使っている場合は標準の切り替え機能も比較してください。