W3Things Now Has Dark Mode




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.

The theme switcher is located on the site header at the top.
The theme switcher is located on the site header at the top.
View Original Image Size

Your theme choice will be remembered and will automatically be applied when you revisit the site.

W3Things Now Has Dark Mode

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.


    Danial Zahid's headshot.

    About Danial Zahid

    I'm a self-taught web developer passionate about everything related to websites and web development. Over the past years, I've explored and worked with different web technologies and tools, notably WordPress, Eleventy, npm, and Gulp.js, to name a few.

    In addition, I've created and currently maintain several open-source projects, including web apps, widgets, websites, and more.

    When I'm not writing content for W3Things or doing web development work, I enjoy my free time by playing games or listening to podcasts.

    Get Essential Gulp Kit

    The ultimate Gulp.js solution to improve your developer experience.

    • Includes complete Gulp.js toolkit setup
    • Optimize website content and static assets
    • Continuous asset optimization during development phase
    • Optimize unlimited number of files in bulk
    • Plus many more awesome features

    Subscribe to the Newsletter

    This website uses cookies to optimize your site experience. By continuing to use the site, you are agreeing to its privacy policy and the use of cookies.