Implementing Dark Mode to Your Jekyll Site without learning CSS

Tags: jekyll

Lots of website have added dark themes to their platform. Twitter also has a dark mode which I really love while reading at night. Also there are benefits of using dark mode for the eyes.

There are lots of tutorials that require adding separte CSS for light and dark theme. However I wanted to leverage a simple javascript solution to implement dark mode.

Dependencies

First we need to import necessary files to our html file.

Create button for light and dark mode

We can use FontAwesome to add moon icon for light mode and sun icon for dark mode.

Toggle between light and dark mode

On clicking the button, we need to call the function darkmode.

The localStorage object allows you to save key/value pairs in the browser. This is useful to save the state of your application between page loads.

Lastly we need to call setFetchMethod to check if the browser is using darkmode before enabling or disabling it.

On This Page

Implementing Dark Mode to Your Jekyll Site without learning CSS

Dependencies

Create button for light and dark mode

Toggle between light and dark mode

Demo