Material UI
Material UI comes with two palette modes: light (the default) and dark.
Overview
In the context of MUI, dark mode refers to a theme mode in which the color palette of MUI components is optimized for use in a dark environment. This means that the default colors of MUI components are adjusted to work well in a low-light environment, where a light color scheme would be too bright and could cause eye strain.
How to use
Here we use dark mode. The installation method is as follows below.
Step 1: Install MUI
To install MUI, run the following command in your project directory:
yarn add @mui/material @emotion/react @emotion/styledThis will install the MUI core library, along with the required Emotion dependencies.
Step 2: Install the MUI TypeScript typings
To install the MUI TypeScript typings, run the following command in your project directory:
yarn add @mui/types @mui/utils @types/react-transition-groupThis will install the MUI TypeScript typings, along with the typings for React Transition Group (which is used by MUI for transitions).
Step 3: Add the MUI CSS baseline
The MUI CSS baseline provides a set of default styles for MUI components. To add the MUI CSS baseline to your app, create a new file named _app.tsx in the pages directory of your project, and add the following code:
import { CssBaseline } from '@mui/material';
function MyApp({ Component, pageProps }) {
return (
<>
<CssBaseline />
<Component {...pageProps} />
</>
);
}
export default MyApp;The CssBaseline component is provided by MUI and sets up the default styles for MUI components. The MyApp component is the top-level component for your app, and it wraps the Component and pageProps in a React.Fragment.
Step 4: Set up the MUI theme provider
The MUI theme provider allows you to set up a global theme for your app. To set up the MUI theme provider, create a new file named _document.tsx in the pages directory of your project, and add the following code:
import * as React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import { dark } from '@mui/material/styles/createPalette';
const theme = createTheme({
palette: {
mode: 'dark',
primary: {
main: '#f44336',
},
secondary: {
main: '#3f51b5',
},
},
});
class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
<meta name="theme-color" content={theme.palette.primary.main} />
</Head>
<body>
<ThemeProvider theme={theme}>
<Main />
<NextScript />
</ThemeProvider>
</body>
</Html>
);
}
}
export default MyDocument;The createTheme function is provided by MUI and allows you to create a custom theme for your app. In this example, we're creating a dark mode theme with primary and secondary colors.
The MyDocument component is a custom Document component provided by Next.js, and it's used to set up the global document structure
Last updated