How to Build a Dark Mode Switcher With Tailwind CSS and Flowbite

freeCodeCamp — Thu, 09 Dec 2021 16:11:44 +0000

By Zoltán Szőgyényi

Dark mode is starting to become a requirement rather that a nice-to-have feature like it was back in the day. It gives users the option to choose a theme that's comfortable for them, whether they're working during the day or at night.

If you haven't already heard, Tailwind CSS is one of the fastest growing CSS frameworks today due to its utility-first approach.

But even though Tailwind has a pretty good dark mode integration guide, there's no clear explanation on how to build a switch element to toggle it. On top of that, Tailwind doesn't include any actual components that support dark mode.

That's where Flowbite comes in. Flowbite is a library that provides components and interactive elements on top of Tailwind CSS. And as of version 1.2, it supports dark mode.

So that's what I want to show you today – how to build a Tailwind CSS dark mode switch element, and how to work with Flowbite components.

Flowbite - Tailwind CSS dark mode switcher

Before diving into the tutorial, make sure you have a Tailwind CSS project already set up. You should also install Flowbite as a plugin so you can use its components in dark mode.

Getting Started

If you already have a Tailwind CSS project set up then you can skip to the part where you should install Flowbite as a plugin. If not, then follow the instructions here on how to install Tailwind CSS first.

How to Install Tailwind CSS

The most popular way of using Tailwind CSS is by installing it as a PostCSS plugin. For that, we need to install three different packages using NPM:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

After that you should create a file called postcss.config.js and add the following code inside of it:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

Now open your terminal and execute the following command:

npx tailwindcss init

This will create an empty tailwind.config.js file which we will use later on to include Flowbite as a plugin.

Next up you should create a new CSS file which you can call styles.css and add the following code inside of it:

/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

After compiling the code using PostCSS, the injected directives (base, components, utilities) will be available as styles in the final CSS file.

Lastly, all you need to do is compile the CSS using Tailwind CLI by running the following command:

npx tailwindcss -o tailwind.css

A newly created tailwind.css file will be available in your project and you should include that inside your HTML templates to have access to the styles.

Now you have a working Tailwind CSS configuration locally on your computer. If you want to find more about this process, take a look at the installation guide from Tailwind CSS.

How to Install Flowbite

We need to install Flowbite to have access to the full features of the components and dark version support. Luckily the setup process is very straightforward since it's a Tailwind CSS plugin.

Let's start by first installing it via NPM:

npm i flowbite

Then require it as a plugin inside the tailwind.config.js file:

module.exports = {

    plugins: [
        require('flowbite/plugin')
    ]

}

Lastly, make sure that you also include the JavaScript file somewhere before the closure of the tag:

<script src="../path/to/flowbite/dist/flowbite.bundle.js">script>

How to Enable Dark Mode in Tailwind CSS

The first thing to understand is how dark mode works in Tailwind CSS. There are two ways you can set it up:

using the media option
using the class option

The main difference is that the media option will only take your browser's color scheme preference into account, which is actually set by the OS.

The class option will only look for a .dark class applied to the main tag. This is what most websites use because, with this method, users can manually set their preference.

We'll stick with the class option, as it gives users greater control over their theming preferences.

Let's start off by adding the following to the tailwind.config.js file:

module.exports = {
  darkMode: 'class',
  // ...
}

This configures Tailwind to use the class option for dark mode.

Next, add a script to the element of the page. This checks for a previous user preference in localStorage, and uses the browser's color scheme as a backup:

<script>
  // It's best to inline this in `head` to avoid FOUC (flash of unstyled content) when changing pages or themes
  if (
    localStorage.getItem('color-theme') === 'dark' ||
    (!('color-theme' in localStorage) &&
      window.matchMedia('(prefers-color-scheme: dark)').matches)
  ) {
    document.documentElement.classList.add('dark');
  } else {
    document.documentElement.classList.remove('dark');
  }
script>

The reason we add this script to the tag and not before the closing tag is because we want to avoid a flicking effect when setting the page to dark or light mode.

How to Build the Dark Mode Switch

Now that Tailwind is configured, we need to build the element users will interact with to change the theme from dark to light mode.

To do this, we'll stick with a basic

Flowbite - freeCodeCamp.org

How to Build a Dark Mode Switcher With Tailwind CSS and Flowbite

Getting Started

How to Install Tailwind CSS

How to Install Flowbite

How to Enable Dark Mode in Tailwind CSS

How to Build the Dark Mode Switch

How to Handle the Dark Mode Switch with JavaScript

How to Use the Dark Mode Switch in the Navigation Bar

Flowbite Components in Dark Mode

Conclusion