Dark Mode, the easy way.

The basics

I love dark mode. It is elegant, beautiful, and instantly elevates the user experience. Although, it is a lot of work to get right as a solo-developer without a CSS framework.

You have to get the color schemes right, add classes for dark mode elements, and sprinkle some javascript to make it all work. Here is a basic implementation of how to do it yourself.

I recently discovered the halfmoon CSS framework and instantly fell in love. It is all the good things that come with bootstrap, but with Dark Mode implementation and easy customization.

Between Tailwinds and halfmoon, I find myself much more at ease with halfmoon as a Django developer.

This is meant to be a review of my experience with it, building joyful.gifts - a relatively complex and a large project.

The good

• Dark mode naively supported. As easy as putting a button in.

<button class="btn btn-action mr-5" type="button" onclick="halfmoon.toggleDarkMode()" aria-label="Toggle dark mode">
<!--- bootstrap svg icons -->
  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-circle-half" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 15V1a7 7 0 1 1 0 14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" />
    </svg>
</button>

• Easy customization. Just override whatever variables you want to customize in a style tag. And you are done!

<style>
:root {
            /* Change primary color from blue to orange */

            --primary-color: #FF8C42;
            /* Before: var(--blue-color) */
            --primary-color-light: #FFA65C;
            /* Before: var(--blue-color-light) */
            --primary-color-very-light: #FFBF75;
            /* Before: var(--blue-color-very-light) */
            --primary-color-dark: #E67329;
            /* Before: var(--blue-color-dark) */
            --primary-color-very-dark: #E67329;
            /* Before: var(--blue-color-very-dark) */
        }
    </style>

• Delivery over CDN even with customization. No downloading packages, or bloat. Just one CSS file, and one JS file.

• Bootstrap like documentations and classes. Documentations and intuitive naming is a huge strength to any framework, and I love how halfmoon went about their documentation and naming.

What's missing!

• Some bootstrap features - I really missed the Carousel from bootstrap.

• Templates to plug and go (or buy and go).

But wait...there's more

Doing dashboards for SaaS or SaaS-like web application like joyful.gifts is time consuming and prone to errors. Well - halfmoon gives you a dashboard, ready for you to take and customize in the documentation - completely free.

Closing thoughts

I was not involved in the development of halfmoon or confident enough in my CSS abilities to contribute. The least I can do is to spread the word of this amazing piece of open-source software. It definitely doesn't get as much attention as it deserves!

If you liked this article and want to see more - Let me know. I would like to continue exploring the tech used in joyful.gifts and your words of encouragement or spreading the word about the project would go a long way.