Introduction
As a web front-end developer who has ever desired to add a dark theme to your website or you have been facing difficulties in managing a theme in your website, tailwindcss makes it seem easier and faster too, and for this will be working with React.js.
At the end of this article, you should be able to set up light and dark themes on any of your React.js apps using tailwindcss with these few steps.
What is Tailwind CSS.
Tailwind CSS is a utility-first CSS framework*, t*ailwind CSS makes it quicker to write and maintain the code of your application. Using this utility-first framework, you don't have to write custom CSS to style your application. Instead, you can use utility classes to control the padding, margin, color, font, shadow, and more of your application you can visit https://tailwindcss.com/ for more information.
What is React
React is a JavaScript library for building user interfaces. It was developed by Facebook and is now maintained by Facebook and a community of individual developers and companies. React allows developers to build complex UI components using a declarative syntax that makes the code easier to understand and debug.
Why Dark-mode
Theming is now in all modern design, for both Operating System (OS), Apps and websites .
It's designed to reduce eye strain in low-light conditions for those with extra sensitive to light, the dark mode reduces the bright colors for them.
Prerequisites
To start with this tutorial, you need:
Node.js version 14 or later
Setting up a New React Project
To setup a new React.js app you need to have node installed in your system you can head to their there website nodejs.org to download the latest version of node in your system.
After downloading and installing node in your system, there are several ways to create a new react.js app but for this project, we will be using the create-react-app.
On your terminal, run the below command:
npx create-react-app app-name
This will setup a new React.js application with name app-name
Next you have to navigate into the app to do that in your terminal type
cd app-name
In your project directory to run the newly created app in your terminal type
npm i
npm start
Now that your app is up and runing its time to add tailwindcss to your app
Installing Tailwind CSS
****Here you have to run a simple node package command,
npm install -D tailwindcss
npx tailwindcss init
NOTE: You have to be in the current project you want to use tailwindcss.
This will install tailwindcss into your project and create a tailwind.config.js file in your project.
Setting up environmental variables
****Firstly, you will have to add all the @tailwind directives to your main index.css file and the directives are listed below.
@tailwind base;
@tailwind components;
@tailwind utilities;
And with this tailwind should be up and running in your project already but few steps to go before you can be able to use the dark theme.
Next, go to your tailwind.config.js file and add darkMode: 'class', and mode: 'jit',
So, your file should be like this:
*/** @type {import('tailwindcss').Config} */*
module.exports = {
mode: 'jit',
darkMode: 'class',
content: ["./src/**/*.{html,js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
After this save your work.
Next up go to your ‘public/index.html‘ file on the body tag(element) and add the attribute class,
Just save your file
<body *class*="">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div *id*="root"></div>
</body>
With this the dark theme is ready.
The reason for adding the attribute class to the body tag(element) is that in your code the css is going to be checking if there is a name dark on the body tag(element) to be able to show or add your dark theme, we will understand it more in few seconds.
Toggling theme (Light/Dark)
with all this done you would want to be adding and removing the dark in your inspector, this is now where you will have to write some JavaScript that has to be doing that from your UI
With all that set up already let’s dive into the code
Firstly you have to check if the device is on dark to set your app theme to the device theme too and the code to do that is:
if(localStorage.theme === 'dark' || (!('theme' in localStorage) &&
window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
With this on lunch of your app it automatically takes the current display theme of the device it was launched on.
Now changing the theme of your app from inside your app.
So before now, you should have created a button or a simple design to toggle the dark mode and light mode
Then create an event tired to the button that is to toggle the theme mode
Your button can be like this:
<button onClick={()=> toggleTheme()}>Click TO Toggle Theme </button>
After this you can now create the function, it should be like this:
function toggleTheme() {
let htmlClasses = document.querySelector('html').classList;
if(localStorage.AppName === 'dark'){
localStorage.removeItem('AppName')
htmlClasses.remove('dark')
localStorage.theme = 'light'
}else{
localStorage.AppName = 'dark';
htmlClasses.add('dark');
localStorage.theme = 'dark'
}
}
Your class component should like this:
Usage (How to implement)
With this done you have successfully added a theme to your app so testing it out
Create a div like this in your component:
<div className="h-44 w-44 bg-white dark:bg-black flex justify-center items-center">
<span className="dark:hidden">light-mode</span>
<span className="hidden dark:block text-white">dark-mode</span>
</div>
This creates a square with the current theme state in the middle.
Testing
This is a sample output:
Conclusion
Adding themes to your websites makes your website stand out , and using tailwindcss makes it way more easier and flexible to implement and work with.
And using React and tailwindcss make you build more reusable component with themes making it way more easier to build app and faster too.
Top comments (0)