Building User Enabled Dark Mode
Tags:
Using CSS and a bit of Javascript magic
At some point I decided I wanted a different look for my site without going through the process of building out a whole new theme for it. With that in mind, I wanted to accomplish two things:
Goal one: KISS (Keep It Simple Stupid):
You probably heard this before either online or from other devs. It's self explanatory. I kept this in mind when I wrote down exactly how I wanted this feature implemented.
Goal two: Make it User-Friendly:
This was important as I wanted to keep the user in mind. When you visit my site, you don't have to feel forced to view it in one theme. I kept in mind the fact that there are some dark mode haters out here lurking on the web, as well as people who may want to read it in a normal light mode for whatever reason they choose. You have a choice. No need to feel locked in.
That being said, the easiest way to make this work was to make a button and write some script with functions that would trigger a shift when the user clicks on the button.
As you see the function darkToggle has two functions that will be called when the button is clicked. Mode() will trigger as soon as the user clicks the button for dark/light mode while Toggle() will save the user's choice in localStorage and when the page is reloaded the script will fetch the selected mode, applying it in your browser.
Styling was pretty easy as it required adding additional selectors in CSS whose elements are targeted by the script written, defining what that should look like when the user clicks on the button.
I mostly stayed within the rules of Brutalist design, which calls for links to be made obvious through the use of easy-to-read fonts, no pretty pictures, just words.
And that's it. My repo shows more details about implementation. Recently I switched over to compiling in SASS so that my site builds it out as CSS but the concept is pretty much the same and easy to read. Hit up the Github link to take a look.