What Is the Easiest Way to Add Dark Mode to a Website?

As of now, the vast majority of operating systems and browsers support some sort of dark mode. Gone are the days where various accessibilty modes are touted as a true alternative to the paper white interfaces etched onto our retinas.

What does it take to support a dark mode to a Jekyll website?

The first step is to choose your color pallate. I used this guide as a base to update my current website colors and choose the alternate dark mode colors.

The second step is to create css variables on a pseudo-class to toggle between the two color palletes. We use the css media query “prefers-color-scheme” to have the browser choose the appropriate color pallete.

        :root {
            --main-bg-color: #f7f7f7;
            --secondary-bg-color: rgb(245, 245, 245);
            --tertiary-bg-color: #f0f0f0;
            --main-text-color: #000000FF;
            --secondary-text-color: #3C3C4399;
            --tertiary-text-color: #3C3C434D;
            --separator-color: #3C3C434A;
            --shadow-colors: 0, 0, 0;
        }

        @media (prefers-color-scheme: dark) {
        :root {
            --main-bg-color: #000000FF;
            --secondary-bg-color: #1C1C1EFF;
            --tertiary-bg-color: #2C2C2EFF;
            --main-text-color: #DDD;
            --secondary-text-color: #EBEBF599;
            --tertiary-text-color: #EBEBF54D;
            --separator-color: #54545899;
            --shadow-colors: 83, 83, 83;
            }
        }
        

After this we have to migrate the existing element styling to use these css variables.

At this point, theoretically, the corresponding colors would be loaded by the browser if the user is using dark mode.