A typical random reddit article pops once in a while, and gives you a chance to improve an existing design. This time, it was a dude claiming to create the most simplest dark theme changer, complete with localStorage and everything. And after a read I came to my own conclussions.
1. If you need the user to manually set the entire OS to dark theme, then you already lost.
2. If you place a manual theme changer on your page, you already disqualified your OS dark theme implementation.
Anyway, since my index site sports a real time emoji moon phaser on it, lets make the emoji be the dark theme changer:
document.querySelector('.moonEmoji').addEventListener('mouseenter', function (e) { //mouse over button
document.querySelector('.moonEmoji').style.cursor = 'pointer';
});
if (localStorage.getItem('darkTheme')) { //everything ok, change the emoji
setDarkEmoji();
} else {
setLightEmoji();
}
}
}
And since we need the behaviour to propagate for the entire site, the only way to store the state without a database is using something like localStorage to store it. Well played Luke Lowrey!.
Now you may be wondering: Why didn't you implemented the css specific dark theme listener? Well, it's pretty much because I developed the entire theme changer and I'd like people to use it, plain and simple. But it's true it's most convenient to get dark by default.
Oh well maybe later...