...
In this file, make two new objects, one called
myThemeLightand the other calledmyThemeDark. We will use these to separate out light and dark mode colours.
...
| Code Block | ||
|---|---|---|
| ||
// Light palette
const myThemeLight = {
};
// Dark palette
const myThemeDark = {
};
export { myThemeLight, myThemeDark } |
Import the
createThemefunction from@mui/material/styles. This will generate a theme based on the options received.
...
| Code Block | ||
|---|---|---|
| ||
import { createTheme } from "@mui/material/styles";
// Light palette
const myThemeLight = {
};
// Dark palette
const myThemeDark = {
};
export { myThemeLight, myThemeDark } |
Import
baseTheme, and use the spread operator to gain all styles from the base file.
...
| Code Block | ||
|---|---|---|
| ||
import { createTheme } from "@mui/material/styles";
import baseTheme from "./baseTheme";
// Light palette
const myThemeLight = {
...baseTheme
};
// Dark palette
const myThemeDark = {
...baseTheme
};
export { myThemeLight, myThemeDark } |
Define a colour palette, and specify what mode this colour palette is for:
“light"or“dark"
...