Introducing night mode on bayton.org

Originally published at: https://bayton.org/2017/02/introducing-night-mode-on-bayton-org/

I spend a lot of time on here, particularly at night when I’m finished with my duties for the day and fancy putting some words down on virtual paper. I’ve noticed, however, the glare of the bright, minimal theme can be quite bothersome on the eyes after a while. Always eager to improve the site, I set about looking for a solution. I didn’t want to make any permanent changes to the current theme that would detract from what it is; the current white-on-grey design is really nice and it’d be a shame to tone it down for the sake of a few hours a night. With that in mind, I decided to implement a more elegant solution; changing the theme colours based on time of day while allowing a manual override stored in browser local storage (meaning the option chosen remains saved until site data is cleared from the browser). The end result looks like this: It’s been live for about a month, but I’ve been tweaking it too frequently to officially announce it. There’s still a few areas of improvement (buttons, etc) but it’s good enough for now. The implementation is a mix of CSS, CSS transitions and jquery. Ideally, I’d have preferred to implement this in PHP to be served prior to the page loading, but since PHP only knows the server’s local time and not that of the guest browsing the site it isn’t as easy to implement (though I’ll take advice in the comments!). This…