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