Project: Material-UI Dashboard > Material UI Theme Setup

Material UI Themes

To get started on Material UI themes, we'll refer to the documentation here.

From the documentation:

The theme specifies the color of the components, darkness of the surfaces, level of shadow, appropriate opacity of ink elements, etc.

Themes let you apply a consistent tone to your app. It allows you to customize all design aspects of your project in order to meet the specific needs of your business or brand.

To promote greater consistency between apps, light and dark theme types are available to choose from. By default, components use the light theme type.

We'll also be using the referenced Material UI Theme Creator to help us customize our own theme.

Material UI Default Theme

A Material UI theme is ultimately a JavaScript Object. To see the default theme out of the box, go to Material UI's default theme viewer.

Changing the theme's palette

Let's start with a simple example: changing the theme's color. As you can see, we've changed the theme of our app to now include an object with key palette. Viewing the palette documentation we can see there are 6 different types of colors we can customize. Primary will be the main color of our app, our brand's color, main button color, AppBar color, and so on.

The value of primary, as described in the Palette documentation:

The palette color value can either be a color object, or an object with one or more of the keys specified by the following TypeScript interface

In this lesson, we'll just use a color object, which we've imported from colors/deepPurple in the Material UI package. To see all available color objects, see the colors folder in Github.

We'll discuss how we can fully customize the colors with our own colors next lesson.

Exercise: Try to set dark mode on our app.

Lesson 4/6

import React, { useState } from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import Box from "@mui/material/Box";

import AppBar from "./AppBar";
import Drawer from "./Drawer";
import MainContent from "./MainContent";
import deepPurple from "@mui/material/colors/deepPurple";

export const drawerWidth = 240;

const mdTheme = createTheme({
  palette: {
    primary: deepPurple,
  },
});

function App() {
  const [open, setOpen] = useState(true);
  const toggleDrawer = () => {
    setOpen(!open);
  };

  return (
    <ThemeProvider theme={mdTheme}>
      <Box sx={{ display: "flex" }}>
        <CssBaseline />
        <AppBar toggleDrawer={toggleDrawer} open={open} />
        <Drawer toggleDrawer={toggleDrawer} open={open} />
        <MainContent />
      </Box>
    </ThemeProvider>
  );
}

export default App;

Open Sandbox