WordPressでダークモードを簡単に実装するコード（プラグインなし）

body.dark-mode {
  background-color: #333;
  color: #f1f1f1;
}

<button id="dark-mode-toggle">ダークモード</button>

document.getElementById('dark-mode-toggle').addEventListener('click', function() {
  document.body.classList.toggle('dark-mode');
});

/* body 要素に適用するダークモードの背景色と文字色 */
body.night-mode {
  background-color: #1a1a1a;
  color: #f1f1f1;
}

/* ダークモード時のリンクテキスト色 */
.night-mode a {
  color: #51b7f0;
}

/* ヘッダーおよびフッターのダークモード背景色 */
.night-mode .your-header-class,
.night-mode .your-footer-class {
  background-color: #303030;
}

/* 画像のダークモード用フィルター */
.night-mode img {
  filter: brightness(0.8) contrast(0.9);
}

/* pre タグおよび code タグのダークモード背景色と文字色 */
.night-mode pre,
.night-mode code {
  background-color: #2f2f2f;
  color: #f1f1f1;
}

/* 引用ブロックのダークモード用ボーダー色、背景色、および文字色 */
.night-mode blockquote {
  border-color: #515151;
  background-color: #2f2f2f;
  color: #f1f1f1;
}

/* テーブルのダークモード背景色 */
.night-mode table {
  background-color: #303030;
}

/* テーブルの th および td 要素のダークモード用ボーダー色と文字色 */
.night-mode table th,
.night-mode table td {
  border-color: #515151;
  color: #f1f1f1;
}

/* テーブルの偶数行のダークモード背景色 */
.night-mode table tr:nth-child(even) {
  background-color: #3a3a3a;
}

/* 入力フィールドのダークモード用背景色、文字色、およびボーダー色 */
.night-mode input[type="text"],
.night-mode input[type="email"],
.night-mode input[type="password"],
.night-mode textarea {
  background-color: #303030;
  color: #f1f1f1;
  border-color: #515151;
}

/* ボタンおよび送信ボタンのダークモード用背景色と文字色 */
.night-mode button,
.night-mode input[type="submit"] {
  background-color: #51b7f0;
  color: #f1f1f1;
}
/* リスト要素 (ul, ol) のダークモード文字色 */
.night-mode ul,
.night-mode ol {
  color: #f1f1f1;
}

/* リスト要素内のリンクテキストのダークモード色 */
.night-mode ul a,
.night-mode ol a {
  color: #51b7f0;
}

/* フォーム要素のラベルのダークモード文字色 */
.night-mode label {
  color: #f1f1f1;
}

/* フォーム要素のプレースホルダーのダークモード文字色 */
.night-mode input::placeholder,
.night-mode textarea::placeholder {
  color: #b3b3b3;
}

/* セレクトボックスのダークモード背景色、文字色、およびボーダー色 */
.night-mode select {
  background-color: #303030;
  color: #f1f1f1;
  border-color: #515151;
}

/* ページネーションのダークモード背景色、文字色、およびボーダー色 */
.night-mode .pagination {
  background-color: #303030;
  color: #f1f1f1;
  border-color: #515151;
}

function toggleNightMode() {
  var nightModeIcon = document.getElementById('night-mode-icon');
  document.body.classList.toggle('night-mode');
  
  if (document.body.classList.contains('night-mode')) {
    nightModeIcon.classList.remove('fa-moon');
    nightModeIcon.classList.add('fa-sun');
    localStorage.setItem('nightMode', 'enabled');
  } else {
    nightModeIcon.classList.remove('fa-sun');
    nightModeIcon.classList.add('fa-moon');
    localStorage.setItem('nightMode', 'disabled');
  }
}

document.addEventListener('DOMContentLoaded', function() {
  var nightModeToggle = document.querySelector('.night-mode-toggle > a');
  if (nightModeToggle) {
    nightModeToggle.addEventListener('click', function(e) {
      e.preventDefault();
      toggleNightMode();
    });

    var nightModeSetting = localStorage.getItem('nightMode');
    if (nightModeSetting === 'enabled') {
      toggleNightMode();
    }
  }
});

<!-- Font Awesome 5 を読み込む -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha384-KyZXEAg3QhqLMpG8r+Knujsl5/RO2GwzN2Q5nU/5j5m5z5pEsnfTL5JjJ1z5f45j" crossorigin="anonymous">

<!-- ダークモード切り替えボタン -->
<div class="night-mode-toggle">
  <a href="#" title="ダークモードを切り替える">
    <i id="night-mode-icon" class="fas fa-moon"></i>
  </a>
</div>