Adding a Theme Switcher

I’ve written a few lines of JavaScript in order to allow people who like light themes (for some reason) to view this site in their preferred (caustic, blinding) way. There’s a button right at the top of the page, press it and you’ll see a much lighter version of my humble blog. While far from the most complex code I’ve written, I’m not a developer of any sort so I’m gonna shout about it if I manage to pull a function together without burning my house down.

Average JavaScript writing experience

There’s basically just two functions behind this:

function makeLight() {
    document.body.style.backgroundColor = '#fbf1c7';
    document.body.style.color = '#282828';
    localStorage.afTheme = 'light';
}

function makeDark() {
    document.body.style.backgroundColor = '#282828';
    document.body.style.color = '#ebdbb2';
    localStorage.afTheme = 'dark';
}

Plus the controlling function, making the button work, and an if statement to make it light if that’s what you wanted last time:

if (localStorage.afTheme === 'light') {
    makeLight();
}

function changeTheme() {
    if (localStorage.afTheme === 'light') {
        makeDark();
    } else {
        makeLight();
    }
}

const themeButton = document.querySelector('#themeButton');
themeButton.addEventListener("click", changeTheme);

It’s keeping your preference in your browser’s local storage, so it should persist. This isn’t a cookie, just a little key:value pair that says ‘afTheme’:‘light’ or ‘afTheme’:‘dark’. This is about as simple as I could get it, if anyone knows of a better (CSS only?) way to do this, please do feel free to drop me an email at antonyf@mailbox.org and let me know about it.

I’m not intending to add a huge amount of scripting to this site, mind. My intention is that it will be fully usable without JS at all. At the moment, the only other thing I have planned is a thingy for the blog index page to let you filter posts by subject. I’m not in a rush because there simply aren’t that many blog posts to search through right now.

Also, just because I felt like it I modified the CSS slightly so now the font should be monospace. I like that aesthetic, I feel it really works with the sort of minimalist/retro vibe I’m going for. Hopefully others like it, too. What I found when testing the site was that my browser had the old CSS cached, so I had to delete the cache in order to see the change as well as the styling for the theme switcher button. If the button looks default and the font ain’t monospace as you’re reading this, that’ll likely be why.

Alright, that’s all I’ve got for today. Thanks for reading.

Toodles,

–Antony F.