MENU
  1. ホーム
  2. ブログ運営
  3. WordPress
  4. WPテーマ
  5. SWELLをダークモードに対応させよう【WordPress】

SWELLをダークモードに対応させよう【WordPress】

WPテーマ

WordPress テーマ 「SWELL」をダークモード(ダークテーマ、ナイトモード)に対応させる方法を紹介します。導入にはプラグイン不要です。

この記事では、ファイル作成や編集に Filezilla などのSFTPクライアントを使って作業しています。

SAVA

ダークモードは目に優しかったり、省電力にもなると言われているよ。

このサイトのダークモードを試せるボタンです。押してみてね。

このサイトのダークモードに対応したSWELLブロックを以下の記事で確認できます。

あわせて読みたい
ダークモード確認用 SWELL ブロック
注意点
  • 完璧なダークモードではありません。サイトのカスタマイズに合わせて調整が必要です。
  • ブロックエディタで色を設定したブロックは基本的にそのままです。
導入の手順
  1. Javascript ファイルをコピペして作成、読み込む
  2. style.css にダークモード用のカラー設定を追記
SAVA

うわっ難しそうと思ったかな？見てる人の環境に自動的に合わせる簡単な方法もおまけで紹介するよ！

クリックできる目次

コードを作成

Javascriptを読み込むコード

ダークモードを実行させるスクリプトを読み込む設定をします。

  • WPダッシュボード
  • 外観
  • カスタマイズ
  • 高度な設定
  • bodyダグ終了直前に出力するコード

以下のコードをコピペして挿入

<script src="/wp-content/themes/swell_child/scripts.js"></script>

ダークモード用のJavascript

SWELL 子テーマディレクトリ swell_child にscripts.js を新しく作成

/* --------------------
ダークモード
-------------------- */
// OSの設定を判定
const osDark = window.matchMedia("(prefers-color-scheme: dark)");

// スイッチのinput要素（checkbox）
const modeSwitch = document.getElementById("mode-toggle");

// ダークモードがオンの時に実行する処理
function darkModeOn() {
  document.documentElement.classList.add("darkmode"); // ルート要素<html>にクラスを追加
  modeSwitch.checked = true;
}
// ダークモードがオフの時に実行する処理
function darkModeOff() {
  document.documentElement.classList.remove("darkmode"); // クラスの削除
  modeSwitch.checked = false;
}

// イベントリスナー
const listener = (event) => {
  if (event.matches) {
    darkModeOn();
  } else {
    darkModeOff();
  }
};
// リスナー登録
osDark.addEventListener("change", listener);
// 初期化処理
listener(osDark);

// スイッチの操作に応じて切り替え処理
modeSwitch.addEventListener("change", () => {
  if (modeSwitch.checked) {
    darkModeOn();
    style = "dark";
  } else {
    darkModeOff();
    style = "light";
  }
  localStorage.setItem("mode", style);
});

// ロード時の状況に応じて切り替え
if (localStorage.getItem("mode") === "dark") {
  darkModeOn();
} else if (localStorage.getItem("mode") === "light") {
  darkModeOff();
}

または、下記のように functions.php に追記して使うこともできますが、記述を間違えるとWordPressのエラーが発生しますので注意して下さい。

functions.php に記述する方法

add_action( 'wp_footer', function () { ?>
<script>

//上のコードをここにコピペ

</script>
<?php } );

設定をブラウザのローカルストレージに保存しているためサイトに再訪問したときにはモードは維持されています。

初訪問時はライトモードにしたい

読者がボタンを押すまでライトモードにしたい場合は

const osDark = window.matchMedia(“(prefers-color-scheme: dark)”); を

const osDark = window.matchMedia(“(prefers-color-scheme: unset)”); としてください。

ダークモードトグルボタン

ダークモードをボタンで切り替えられるようにします。

ライトモードの時
ライトモード時
ダークモードの時
ダークモード時

実際の挙動はこんな感じです。Result内のボタンを押してみて下さい。

See the Pen Darkmode_Btn by moz (@mokumoku) on CodePen.

ダークモードのオンオフボタンを好きな位置に設置しましょう。

  • WPダッシュボード
  • ウィジット
  • 共通サイドバー

ウィジットの「スマホ開閉メニュー下」、「共通サイドバー」、「記事上部」あたりが使いやすいかもしれません。

カスタムHTMLウィジットにコードをコピペして挿入する。

<div class="mode-wrap">
    <input type="checkbox" id="mode-toggle" tabindex="0">
    <label for="mode-toggle"><span></span></label>
</div>

ヘッダーの追従設定しているときに、ヘッダーウィジットにボタンを設置した場合はトグルが無効になります。(IDが重複してしまうため)

以下の記事を参考にするとヘッダーにダークモードボタンを置くことができます。

あわせて読みたい
SWELL 下にスクロールすると隠れるヘッダー [WordPress]

style.css に追記

SWELL子テーマディレクトリ swell_child のstyle.cssを編集

ダークモードトグル

/*--------------------------------------
ダークモードトグル
--------------------------------------*/
.mode-wrap #mode-toggle {
  display: none;
}

.mode-wrap #mode-toggle + label {
  font-size: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 2em;
  width: 4em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: calc(2em / 2);
  background-size: auto 8em;
  background-position: bottom;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#021037),
    color-stop(19%, #20206a),
    color-stop(66%, #4184b1),
    to(#62e7f7)
  );
  background-image: linear-gradient(
    180deg,
    #021037 0%,
    #20206a 19%,
    #4184b1 66%,
    #62e7f7 100%
  );
  -webkit-transition: 0.2s;
  transition: 0.2s;
  border: 0.125em solid #eef3f6;
  overflow: hidden;
  cursor: pointer;
}

.mode-wrap #mode-toggle + label span {
  background: #fffad8;
  border-radius: 50%;
  height: 2em;
  width: 2em;
  -webkit-transform: translateX(-0.125em) scale(0.65);
  transform: translateX(-0.125em) scale(0.65);
  -webkit-transition: 0.2s;
  transition: 0.2s;
  cursor: pointer;
  -webkit-box-shadow: 0 0 0.25em 0.0625em #fbee8d, 0 0 2em 0 #ffeb3b,
    inset -0.25em -0.25em 0 0 #fbee8e,
    inset -0.3125em -0.3125em 0 0.625em #fff5b2;
  box-shadow: 0 0 0.25em 0.0625em #fbee8d, 0 0 2em 0 #ffeb3b,
    inset -0.25em -0.25em 0 0 #fbee8e,
    inset -0.3125em -0.3125em 0 0.625em #fff5b2;
  margin-top: -0.125em;
}

.mode-wrap #mode-toggle:checked + label {
  background-position: top;
  border-color: #1a242f;
}

.mode-wrap #mode-toggle:checked + label span {
  background: transparent;
  -webkit-transform: translateX(calc(100% - 0.125em)) scale(0.65);
  transform: translateX(calc(100% - 0.125em)) scale(0.65);
  -webkit-box-shadow: inset -0.1875em -0.1875em 0 0 #fbe7ef,
    inset -0.5625em -0.5625em 0 0 #fffff7;
  box-shadow: inset -0.1875em -0.1875em 0 0 #fbe7ef,
    inset -0.5625em -0.5625em 0 0 #fffff7;
}

ダークモードスタイルシート

ダークモードを適用させる色の設定です。

下記の色を自由に指定して下さい。

CSS変数名色
–color_main テーマ色
–color_text記事のメイン文字色
–color_linkリンク色
–color_grayブロックの背景色
–color_htagh2、h3などの見出し色
–color_bg記事の背景色
–color_header_bgヘッダーの背景色
–color_header_textヘッダーの文字色
–color_footer_bgフッターの背景色
–color_footer_textヘッダーの文字色

カラーコードの参考はこちら

https://www.google.co.jp/search?q=color+picker
Google カラーコード 
/*--------------------------------------
ダークモード
--------------------------------------*/
.darkmode {
  --color_main: #07263c; /*テーマ色*/
  --color_text: #f7f7f7; /*メイン文字色*/
  --color_link: #2f95d8; /*リンク色*/
  --color_gray: #333; /*ブロック背景色*/
  --color_htag: var(--color_main); /*見出し色*/
  --color_bg: #1d1d1d; /*記事背景色*/
  --color_header_bg: var(--color_main); /*ヘッダー色*/
  --color_header_text: #ffffff; /*ヘッダー背景色*/
  --color_footer_bg: var(--color_main); /*フッター背景色*/
  --color_footer_text: #ffffff; /*フッター文字色*/
}

body {
  transition: background 0.3s ease-in;
}

/*--------------------------------------
色調整
--------------------------------------*/
/*パンくず*/
.darkmode #body_wrap #breadcrumb {
  background: var(--color_bg);
}

/*モーダル目次*/
.p-indexModal__inner {
  background: var(--color_bg);
  color: var(--color_text);
  opacity: 0.8;
}

/*吹き出し色*/
.darkmode .c-balloon__text {
  filter: brightness(0.7) saturate(150%) contrast(150%);
}

/*段落*/
.darkmode p[class*="is-style"] {
  filter: brightness(0.7) saturate(150%) contrast(150%);
}

.darkmode .is-style-crease {
  color: var(--swl-text_color--black);
}

/*グループ*/
.darkmode .is-style-desktop > .wp-block-group__inner-container,
.darkmode .is-style-browser_mac > .wp-block-group__inner-container {
  background: var(--color_bg);   color: var(--color_text);
}

/*画像とアイキャッチ*/
.darkmode .post_content .wp-block-image img,
.darkmode .c-postThumb__figure .c-postThumb__img,
.darkmode .p-articleThumb__img {
  filter: brightness(0.8) saturate(120%);
}

/*目次、トップ戻るボタン*/
.darkmode .c-fixBtn {
  background: var(--main-color);
  color: var(--color_text);
}

/*シェアボタン*/
.c-shareBtns__btn:not(:hover) .c-shareBtns__icon,
.-fix .c-shareBtns__btn:not(:hover) {
  filter: brightness(0.9);
}

/*スマホ開閉メニュー*/
.darkmode .p-spMenu__inner::before {
  background: var(--color_bg);
  opacity: 0.9;
}

.darkmode .p-spMenu__body {
  color: var(--color_text);
}

.darkmode .p-spMenu__closeBtn {
  color: var(--color_text);
}

.darkmode .p-spMenu__body::-webkit-scrollbar {
  background: rgba(255, 255, 255, 0.1);
  height: 24px;
  border-radius: 24px;
}

ポチップ

Amazonなどのボタンを設置できるポチップを使っている場合はこちらのコードを追記してください。

/*ポチップ*/
.darkmode .pochipp-box {
  background: var(--color_gray);
  color: var(--color_text);
}

サイトに合わせた調整が必要

今回紹介したダークモードは必要最低限の色を設定しただけなので、SWELLのカスタマイズによっては一部要素がダークモードになりません。

また、WordPressコアブロックやSWELLバージョンアップによるブロック追加があった場合は、そのブロックにダークモードが反映されない可能性があります。

その場合はChromeの「開発ツール」を使って該当箇所を調べ、style.css に追記する必要があります。

  • Windowsは Ctrl + Shift + i
  • Macは Option+ Cmd + i

どこまでダークモードに対応するかはブログ管理者次第なので、ダークモード沼にはまらないようご注意下さい。

SAVA

好みのダークモードを作るには地味〜な作業が必要だよ。

使いやすいWPテーマ「SWELL」

おまけ：ユーザーの環境に合わせて自動でダークモード

サイトにダークモード切り替えボタンをつけない簡単な方法も紹介します。Javascriptの設定などは不要です。

メディアクエリ @media (prefers-color-scheme: dark を指定することで、見ている人の設定がダークモードであれば自動的にダークモードが適用されます。

style.css に追記するだけ

SFTPクライアントを使ってSWELL子テーマの style.css を編集するか、WPダッシュボードから「外観 > テーマファイルエディター > style.css」に追記しましょう。

/*--------------------------------------
ダークモード
--------------------------------------*/
@media (prefers-color-scheme: dark) {
  :root {
    --color_main: #07263c; /*テーマ色*/
    --color_text: #f7f7f7; /*メイン文字色*/
    --color_link: #2f95d8; /*リンク色*/
    --color_gray: #333; /*ブロック背景色*/
    --color_htag: var(--color_main); /*見出し色*/
    --color_bg: #1d1d1d; /*記事背景色*/
    --color_header_bg: var(--color_main); /*ヘッダー背景色*/
    --color_header_text: #ffffff; /*ヘッダー文字色*/
    --color_footer_bg: var(--color_main); /*フッター背景色*/
    --color_footer_text: #ffffff; /*フッター文字色*/
  }

  /*パンくず*/
  #body_wrap #breadcrumb {
    background: var(--color_bg);
  }

  /*モーダル目次*/
  .p-indexModal__inner {
    background: var(--color_bg);
    color: var(--color_text);
    opacity: 0.8;
  }

  /*吹き出し色*/
  .c-balloon__text {
    filter: brightness(0.7) saturate(150%) contrast(150%);
  }

  /*段落*/
  p[class*="is-style"] {
    filter: brightness(0.7) saturate(150%) contrast(150%);
  }

  .is-style-crease {
    color: var(--swl-text_color--black);
  }

  /*グループ*/
  .is-style-desktop > .wp-block-group__inner-container,
  .is-style-browser_mac > .wp-block-group__inner-container {
    background: var(--color_bg);
    color: var(--color_text);
  }

  /*画像とアイキャッチ*/
  .post_content .wp-block-image img,
  .c-postThumb__figure .c-postThumb__img,
  .p-articleThumb__img {
    filter: brightness(0.8) saturate(120%);
  }

  /*目次、トップ戻るボタン*/
  .c-fixBtn {
    background: var(--main-color);
    color: var(--color_text);
  }

  /*シェアボタン*/
  .c-shareBtns__btn:not(:hover) .c-shareBtns__icon,
  .-fix .c-shareBtns__btn:not(:hover) {
    filter: brightness(0.9);
  }

  /*スマホ開閉メニュー*/
  .p-spMenu__inner::before {
    background: var(--color_bg);
    opacity: 0.9;
  }

  .p-spMenu__body {
    color: var(--color_text);
  }

  .p-spMenu__closeBtn {
    color: var(--color_text);
  }

  .p-spMenu__body::-webkit-scrollbar {
    background: rgba(255, 255, 255, 0.1);
    height: 24px;
    border-radius: 24px;
  }
}
SAVA

:root {–color_XXX: #XXX} 変更することで好きな色にできるよ。

参考サイト

  • Night Mode Toggle [https://dribbble.com/shots/4581326-Night-Mode-Toggle]
  • A Complete Guide to Dark Mode on the Web [https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/]
  • ダークモード入門 [https://zenn.dev/chabatake_i/articles/darkmode_introductions]
WPテーマ
SWELL WPカスタマイズ ダークモード
よかったらシェアしてね！
  • URLをコピーしました！

この記事を書いた人

SAVAのアバター SAVA

サーバーの魅力に取りつかれ、誰にでも分かりやすいサーバー紹介サイトを目指して日夜勉強中。ブログを作りたい人を応援します。

関連記事

コメント

コメントする

クリックできる目次