How does Material-UI theme light / dark work?

Question

I don't know how the light / dark in the theme works. I can observe how the main works. When I change the color of the main, the components change, but changing the light / dark value in type does nothing.

const theme = createMuiTheme({
  palette: {
  type: 'dark',
  primary: {
      light: '#ddd',
      main: '#f00',
      dark: '#666',
      contrastText: '#ddd'
    }
  }
});

<ThemeProvider theme={theme}>
  <CssBaseline>
    <Typography variant='h1' component='h1' color='primary'>
      Hello
    </Typography>
  </CssBaseline>
</ThemeProvider>;

Answer 1

<Box bgcolor='primary.light' color='primary.contrastText'>
 Lorem ipsum dolor sit amet.
</Box>