Tutorial by Kyle van Deusen https://generatetweaks.ogal.dev/light-dark-mode-switcher/

Dark mode Switcher JS.js

<script>
	function colorModeSwitcher() {
  var element = document.getElementById("main");
  element.classList.toggle("dark-mode");
}</script>

dark-mode-css.css

/*  For light looking Sites - add a dark mode switcher  */

.mode-switch-button{
	width: 24px;
	height: 24px;
	cursor: pointer;
}

g#moon{
	opacity: 1;
	transition: .5s opacity ease-in;
}

g#sun{
	opacity: 0;
	transition: .5s opacity ease-in;
}

.dark-mode g#moon{
	opacity: 0;
}

.dark-mode g#sun{
	opacity: 1;
}

.dark-mode{
	background-color: var(--background-dark);
	color: #ffffff;
}

.dark-mode h2, .dark-mode h3, .dark-mode h4{
	color: #ffffff;
}

.dark-mode a{
	color: #0c0c0c;
	text-decoration-color: #fec200;
	background-color: #fec20020;
	padding: 0em .2em;
	border-radius: 3px;
	transition: .2s all ease-in;
}

.dark-mode a:hover{
	background-color: #fec200;
}

#main{
	transition: .2s all ease-in;
}

switcher svg.svg

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="mode-switch-button" viewBox="0 0 20 20" onclick="colorModeSwitcher()">
  <g id="switcher-icon" transform="translate(-384 -141)">
    <g id="sun" transform="translate(14)">
      <path id="brightness-high-fill" d="M15,10a5,5,0,1,1-5-5A5,5,0,0,1,15,10ZM10,0a.625.625,0,0,1,.625.625v2.5a.625.625,0,0,1-1.25,0V.625A.625.625,0,0,1,10,0Zm0,16.25a.625.625,0,0,1,.625.625v2.5a.625.625,0,0,1-1.25,0v-2.5A.625.625,0,0,1,10,16.25ZM20,10a.625.625,0,0,1-.625.625h-2.5a.625.625,0,0,1,0-1.25h2.5A.625.625,0,0,1,20,10ZM3.75,10a.625.625,0,0,1-.625.625H.625a.625.625,0,0,1,0-1.25h2.5A.625.625,0,0,1,3.75,10ZM17.071,2.929a.625.625,0,0,1,0,.884L15.3,5.581A.625.625,0,0,1,14.42,4.7l1.767-1.768a.625.625,0,0,1,.884,0ZM5.58,14.42a.625.625,0,0,1,0,.884L3.813,17.071a.625.625,0,1,1-.884-.884L4.7,14.42A.625.625,0,0,1,5.58,14.42Zm11.491,2.651a.625.625,0,0,1-.884,0L14.42,15.3a.625.625,0,1,1,.884-.884l1.767,1.768a.625.625,0,0,1,0,.884ZM5.58,5.581a.625.625,0,0,1-.884,0L2.929,3.813a.625.625,0,1,1,.884-.884L5.58,4.7a.625.625,0,0,1,0,.885Z" transform="translate(370 141)" fill="#f6f7f8"></path>
    </g>
    <g id="moon" transform="translate(-11.084 2.917)">
      <g id="moon-stars-fill" transform="translate(398 141)">
        <path id="Path_17" data-name="Path 17" d="M5.384.246a.673.673,0,0,1,.072.76A6.317,6.317,0,0,0,4.668,4.07a6.506,6.506,0,0,0,6.567,6.444,6.684,6.684,0,0,0,1.376-.142.711.711,0,0,1,.727.28.642.642,0,0,1-.028.791,7.531,7.531,0,0,1-5.822,2.726A7.416,7.416,0,0,1,0,6.827,7.343,7.343,0,0,1,4.6.053a.681.681,0,0,1,.786.193Z" transform="translate(0 -0.001)" fill="#181818"></path>
        <path id="Path_18" data-name="Path 18" d="M9.979,2.23a.154.154,0,0,1,.292,0l.274.823a1.23,1.23,0,0,0,.777.777l.823.274a.154.154,0,0,1,0,.292l-.823.274a1.228,1.228,0,0,0-.777.777l-.274.823a.154.154,0,0,1-.292,0L9.7,5.448a1.228,1.228,0,0,0-.777-.777L8.1,4.4a.154.154,0,0,1,0-.292l.823-.274A1.228,1.228,0,0,0,9.7,3.053l.274-.823ZM12.153.071a.1.1,0,0,1,.194,0l.183.548a.818.818,0,0,0,.519.519l.548.183a.1.1,0,0,1,0,.194l-.548.183a.819.819,0,0,0-.519.519l-.183.548a.1.1,0,0,1-.194,0l-.183-.548a.819.819,0,0,0-.519-.519L10.9,1.514a.1.1,0,0,1,0-.194l.548-.183A.818.818,0,0,0,11.97.619l.183-.548Z" transform="translate(0.501 -0.001)" fill="#181818"></path>
      </g>
    </g>
  </g>
</svg>