<< rants

How I do the dark side 🌃

days ago

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...

Download from Github.