SWELLにダークモードを追加しようと挑戦したが諦めた

/* ダークモード用の変数上書き */
.my-custom-darkmode,
body:has(.my-custom-darkmode) {
  /* 背景色 */
  --color_bg: #353535;
  --color_header_bg: #353535;
  --color_footer_bg: #353535;
  /* 文字色 */
  --color_text: #ffffff;
  --color_header_text: #ffffff;
  --color_footer_text: #ffffff;
}
/* パンくず */
.my-custom-darkmode .-body-solid .p-breadcrumb.-bg-on {
  box-shadow: inset 0 -1px 8px rgba(255, 255, 255, .06);
}
.my-custom-darkmode .p-breadcrumb.-bg-on {
  background: #454545;
}
/* SPサイドメニュー */
.my-custom-darkmode .p-spMenu__inner::before {
  background: #454545;
}
.my-custom-darkmode .p-spMenu a {
  color: var(--color_text);
}
/* トグルスイッチ */
.my-custom-toggle {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 32px;
}
.my-custom-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}
.my-custom-toggle-input:checked + .my-custom-toggle-slider {
  background: var(--color_main, #86F096);
}
.my-custom-toggle-input:checked + .my-custom-toggle-slider:before {
  transform: translateX(26px);
}
.my-custom-toggle-input:focus-visible + .my-custom-toggle-slider {
  outline: 2px solid;
}
.my-custom-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 32px;
}
.my-custom-toggle-slider::before {
  border-radius: 50%;
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  transition: 0.3s;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}
.my-custom-df {
  display: flex;
}
.my-custom-aic {
  align-items: center;
}
.my-custom-gap4px {
  gap: 4px;
}
.my-custom-gap8px {
  gap: 8px;
}

<div class="my-custom-df my-custom-aic my-custom-gap8px">
<span>ダークモード</span>
<label class="my-custom-toggle">
<input class="my-custom-toggle-input js-darkmode-switch" type="checkbox" role="switch">
<span class="my-custom-toggle-slider"></span>
</label>
</div>

<script>
  const darkmodeClassName = 'my-custom-darkmode'; // ダークモード用クラス名
  const myCustomCookieName = 'my_custom_display_settings'; // ダークモード用クッキー名
  
  jQuery(function(){
    // ========================================
    // 初回実行
    // ========================================
    // ダークモード用クラスの有無でダークモードのスイッチのオンオフを切り替え
    // NOTE: PHP側でbodyにダークモード用クラスを付与している想定
    // NOTE: swell は body タグじゃなくて直下の div#body_wrap に付与されるっぽい？
    if (jQuery('#body_wrap').hasClass(darkmodeClassName)) {
      jQuery('.js-darkmode-switch').prop('checked', true);
    } else {
      jQuery('.js-darkmode-switch').prop('checked', false);
    }

    // ========================================
    // イベント登録
    // ========================================
    // ダークモードラジオボタンの選択時
    jQuery('.js-darkmode-switch').on('change', function(){
      let val = 0;
      if (jQuery('.js-darkmode-switch').prop('checked')){
        val = 1;
      }
      const darkmode_settings = {
        darkmode_flag: val
      };
      // セッションストレージの値更新
      setDarkmodeSettings(darkmode_settings);
      // ダークモード用クラスの付け替え
      if (val) {
        addDarkmodeClassName();
      } else {
        removeDarkmodeClassName();
      }
    });
  });

  // ========================================
  // 関数
  // ========================================
  // セッションストレージにダークモード設定データを保存
  function setDarkmodeSettings(obj){
    const jsonObj = JSON.stringify(obj);
    const days = 365; // 有効期限日数
    let date = new Date();
    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
    const expires = "; expires=" + date.toUTCString();
    // エンコードしてCookieを書き込み（パスをNovel配下のページで有効にする）
    document.cookie = myCustomCookieName + "=" + encodeURIComponent(jsonObj) + expires + "; path=/Novel";
  }
  // ダークモード用のクラスを付与
  function addDarkmodeClassName(){
    jQuery('#body_wrap').addClass(darkmodeClassName);
  }
  // ダークモード用のクラスを削除
  function removeDarkmodeClassName(){
    jQuery('#body_wrap').removeClass(darkmodeClassName);
  }

</script>