Sunsets and hamburgers
Posted on 14th February 2020
It's been over a month since I started this blog, and at first due to how scared and confused I was with Gatsby/React when it came to making decisions about styling I tried to stick with what I know best - scss files, class names on elements and modular styles for different components.
The site was already using the
prefers-color-scheme media query, and for the most part this has been fine, but when I wanted to create a day/night toggle to allow people to switch colour schemes I found myself being pushed toward using the styled components package.
I had a look around to see different ways of achieving a toggle, and settled on this excellent tutorial by Maks Akymenko due to the amount of depth it went into about how to set up themes, theme providers and also reminding me about the potential for using localstorage to remember peoples preference.
If you didn't notice when you loaded the site, there is now a 🌞/🌛 button that lets you manually toggle between themes, assuming you're not happy with the one your system/browser tells the site to use.
Using styled components has shown me that it might be possible to move away from using scss modules with my components, over the next few weeks I'll be chipping away at making more use of it for sure. I was reticent about keeping markup, styles and logic in the same place, but the more I use React the more I'm coming around to it being very useful.
While I was messing around with the header of the site, I figured the sprawling mass of links when viewing the site on a mobile device needed to be wrangled, so I've got a "hamburger" menu button that toggles the visibility of the menu items.
There's lots of different SVG icons out there for a menu button, but I just opted for the classic burger emoji, it doesn't get any more literal than that!
Hopefully these quality of life updates haven't ruined your experience, but if there's anything amiss feel free to let me know.
Enjoyed this post? Feel free to share it with your audience using the links below:
Don't see your favourite social network on the list? Feel free to let me know and I'll get it added.