1.active dark mode in tailwind.config.js
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
darkMode: 'class',
theme: {
extend: {
},
},
plugins: [],
}
2. set dark mode in App.js , and pass {dark,setDark} to ,in which we set the toggle method in
function App() {
const [dark,setDark]=useState(false);
return (
<div className={dark?"dark":''}>
<Nav props={{dark,setDark}}/>
<Routes>
<Route path="/" element={<Home />}/>
</Routes>
</div>
);
}
export default App;
3.set the toggle in the component
Nav.jsx,sun and moon are the icon you choose for it
function Nav({props}) {
const {dark,setDark} = props
const handleClick = ()=>{
setDark(!dark)
}
return (
<>
<img src={dark?sun:moon} alt="toggle" className="w-5 h-5
absolute cursor-pointer" onClick={handleClick}/>
</>
export default Nav;
4. add dark mode to the components ,such as About.js
function About(props) {
console.log(skills)
return (
<div id='about' className=' dark:bg-gray-700 dark:text-white'>
</div>
);
}
export default About;
Top comments (0)