<!doctype html>
<html>
<head>
<title></title>
<style>
body {
background: black no-repeat center;
height: 100vh;
margin: 0;
}
@media (max-width: 1200px) {
body.day {
background-image: url(https://placeimg.com/640/480/nature/grayscale);
}
body.night {
background-image: url(https://placeimg.com/640/480/nature);
}
}
@media not all and (max-width: 1200px) {
body.day {
background-image: url(https://placeimg.com/1280/960/nature/grayscale);
}
body.night {
background-image: url(https://placeimg.com/1280/960/nature);
}
}
button {
border-radius: .5em;
margin: 1em;
padding: 1em;
--color: #f06;
font: bold 1.5em sans-serif;
border: .25em solid var(--color);
color: var(--color);
background: white;
transition: 300ms;
}
button:hover, button:focus {
color: white;
box-shadow: inset 0 0 0 2em var(--color);
}
</style>
<script>
var count = 0;
function setBg() {
document.body.classList.toggle("day", count % 2 === 0);
document.body.classList.toggle("night", count % 2 === 1);
count++;
}
document.addEventListener("DOMContentLoaded", setBg);
</script>
</head>
<body>
<button onclick="setBg();">Переключить</button>
</body>
</html>