In this article, you'll learn how to integrate Dark mode in your ReactJS
projects using Tailwind CSS
.
Set up the project
First, we need to create a ReactJS
project, for that, we gonna use the create-react-app
package. So, open your terminal and put the following command:
npx create-react-app my-project --template tailwindcss-starter
# or
yarn create react-app my-project --template tailwindcss-starter
As you see, we passed the
--template
flag to the command, which means that we want to use some template in our project, in this case, I'll use my own template with Tailwind CSS already configured.
Once the command finished the process, enter to the project folder with cd my-project
and you will see the file structure like this:
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src
│ ├── App.js
│ ├── App.test.js
│ ├── index.css
│ ├── index.js
│ ├── logo.svg
│ ├── serviceWorker.js
│ └── setupTests.js
├── craco.config.js
├── package.json
├── README.md
├── tailwind.config.js
└── yarn.lock
We'll focus only on the tailwind.config.js
file and src/App.js
component.
Enable Dark mode
In this tutorial, we'll use a little plugin called nightwind that allows us to include Dark mode in Tailwind CSS very easy.
So, for that open the terminal, and make sure that you are in the root folder in the project, then put the following in the terminal:
npm install nightwind
# or
yarn add nightwind
This command will install the plugin, and the only thing that we need to do to use it is includes the plugin in the tailwind.config.js
file.
// tailwind.config.js
module.exports = {
darkMode: "class",
// ...
plugins: [require("nightwind")],
}
Once we have this, we can create a Layout
container for add the nightwind
class, this allows us to have some transition when enable/disable dark mode.:
// containers/Layout.js
import PropTypes from 'prop-types';
const Layout = ({ children }) => {
return <div className="nightwind">{children}</div>;
};
Layout.propTypes = {
children: PropTypes.element.isRequired
};
export default Layout;
Usign Dark mode
It's time to use our Dark mode. So, in your component write some code or you can copy the following code:
// App.js
import Layout from './containers/Layout';
function App() {
return (
<Layout>
<div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
<h1 className="text-gray-900 text-4xl">Hello World!</h1>
</div>
</Layout>
);
}
export default App;
The code above look's like this:
Here, the background is some white and the text is black. This thanks to the classes bg-gray-100
and text-gray-900
.
To enable/disable Dark mode we must have to create a component with some onClick
function, so create a component in components/Toggle.js
with the following code:
// components/Toggle.js
const Toggle = () => {
const handleClick = () => {
// enable/disable dark mode
};
return (
<button
onClick={handleClick}
className="mt-4 px-4 py-2 text-gray-100 font-bold bg-gray-900 rounded-lg"
>
Enable/Disable
</button>
);
};
export default Toggle;
So, we have this Toggle
component with some button and a function that for the moment don't do anything. We need to implement a functionality that allows us to enable/disable Dark mode. Well, nightwind
has its function for doing this functionality. The only thing we need to do is import nightwind
and use the function toggle
like this:
// components/Toggle.js
import nightwind from 'nightwind/helper';
const Toggle = () => {
const handleClick = () => {
nightwind.toggle(); // enable/disable dark mode
};
// ...
};
In Action
Here is when the magic occurs, so, we only need to click our button and see what's happening.
But, how it works?
Here is the thing, nightwind
converts our colors classes, for example:
In the background, we have bg-gray-100
, nightwind
do the following 100 - 900
, and that returns -800
so the expected Dark color will be bg-gray-800
. You can read more in the documentation.
Well, maybe we need a custom color, for example, we have the following code:
<h1 className="text-gray-100">Hello World</h1>
The color of the text above will be text-gray-800
in Dark mode, but maybe we want that this text converts to red color, for example, to override this thing you can add the following class dark:text-red-800
.
And that's it, I hope you find useful this article. Any advice or suggestion is welcome.
Happy Coding!