Scaffold React Application
A new react app is easily scaffolded using
$ npx create-react-app my-app
Install dependencies
I need to install material ui core package.
// with npm
$ npm install @material-ui/core
// with yarn
$ yarn add @material-ui/core
Wrap application in Theme Provider
For the purpose of this demo, I will use App.js to set up everything.
- Add Light and Dark themes
export const light = {
palette: {
type: 'light',
},
}
export const dark = {
palette: {
type: 'dark',
},
}
- Import
ThemeProviderandcreateMuiTheme
import { ThemeProvider } from '@material-ui/core'
import { createMuiTheme } from '@material-ui/core/styles'
- Set up the toggle logic
const [theme, setTheme] = useState(true)
const icon = !theme ? <Brightness7Icon /> : <Brightness3Icon />
// Icons imported from `@material-ui/icons`
const appliedTheme = createMuiTheme(theme ? light : dark)
- Wrap the render inside
ThemeProviderand pass theappliedTheme
return (
<ThemeProvider theme={appliedTheme}>
//rest of the code
</ThemeProvider>
)
- Trigger toggle using
onClick
onClick={() => setTheme(!theme)}
Now our theme toggle logic is in place.
Add rest of the material ui components and see the toggle in action!
You can see a working example here, along with the code.
Top comments (1)
Thanks, man!