Did you know that all people in the world disagreed on their love for movie villains?
But everyone agreed that dark mode is always better 🌓🌑🌒🌗🌘🌚
One of the quickest ways to create an application that react to the tailwindcss
This is the article
Install Tailwind CSS with Vite
But what if you want to control the style of your site?
Step 1: Install Packages
Before implementing the Dark/Light mode switch, make sure you have the required packages installed. In your React project, install the following packages:
Animated dark mode toggle as seen in blogs!
npm install react-toggle-dark-mode
Step 2: Create Modeswitcher Component
Create a new file named Modeswitcher.js in the Components folder of your project. This component will handle the dark/light mode switching.
import { useState } from "react";
import { DarkModeSwitch } from "react-toggle-dark-mode";
export default function Modeswitcher() {
// State to track the current theme
const [isDarkMode, setDarkMode] = useState(() => localStorage.getItem('theme') || 'light');
// Add default theme to local storage if not set
localStorage.theme ? null : localStorage.setItem('theme', 'light');
// Function to toggle dark mode
const toggleDarkMode = (checked) => {
const newTheme = isDarkMode === 'light' ? 'dark' : 'light';
setDarkMode(newTheme);
localStorage.setItem('theme', newTheme);
};
// Apply dark mode styles based on local storage or system preference
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');
}
// Return the DarkModeSwitch component
return (
<DarkModeSwitch
style={{ marginBottom: '2rem' }}
checked={isDarkMode === 'dark'}
onChange={toggleDarkMode}
size={120}
/>
);
}
step 3: GO to tailwind.config.js
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
// ...
}
Step 3: Integrate Modeswitcher in App Component
Now, use the Modeswitcher component in your main application file (App.js or similar).
// File - App.js
import Modeswitcher from "./Components/Modeswitcher";
function App() {
return (
<div>
<div className='text-center pt-10'>
<h1 className="text-green text-3xl font-bold">
Dark Mode + ReactJS + Tailwind CSS
<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
<span class="p"><</span><span class="nt">h3</span> <span class="na">className</span><span class="p">=</span><span class="s">"text-black dark:text-white text-2xl"</span><span class="p">></span>
<span class="p"></</span><span class="nt">h3</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">center</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span>
<span class="na">className</span><span class="p">=</span><span class="err">"</span><span class="na">w-80</span> <span class="na">rounded-lg</span> <span class="na">border</span> <span class="na">p-10</span>
<span class="na">bg-white</span> <span class="na">border-gray-800</span>
<span class="na">shadow-md</span> <span class="na">dark</span><span class="err">:</span><span class="na">bg-gray-800</span> <span class="na">dark</span><span class="err">:</span><span class="na">border-gray-100</span> <span class="err">"</span>
<span class="p">></span>
<span class="p"><</span><span class="nc">Modeswitcher</span> <span class="p">/></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">className</span><span class="p">=</span><span class="s">"p-3"</span><span class="p">></span>
<span class="p"><</span><span class="nt">a</span> <span class="na">href</span><span class="p">=</span><span class="s">"##"</span><span class="p">></span>
<span class="p"><</span><span class="nt">h1</span> <span class="na">className</span><span class="p">=</span><span class="s">" font-bold text-gray-900 dark:text-white"</span> <span class="p">></span>
hello in
<span class="p"></</span><span class="nt">h1</span><span class="p">></span>
<span class="p"></</span><span class="nt">a</span><span class="p">></span>
<span class="p"><</span><span class="nt">p</span> <span class="na">className</span><span class="p">=</span><span class="s">"mb-3 text-gray-900 dark:text-gray-300"</span> <span class="p">></span>
how are you to day
<span class="p"></</span><span class="nt">p</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">center</span><span class="p">></span>
</div>
)
}
export default App
Step 4: Run Your React App
After completing the above steps, save your files and run your React app:
Top comments (0)