Applying type: 'dark' to a MUI palette breaks my site unless it is defined directly in the createMuiTheme() function

Question

I am unable to define a 'dark' theme with MUI for my site when declaring type: 'dark' anywhere outside of the direct createMuiTheme() funciton.

For example, the following works:

const siteTheme = createMuiTheme({
  palette: {
    primary: {
      light: '#484848',
      main: '#212121',
      dark: '#000000',
      contrastText: '#fff',
    },
    secondary: {
      light: '#b0ff57',
      main: '#76ff03',
      dark: '#32cb00',
      contrastText: '#000',
    },
    type: 'dark'
  },
})

But the following breaks:

const theme = {
  palette: {
    primary: {
      light: '#484848',
      main: '#212121',
      dark: '#000000',
      contrastText: '#fff',
    },
    secondary: {
      light: '#b0ff57',
      main: '#76ff03',
      dark: '#32cb00',
      contrastText: '#000',
    },
    type: 'dark'
  },
}

const siteTheme = createMuiTheme(theme)

And the error it gives is

54 | const siteTheme = createMuiTheme(theme)

Argument of type '{ palette: { primary: { light: string; main: string; dark: string; contrastText: string; }; secondary: { light: string; main: string; dark: string; contrastText: string; }; type: string; }; }' is not assignable to parameter of type 'ThemeOptions'. Types of property 'palette' are incompatible. Type '{ primary: { light: string; main: string; dark: string; contrastText: string; }; secondary: { light: string; main: string; dark: string; contrastText: string; }; type: string; }' is not assignable to type 'PaletteOptions'. Types of property 'type' are incompatible. Type 'string' is not assignable to type '"dark" | "light" | undefined'.ts(2345)

I am using a .tsx file.

Why can I not define type = 'dark' outside of the direct createMuiTheme() function?

Cater

did you find a solution for this? – Lewison

Answer 1

Because you are using TypeScript you need to make sure you cast it to the correct type:

import { PaletteType } from '@material-ui/core';

const theme = {
  palette: {
    type: 'dark' as PaletteType,
  }
}

Gemmule

Please note that PaletteType seems to have been renamed to PaletteMode. @material-ui/core/index.d.ts:50 - export type PaletteMode = 'light' | 'dark'; This, in turn, means that the type key has, accordingly, been renamed to mode. – Grande

You saved me :) – Misdoubt

Answer 2

The naming seems to have changed since @Farser's accepted answer, so I am adding an updated answer in case somebody stumbles upon this question, as I did, in the future.

I found the following line at @material-ui/core/index.d.ts:50, so I assume that the authors have decided to rename the palette "type" to "mode":

export type PaletteMode = 'light' | 'dark';

Here is a minimal working example of an App.tsx (assuming the default index.tsx generated by create-react-app or similar):

import React from "react";
import { createMuiTheme, PaletteMode, ThemeProvider } from "@material-ui/core";

const theme = createMuiTheme({
  palette: {
    mode: "dark" as PaletteMode
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <div className="App" />
    </ThemeProvider>
  );
}

As a side note, it should be also possible to use useMediaQuery("(prefers-color-scheme: dark)") to determine whether the user prefers a dark or a light theme and automatically set the appropriate one like this:

mode: (useMediaQuery("(prefers-color-scheme: dark)") ? "dark" : "light") as PaletteMode

Another small addition/note: Don't forget to add <CssBaseline /> at the top of the <ThemeProvider>, typically above your root element/component.

Grande

My imports only work like import { ThemeProvider, createTheme, responsiveFontSizes} from '@mui/material/styles'; – Fondafondant

Answer 3

For those coming here in 2024 from the react-admin documentation as I did, the import you need is

import { PaletteMode } from '@mui/material';

and the darkTheme should be defined with

const darkTheme = { ...defaultTheme, palette: { mode: 'dark' as PaletteMode } };
                                                      ━━━━━━━━━━━━━━━━━━━━━

Centaury