Update - Dec 24, 2023
I've published the tutorial article on how you can add dark mode to your website here.
For those of you who prefer to read or browse in dark mode, W3Things now has support for dark mode.
You can switch between the light or dark theme using the theme toggle located on the site header at the top.
Your theme choice will be remembered and will automatically be applied when you revisit the site.
Deciding the Dark Theme Color Palette
I believe that dark mode doesn't mean having a complete high contrast black color palette.
The dark theme should be easy on the eyes, not hard. For instance, Discord, GitHub, and MDN have the right amount of dark color contrast.
When you use those apps and sites, the overall dark color is comfortable for the viewing experience.
Considering that, I decided to use various shades of the black color that weren't too high contrast or visually striking.
A Minor Caveat
Up until I started converting the site from WordPress CMS to Eleventy SSG, I had no plans for adding dark mode to the site, hence some elements of the site were designed based on the light color mode with no consideration of adding dark theme support in the future.
Because of that, you might notice a few elements like colorful images or text not standing out or fitting properly with the site's dark theme.
The most notable example of this is the Essential Gulp Kit logo used on the call-to-action card right above the footer or on its landing page.
In future, I may update those elements to be either theme-independent or create separate versions for each theme.
Other than that, after thoroughly inspecting, I believe that the entire site seems to be adapting nicely with the dark mode.
Suggestions or Bug Reports
There might be some site UI elements that may need further tweaking, so please let me know if you have any suggestions or bug reports regarding the dark mode or site in general.
Feel free to mention me on X (formerly Twitter) or get in touch via any other social platform of your choice (find my social links on the bio card or site social links on the site footer).
And as always, you can also contact me via email at [email protected].
Wrapping Up
In one of the upcoming articles, I'll write a tutorial on how you can add dark mode to your website or app using just a few lines of code.
Until then, stay subscribed to the W3Things newsletter to receive email notifications for new web development tutorials and content.
