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.

The official MUI dark mode documentation

Step 1: Install MUI

To install MUI, run the following command in your project directory:

yarn add @mui/material @emotion/react @emotion/styled

This 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-group

This 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

PreviousDark Mode NextTokenomy UI

Last updated 2 years ago