You’ve done an excellent job; the design looks perfect!🎉
However,
For implementing dark mode, you’ve worked hard, though Tailwind CSS makes creating a dark mode toggler quite simple. Here’s how you can streamline the process:
- First of all, always configure the
tailwind.config.js file to align with your project’s style(define a custom color palette and font family). Add all the necessary colors and fonts to the extend object under the theme section. This allows you to use these custom values throughout your project by referencing their names, such as text-navy or bg-light-grey.
Example:
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
darkMode: "class",
theme: {
extend: {
colors: {
"custom-purple": "#A729F5",
"dark-navy": "#313E51",
"navy": "#3B4D66",
"grey-navy": "#626C7F",
"light-bluish": "#626C7F",
"light-grey": "#F4F6FA",
"custom-green": "#26D782",
'custom-red': "#EE5454",
"yellow-200": "rgb(255, 241, 233)"
},
width: {
"toggle-width": "35px",
"circle-size": "15px"
},
height:{
'circle-size': "15px"
},
fontFamily: {
rubik: "Rubik, sans-serif",
},
boxShadow: {
sm: "0px 16px 40px 0px rgba(143, 160, 193, 0.14)",
},
},
},
plugins: [],
}
-
To enable dark mode, set darkMode to "class" in the Tailwind configuration. This allows you to toggle between light and dark themes using class variants. For example, you can apply a dark mode background color like this: bg-light-bluish dark:bg-navy.
-
In your root component (e.g., App), create a state to manage theme toggling. Use a function to switch between light and dark themes by updating the className on the body element. This ensures the dark and light mode styles are applied dynamically.
Example:
const [theme, setTheme] = useState('light')
function handleTheme() {
setTheme(prev => prev === 'dark' ? 'light' : 'dark')
}
useEffect(() => {
if (theme === 'light') {
document.querySelector('body').className = 'light'
} else {
document.querySelector('body').className = 'dark'
}
}, [theme])
👆 With this setup, you can easily switch between dark and light colors across your project.
To learn more about Dark Mode with Tailwind, check out this guide from Tailwind CSS here.
