ダークモード対応

プラグインなしでダークモードに対応します。
設置作業は下記の通りです。
参考サイト　SWELLをダークモードに対応させよう【WordPress】

Javascript ファイルを作成しアップロードします
ダークモードトグルボタンの設置します
style.css にCSSを追記します

１．Javascript ファイルの作成とアップロード

１．スクリプトを読み込む設定
下記のコードを、次の手順でbodyダグ終了直前に貼り付けます。
WPダッシュボード＞外観カスタマイズ＞高度な設定＞ bodyダグ終了直前に出力するコード

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

２．ダークモード用のJavascript「scripts.js」を作成し、下記の場所にアップロードします。
　　「scripts.js」のアップロード先　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();
}

２．ダークモードトグルボタンの設置

ウィジットの「共通サイドバー」、「記事上部」にカスタムHTMLウィジットにコードをコピペして挿入します。

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

３．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;
}

「ダークモードの色設定」
.darkmodeの部分はサイトに合わせてオリジナルのコードを修正しています。

/* ダークモード色指定 */
.darkmode {
--color_main: #07263c; /*テーマ色*/
--color_text: #f9f9f9; /*メイン文字色*/
--color_link: #2f95d8; /*リンク色*/
--color_gray: #333; /*ブロック背景色*/
--color_htag: var(--color_main); /*見出し色*/
--color_bg: #2d2d2d; /*記事背景色*/
--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;
}

カスタム投稿

メールフォーム

ダークモード対応

１．Javascript ファイルの作成とアップロード

２．ダークモードトグルボタンの設置

３．style.css に追記

関連記事