<span id="mode-toggle">モード切替</span>
<div id="wrap">
  <h1>Sample Text</h1>
</div>
#mode-toggle {
  cursor: pointer;
  color: #000;
}
#wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  color: var(--text-color);
  background-color: var(--bg-color);
  transition: color .5s, background-color .5s;
}

:root {
  --mode:light;
  --bg-color: var(--light-bg-color);
  --text-color: var(--light-text-color);

  // Light Mode
  --light-bg-color: #fff;
  --light-text-color: #000;

  // Dark Mode
  --dark-bg-color: #000;
  --dark-text-color: #fff;
}
View Compiled 
const modeToggle = () => {
  $('#mode-toggle').on('click', function() {
    const html = document.querySelector('html');
    const currentMode = getComputedStyle(html).getPropertyValue("--mode");

    let mode = null, bgColor = null, textColor = null;

    switch (currentMode) {
      case 'light':
        mode             = 'dark';
        bgColor          = getComputedStyle(html).getPropertyValue("--dark-bg-color");
        textColor        = getComputedStyle(html).getPropertyValue("--dark-text-color");
        break;
      case 'dark':
        mode             = 'light';
        bgColor          = getComputedStyle(html).getPropertyValue("--light-bg-color");
        textColor        = getComputedStyle(html).getPropertyValue("--light-text-color");
        break;
      default:
        break;
    }

    html.style.setProperty('--mode', mode);
    html.style.setProperty('--bg-color', bgColor);
    html.style.setProperty('--text-color', textColor);
  });
}

$(function() {
  modeToggle();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js