Dark and Light Mode — Using React & Tailwind CSS

You can add the Dark and Light Mode feature to your application if your users choose to walk on the dark side 🌚

Let’s speak a bit about what dark mode is at first.

The dark mode is an effective experience solution created to increase the user experience. Dark Mode also known as a Night Mode is a popular feature that alters the colour scheme of a user interface (UI).

Many studies show that it is being preferred by users.

Dark Mode Poll Results

A survey figured out that out of 2,514 total votes, an overwhelming 81.9% of Android Authority readers use dark mode on their phones, in apps, and wherever else it’s available. 9.9% said they’re somewhere in between dark and light mode, meaning 91.8% of voters use some form of a dark mode on their smartphones. Just 8.2% said they don’t use dark mode at all as you can see below chart.

We can clearly see the curiosity of users about dark mode support for popular applications, especially Snapchat, Chrome, Facebook, Youtube and Safari.

In addition, we can clearly see the curiosity of users about dark mode support against popular applications.

Dark Mode Monthly Search Trend by Google Trends

Let’s talk about the advantages and disadvantages of the dark mode feature in terms of users and devices.

👍 Advantages

• It’s better for low-light settings
• There will be less ‘blue light’ emitted from your phone
• It can use less energy so your phone battery will last longer
• It can help people with light sensitivity or visual impairment
• Most colours tend to get washed out when in contrast with white, but with a dark theme applied or by using dark mode colours pop out more and are more vivid
• It’s reported by a majority to be aesthetically more pleasing to the eye.

Personal tastes and preferences vary, but users report that they prefer dark-themed software over light-themed one not only because of the above advantages but also it looks more simplistic and sophisticated and generally looks more “cool”.

👎 Disadvantages:

• It can be challenging to read long pieces of content or text in dark mode
• If you have a phone with an older LCD screen, dark mode won’t really save your battery. It saves energy if the device uses an OLED or AMOLED screen

Let’s code 👨‍💻

First, let’s install the packages required for our project.

1. Add Tailwind CSS to the React Project

Install Tailwind CSS with Create React App - Tailwind CSS

Thanks to the Dark Mode support provided by Tailwind CSS, we can use this support in our application by simply adding the dark: prefix to the CSS classes.

To learn more and review examples 👇

Dark Mode - Tailwind CSS

2. Let’s include a nice icon animation package developed for dark/light mode transition with React.

react-toggle-dark-mode

All we need is;

1. A hook to catch changes in theme
2. An event that will trigger this hook
3. UI component where this event will run

We need a UI component such as a switch, checkbox, button or radio to enable the user to switch to Dark/Light mode. The switch component was my choice for this case. Because why not?

App.js

Switcher.js (Switch UI component)

Bonus feature: The last preferred mode of the user is saved in the browser (on localStorage) and when the user refreshes the page, he/she can continue with his/her last preferred mode. You can also see this feature by clicking the live demo link below and experiencing the last mode you prefer when you refresh your page by default.

useDarkSide.js (Hook)

Switcher.js (Blog card template)

Result

Congrats, now you can skip to the dark side! 🥳

The live demo link below👇

https://tailwind-darkmode-demo.netlify.app

Dark and Light Mode - Using React & Tailwind CSS

Please feel free to comment and put your thought into this post. If you like what you read, don’t forget to clap 👏