Dark Mode, the easy way.
Tags: webdev, css, codenewbie, django
Published: 2020-11-30 15:59:54

##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] (https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp) is a basic implementation of how to do it yourself.

I recently discovered the [halfmoon] (https://www.gethalfmoon.com/) 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.  

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i7z4h4hpg0w80tjlyh6g.jpg)

This is meant to be a review of my experience with it, building [joyful.gifts](https://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](https://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](https://twitter.com/Jonathan_Adly_). I would like to continue exploring the tech used in [joyful.gifts](https://joyful.gifts) and your words of encouragement or spreading the word about the project would go a long way.