Как лучше сделать темную/светлую тему для сайта?
Так можно изменить ссылку на стиль
<!DOCTYPE html>
<html>
<head>
	<title></title>

	<link rel="stylesheet" type="text/css" href="light.css" class="style">
</head>
<body>

<button id="color">Сменить цвет</button>

<script type="text/javascript">
	if (localStorage.getItem('style') == 'dark') {
		document.querySelector('.style').href="dark.css";
	}
	document.querySelector('#color').onclick = function (){
		if (document.querySelector('.style').getAttribute('href') === 'light.css') {
			document.querySelector('.style').href="dark.css";
			localStorage.setItem('style', 'dark');
		} else {
			document.querySelector('.style').href="light.css";
			localStorage.setItem('style', 'light');
		}
	}
</script>

</body>
</html>

Но лучше использовать селекторы чтобы менять стиль. И использовать один css файл

<style type="text/css">
	body {
		background: #fff;
		color: #000;
	}
	#color {
		color: #fff;
		background: #000;
	}
	.dark {
		background: #000;
		color: #fff;
	}
	.dark #color {
	color: #000;
	background: #fff;
	}

</style>



<button id="color">Сменить цвет</button>
<script type="text/javascript">
	if (localStorage.getItem('style') == 'dark') {
		document.body.classList.toggle('dark');
	}
	document.querySelector('#color').onclick = function (){
		document.body.classList.toggle('dark');
		if (document.body.getAttribute('class') == 'dark') {
			localStorage.setItem('style', 'dark');
		} else {
			localStorage.setItem('style', '');
		}
	}
</script>
Лучше сделать цвета переменными, а потом просто меня цвета переменных, если используете препроцессор, посмотрите примеры в интернете