WildYT,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.footer {
height: 100px;
background-color: hsla(60, 100%, 50%, 1);
}
.light .footer {
background-color: hsla(36, 100%, 90%, 1);
}
.dark .footer {
background-color: hsla(210, 100%, 56%, 1);
}
</style>
<script>
var current = "";
function toggleScheme()
{
var date = new Date();
var hours = date.getHours();
if(hours <= 12 && current != "light") {
current && document.body.classList.remove(current)
document.body.classList.add(current = "light");
}
else if(hours > 12 && current != "dark"){
current && document.body.classList.remove(current)
document.body.classList.add(current = "dark");
}
window.setTimeout(toggleScheme, 1000);
}
document.addEventListener( "DOMContentLoaded", toggleScheme)
</script>
</head>
<body>
<div class="footer"></div>
</body>
</html>