xxxxxxxxxx
const [mode, setMode] = useState('light');
const darkTheme = createTheme({
palette: {
mode: mode
}
})
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, { 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;