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

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?

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,
  }
}