Так можно изменить ссылку на стиль
<!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>