@mui/material#ThemeOptions TypeScript Examples

The following examples show how to use @mui/material#ThemeOptions. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Theme.tsx    From GTAV-NativeDB with MIT License 6 votes vote down vote up 
lightTheme: ThemeOptions = {
  palette: {
    mode: 'light',
    background: {
      default: '#eee'
    },
    primary: {
      main: '#0e752e'
    },
    secondary: {
      main: '#ff3d00'
    }
  }
}
Example #2
Source File: Theme.tsx    From GTAV-NativeDB with MIT License 6 votes vote down vote up 
darkTheme: ThemeOptions = {
  palette: {
    mode: 'dark',
    primary: {
      main: '#20ba4e'
    },
    secondary: {
      main: '#ff8c00'
    }
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: darkScrollbar()
      }
    }
  }
}
Example #3
Source File: theme.ts    From usehooks-ts with MIT License 6 votes vote down vote up 
dark: Partial<ThemeOptions> = {
  palette: {
    mode: 'dark',
    primary: {
      main: dracula.pink,
    },
    common: {
      white: dracula.white,
      black: dracula.background,
    },
    background: {
      default: '#1d1e26',
      paper: '#1d1e26',
    },
  },
}
Example #4
Source File: theme.tsx    From ExpressLRS-Configurator with GNU General Public License v3.0 5 votes vote down vote up 
themeConfig: ThemeOptions = {
  shape: {
    borderRadius: 0,
  },
  palette: {
    mode: 'dark',
    background: {
      paper: grey[800],
    },
  },
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: darkScrollbar(),
      },
    },
    MuiAppBar: {
      styleOverrides: {
        root: {
          backgroundImage: 'none !important',
        },
      },
    },
    MuiPaper: {
      styleOverrides: {
        root: {
          backgroundImage: 'none !important',
        },
      },
    },
    MuiAlert: {
      styleOverrides: {
        standardError: {
          backgroundColor: 'rgb(156 40 34) !important',
          color: 'rgb(255 255 255) !important',
        },
        standardWarning: {
          backgroundColor: 'rgb(173 110 17) !important',
          color: 'rgb(255 255 255) !important',
        },
        standardInfo: {
          backgroundColor: 'rgb(44 104 158) !important',
          color: 'rgb(255 255 255) !important',
        },
        standardSuccess: {
          backgroundColor: 'rgb(27 84 27) !important',
          color: 'rgb(255 255 255) !important',
        },
      },
    },
    MuiTooltip: {
      styleOverrides: {
        tooltip: {
          paddingLeft: '1em',
          paddingRight: '1em',
          fontSize: '1em !important',
          '& a': {
            color: '#90caf9',
          },
          maxWidth: '700px',
        },
        popper: {
          maxWidth: '700px',
        },
      },
    },
  },
}
Example #5
Source File: theme.ts    From usehooks-ts with MIT License 5 votes vote down vote up 
makeTheme = (variant: ThemeOptions): Theme => {
  const common: ThemeOptions = {
    palette: {
      error: {
        main: red.A400,
      },
      dracula,
      gradient: {
        primary:
          'linear-gradient(140deg, rgb(57, 45, 209) 0%, rgb(142, 41, 149) 100%);',
      },
    },
    shape: {
      borderRadius: 8,
    },
    typography: {
      fontFamily: [
        'Fira Sans Regular',
        '-apple-system',
        'BlinkMacSystemFont',
        '"Segoe UI"',
        'Roboto',
        '"Helvetica Neue"',
        'Arial',
        'sans-serif',
        '"Apple Color Emoji"',
        '"Segoe UI Emoji"',
        '"Segoe UI Symbol"',
      ].join(','),
    },

    components: {
      MuiCssBaseline: {
        styleOverrides: `
          @font-face {
            font-family: Fira Sans Regular;
            font-style: normal;
            font-display: swap;
            font-weight: 400;
            src: url(${FiraRegular}) format(truetype);
          }
          @font-face {
            font-family: Fira Code;
            font-style: normal;
            font-display: swap;
            font-weight: 400;
            src: url(${FiraCode}) format('woOpenTypeff2')
            local('Open Sans Regular'),
            local('OpenSans-Regular');
          }
        `,
      },
      MuiLink: {
        defaultProps: {
          underline: 'hover',
        },
      },
    },
  }

  const theme = createTheme(deepMerge(common, variant))
  return responsiveFontSizes(theme)
}
Example #6
Source File: theme.ts    From usehooks-ts with MIT License 5 votes vote down vote up 
light: Partial<ThemeOptions> = {
  palette: {
    mode: 'light',
    primary: {
      main: blue[700],
    },
  },
}
Example #7
Source File: AppThemeProvider.tsx    From mui-toolpad with MIT License 5 votes vote down vote up 
export function createThemeOptions(toolpadTheme: AppTheme): ThemeOptions {
  const palette: PaletteOptions = {};
  const primary = toolpadTheme['palette.primary.main'];
  if (primary) {
    palette.primary = (colors as any)[primary];
  }

  const secondary = toolpadTheme['palette.secondary.main'];
  if (secondary) {
    palette.secondary = (colors as any)[secondary];
  }

  const mode = toolpadTheme['palette.mode'];
  if (mode) {
    palette.mode = mode;
  }

  return { palette };
}