xxxxxxxxxx
import React, { useState, useEffect } from "react";
const App = () => {
const [isDarkMode, setIsDarkMode] = useState(false);
useEffect(() => {
const body = document.querySelector("body");
if (isDarkMode) {
body.classList.add("dark-mode");
} else {
body.classList.remove("dark-mode");
}
}, [isDarkMode]);
const handleModeToggle = () => {
setIsDarkMode(!isDarkMode);
};
return (
<div className="app">
<button onClick={handleModeToggle}>
{isDarkMode ? "Switch to Light Mode" : "Switch to Dark Mode"}
</button>
<h1>{isDarkMode ? "Dark Mode" : "Light Mode"}</h1>
{/* Rest of your application */}
</div>
);
};
export default App;
xxxxxxxxxx
import React from 'react'
import { useEffect,useState } from 'react'
export default function ThemeEx(){
const body = document.querySelector("body")
const [IsColor, setIsColor] = useState(false)
useEffect(() => {
if (IsColor){
body.classList.add("dark-mode")
body.classList.remove("white-mode")
}
else{
body.classList.add("white-mode")
body.classList.remove("dark-mode")
}
},[IsColor]
)
const handleClick = () => {
setIsColor( ! IsColor)
}
return(
<div className="main">
<button onClick={handleClick}> <span> Click me to change mode from {IsColor ? "Dark":"white"} to {IsColor ? "White":"Dark"} </span></button>
</div>
)
}
.main{
height:100vh;
width:100%;
}
.white-mode{
background-color: white;
}
.dark-mode{
background-color: black;
}
.white-mode span {
color: black;
}
.dark-mode span {
color: white;
}
xxxxxxxxxx
const [mode, setMode] = useState('light');
const darkTheme = createTheme({
palette: {
mode: mode
}
})
xxxxxxxxxx
import React, { useState, useEffect } from 'react';
import './darkMode.css';
function App() {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
if (theme === 'light') {
setTheme('dark');
} else {
setTheme('light');
}
};
useEffect(() => {
document.body.className = theme;
}, [theme]);
return (
<div className={`App ${theme}`}>
<button onClick={toggleTheme}>Toggle Theme</button>
<h1>Hello, world!</h1>
</div>
);
}
export default App;
xxxxxxxxxx
import React from 'react'
import { func, string } from 'prop-types';
import styled from "styled-components"
const Button = styled.button`
background: ${({ theme }) => theme.background};
border: 2px solid ${({ theme }) => theme.toggleBorder};
color: ${({ theme }) => theme.text};
border-radius: 30px;
cursor: pointer;
font-size:0.8rem;
padding: 0.6rem;
}
\`;
const Toggle = ({theme, toggleTheme }) => {
return (
<Button onClick={toggleTheme} >
Switch Theme
</Button>
);
};
Toggle.propTypes = {
theme: string.isRequired,
toggleTheme: func.isRequired,
}
export default Toggle;
xxxxxxxxxx
import React, { useState, useEffect } from 'react';
const App = () => {
const [darkMode, setDarkMode] = useState(false);
useEffect(() => {
const bodyElement = document.querySelector('body');
if (darkMode) {
bodyElement.classList.add('dark');
} else {
bodyElement.classList.remove('dark');
}
}, [darkMode]);
const toggleDarkMode = () => {
setDarkMode(!darkMode);
};
return (
<div>
<button onClick={toggleDarkMode}>
{darkMode ? 'Disable Dark Mode' : 'Enable Dark Mode'}
</button>
{/* Your app content goes here */}
</div>
);
};
export default App;
xxxxxxxxxx
/* define the property */
:root {
--main-color: black;
}
/* use the property */
p {
color: var(--main-color);
}