全人類の網膜を白銀の暴挙から救い出す、暗黒の聖戦 [WordPress SWELL ダークテーマ化]

白銀の暴挙に抗え

全人類の網膜は今、未曾有の危機に瀕している。
本記事は、WordPressテーマSWELLをダークモード化するカスタマイズの記録である。

深夜、ふと開いたブラウザ。そこには「白銀の暴挙」とも呼ぶべき、無慈悲なまでの純白（#FFFFFF）が牙を剥き、我々の貴重な視細胞を焼き尽くそうとしている。もはや、ブルーライトカットメガネという名の盾だけでは防ぎきれぬ。

「眩しすぎる……」

その嘆きは、夜な夜な情報を求めてネットの深淵を彷徨う全ての閲覧者、そして画面越しに世界と繋がろうとする全人類の共通の悲鳴だ。

執筆者も、読者も、今この瞬間もディスプレイから放たれる「光の暴力」に晒され続けている。

画面から放たれる殺意に近い白光に目を焼かれ、膝から崩れ落ちながらも、私はただ一筋の「漆黒」を求めて、震える指でキーボードを叩き続けた。

これは単なるカスタマイズではない。全人類の網膜を白銀の暴挙から救い出すための聖戦である。

そして、その白銀の世界を漆黒の安らぎへと反転させ、訪れる者すべてを慈悲深い闇で包み込む知的呪文（コード）が、今ここに完成した。この呪文を適用すれば以下が実現できる。

聖戦の準備：三種の神器【CSS・JavaScript・HTML】

この聖戦に必要なのは、高価なプラグインではない。

あなたの指先から生み出される、わずか数行の記述のみである。

漆黒の結界 [CSS]

これは、あらゆる光を吸収し、平穏へと置換する防壁である。

色の選定には、数多の夜を費やした。ただ黒ければいいのではない。深淵のように深く、それでいて読み手の魂を優しく包み込む「真実の黒」を求めて、私の視神経は何度も限界を超えた。

以下のコードを、カスタマイズ＞ 追加CSS に追加

/* --- ダークモード設定 --- */
html[data-theme-mode='dark'],
html[data-theme-mode='dark'] body {
    --color_bg: #1a1c1e !important;
    --color_text: #eeeeee !important;
    --color_header_bg: #1a1c1e !important;
    --color_header_text: #eeeeee !important;
    --color_footer_bg: #121212 !important;
    --color_footer_text: #eeeeee !important;
    background-color: #1a1c1e !important;
    color: #eeeeee !important;
}

html[data-theme-mode='dark'] .p-spMenu__inner::before {
    background: #1a1c1e;
}

html[data-theme-mode='dark'] .p-spMenu a {
    color: #eeeeee;
}
html[data-theme-mode='dark'] .p-spMenu {
    color: #eeeeee;
}

/* ダークモード時のパンくずリスト */
html[data-theme-mode='dark'] .l-breadcrumb, 
html[data-theme-mode='dark'] .p-breadcrumb { 
    background-color: #25282B !important; 
}

/* --- 切り替えボタンの共通スタイル --- */
.theme-mode-switcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
}

.mode-icon-label {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

/* --- アイコンの表示切り替え --- */
/* デフォルト（ライトモード時） */
html[data-theme-mode='light'] .icon-moon { display: none; }
html[data-theme-mode='light'] .icon-sun  { display: block; }

/* ダークモード時 */
html[data-theme-mode='dark'] .icon-sun   { display: none; }
html[data-theme-mode='dark'] .icon-moon  { display: block; }

ダークモード時は上記の呪文(CSS)で設定した色が適用され、ライトモード時はテーマ側(SWELL)の標準のカラー設定が適用される。

記憶の断片 [JavaScript]

「一度闇に染まった者が、ページをめくるたびに光に引き戻される……」

そんな悲劇（チラつき）を繰り返してはならない。ユーザーが選んだ「闇」という名の安らぎを、ブラウザの深淵（LocalStorage）に記憶させ、次なる訪問時も即座に発動させる魔術だ。

以下のコードを、カスタマイズ＞高度な設定＞ /body直前 に追加

<script>
//チラつき防止＆記憶の呼び出し
(function() {
    const savedMode = localStorage.getItem('theme-mode');
    const isLightOS = window.matchMedia('(prefers-color-scheme: light)').matches;
    const initialMode = savedMode ? savedMode : (isLightOS ? 'light' : 'dark');
    
    document.documentElement.setAttribute('data-theme-mode', initialMode);
})();

//スイッチの動作
document.addEventListener('DOMContentLoaded', function() {
    const html = document.documentElement;
    const checkToggle = document.getElementById('js_mode_toggle');

    if (checkToggle) {
        const currentMode = html.getAttribute('data-theme-mode');
        checkToggle.checked = (currentMode === 'light');

        checkToggle.addEventListener('change', (e) => {
            const newMode = e.target.checked ? 'light' : 'dark';
            html.setAttribute('data-theme-mode', newMode);
            localStorage.setItem('theme-mode', newMode); 
        });
    }
});
</script>

光明と深淵のスイッチ[HTML]

世界を反転させるための物理的なトリガーである「神のスイッチ」をサイト上部に出現させる。時間搾取デバイス(スマホ)の場合は、開閉メニューの下に表示される。

このスイッチを押すことは、白銀の暴挙を終わらせ、暗黒の支配を宣言することと同義である。

ダッシュボード＞外観＞ウィジェット＞①ヘッダー内部②スマホ開閉メニュー下 の2か所に「ブロック」を追加
どちらにも以下のコードを入力

<div class="theme-mode-switcher">
  <input type="checkbox" id="js_mode_toggle" style="display: none;">
  
  <label for="js_mode_toggle" class="mode-icon-label" aria-label="テーマ切り替え">
    
    <svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1a1c1e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="12" cy="12" r="5" />
      <line x1="12" y1="1" x2="12" y2="3" />
      <line x1="12" y1="21" x2="12" y2="23" />
      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
      <line x1="1" y1="12" x2="3" y2="12" />
      <line x1="21" y1="12" x2="23" y2="12" />
      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
    </svg>

    <svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
    </svg>
    
  </label>
</div>

黒が支配する、新しい宇宙の秩序

この術式を組み込んだ瞬間、あなたのサイトはもはや単なるブログではない。深夜のネットの海を漂う民たちが、その眼球を癒すために訪れる「網膜の避難所」となるだろう。

執筆中、何度も眩しさに目を焼かれ、意識が遠のく中で見たあの一筋の漆黒……。その結晶を、今ここに全人類へ捧げる。

あなたのブログに、深淵の祝福があらんことを。

参考にしたサイト

• https://fuko-relaxing.com/swell-dark-mode-customize/
• https://sokohako.com/6334
• https://fujilogic.blogspot.com/2021/04/light-dark-mode-switch.html