В общем, код я исправил:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>
.block {
width: 100px;
height: 100px;
border: 1px solid black;
background: white;
color: #292929;
}
</style>
<script>
function darktheme() {
$('.block').css({'background': 'white',
'color': '#292929'});
}
function lighttheme() {
$('.block').css({'background': '#292929',
'color': 'white'});
}
</script>
</head>
<body>
<div class="block">текст</div>
<div class="block">текст</div>
<div class="block">текст</div>
<input type="button" onclick="darktheme()">
<input type="button" onclick="lighttheme()">
</body>
</html>
Но проблема осталась с localStorage. Несколько раз перечитав статью на learn.javascript.ru всё равно не придумал способ обернуть функцию. Вернее придумал, но там функция относится к 1 единому div'y с уникальным id:
if (localStorage.color) {
document.getElementById('block').style.backgroundColor = localStorage.color
}
function darktheme() {
var m = document.getElementById('block');
m.style.background = "#292929";
if (localStorage.color == undefined) {
localStorage.setItem('color', '#292929')
} else {
localStorage.color = "#292929"
}
}
function lighttheme() {
var m = document.getElementById('block');
m.style.background = "white";
if (localStorage.color == undefined) {
localStorage.setItem('color', 'white')
} else {
localStorage.color = "white"
}
}
А в моём новом варианте несколько div с одним и тем же класом. Как быть с этим?