Hello guys today i will show you how to add MUI Theme Switcher in your React App.
Prerequisite of this tutorial is to have intermediate knowledge of React and MUI (formally known as material-UI)
Lets Initiate the App and install required dependencies first
- run following command to initiate the project
npx create-react-app app-name
- Install MUI-v5 UI library and supporting dependencies
npm install @mui/material @emotion/react @emotion/styled js-cookie
- Lets run the app by hitting the following command
npm start
- lets do some coding in editor of your choice navigate to folder to structure in
./src
folder create a folder with name Components as shown in below
- In Components create component with the name of AppBar with including File
AppBar.js
- I am using dummy code straight from MUI-v5 website you can add your own Code
- after copying/writing your code lets add select dropdown to for theme options
- create Themes folder in
./src
folder to store our themestheme.js
will be our default theme with default value
- in
theme.js
file lets initiate theme configuration for our default this will apply to all other theme options so ourtheme.js
should look like this
- time to do some heavy lifting go to
App.js
add following code
import Appbar from "./Components/Appbar/Appbar";
import React, { useState } from "react";
import brownTheme from "./Themes/BrownTheme";
import darkBlue from "./Themes/darkBlue";
import darkgreen from "./Themes/darkgreen";
import someBlue from "./Themes/SomethingBlue";
import theme from "./Themes/theme";
import Cookies from "js-cookie";
import { ThemeProvider } from "@mui/material";
import DummyContent from "./Components/DummyContent/dummyContent";
const themeArray = [
{
name: "Default",
themeName: theme,
},
{
name: "Dark Blue",
themeName: darkBlue,
},
{
name: "Brown Theme",
themeName: brownTheme,
},
{
name: "Green Theme",
themeName: darkgreen,
},
{
name: "Some Blue",
themeName: someBlue,
},
];
function App() {
const [selectedThemeName, setSelectedThemeName] = useState(
Cookies.get("selectedThemeName") || "Default"
);
const [selectedTheme, setSelectedTheme] = useState(
themeArray.find((theme) => theme.name === selectedThemeName).themeName
);
const handleChange = (event) => {
const newThemeName = event.target.value;
setSelectedThemeName(newThemeName);
setSelectedTheme(
themeArray.find((theme) => theme.name === newThemeName).themeName
);
Cookies.set("selectedThemeName", newThemeName, {
expires: 365,
sameSite: "None",
secure: true,
});
};
return (
<React.Fragment>
<ThemeProvider theme={selectedTheme}>
<Appbar
setSelectedTheme={setSelectedTheme}
handleChange={handleChange}
selectedTheme={selectedTheme}
selectedThemeName={selectedThemeName}
themeArray={themeArray}
/>
<DummyContent />
</ThemeProvider>
</React.Fragment>
);
}
export default App;
- after adding above code your
App.js
your file should look like this
12.Add Additional theme files from github link at the end of the post or you can create your own themes with colors and customization of your own .
- your
Themes
folder should look like
14.lets move to Navbar.js
to make theme switcher.Add following code
import React from "react";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Toolbar from "@mui/material/Toolbar";
import Typography from "@mui/material/Typography";
import { Select, MenuItem } from "@mui/material";
const Appbar = ({ handleChange, selectedThemeName, themeArray }) => {
return (
<React.Fragment>
<Box sx={{ flexGrow: 1 }}>
<AppBar position="static">
<Toolbar>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
News
</Typography>
<Box
sx={{
width: "200px",
}}
>
<Select
sx={{
backgroundColor: "primary.main",
color: "common.white",
maxWidth: "100%",
}}
autoWidth
value={selectedThemeName}
onChange={handleChange}
>
{themeArray.map((theme) => (
<MenuItem key={theme.name} value={theme.name}>
{theme.name}
</MenuItem>
))}
</Select>
</Box>
</Toolbar>
</AppBar>
</Box>
</React.Fragment>
);
};
export default Appbar;
15.Navbar.js
should look like this
16.almost done with switcher lets add some gibbrish UI code to check if its working or not. i have created dummyComponent.js
in /src/Component/DummyComponent
directory and import in App.js
.
17 to minimize development i have copied UI code from mui.com (sample code for components you will see)
16 lets open browser tab to see if everything is working
(http://localhost:3000/)
Hope you enjoyed this tutorial. this is my 1st time posting any tutorial in any platform.
let me know your thoughts in comments
github link for project -
https://github.com/quteboy/mui-theme-switcher.git
Top comments (0)