<style>
h1 {color: blue}
.night {background: black}
.night h1 {color: grey}
</style>
<body class="default"> <!--toggle tussen default en night -->
<div class="toggle-box">
<input type="checkbox" name="checkbox1" id="toggle-box-checkbox" />
</div>
<h1>Dit is een tekst</h1>
<script src="jquery-3.3.1.min.js"></script>
<script>
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 3600 * 1000)); // totaal is vervaltijd in msec
document.cookie = cname + "=" + cvalue + ";expires=" + d.toUTCString() + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1);
if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
}
return "";
}
$(document).ready(function() {
// themeCheckBox is de checkbox.
var themeCheckBox = $('#toggle-box-checkbox');
// themeCookie is de waarde van cookie 'usertheme' (kan leeg zijn)
var themeCookie = getCookie('usertheme');
// controleer of themeCookie een lege waarde heeft
if (themeCookie == '') {
// waarde is leeg: geef themeCookie dan een waarde 'default'
themeCookie = 'default';
} else {
// waarde is niet leeg (wel of geen night): dan de checkbox aan- of uitvinken
themeCheckBox.prop('checked', (themeCookie === 'night'));
}
// hier is de class bekend. verwijder oude classes en geef body de goede class
$('body').removeClass('default night').addClass(themeCookie);
// als op checkbox wordt geklikt: start een naamloze functie
themeCheckBox.on('click', function() {
// de themeName is night of default, afhankelijk van de checkbox
var themeName = ($(this).prop("checked")) ? 'night' : 'default';
// verwijder oude classes en geef body de goede class
$('body').removeClass('default night').addClass(themeName);
// zet de gekozen themeName in een cookie met vervaltijd 30 dagen
setCookie('usertheme', themeName, 30);
});
});
</script>
