@mui/material/styles createTheme JavaScript Examples

Source File: Theme.js From FSE-Planner with MIT License

6 votes

Theme = createTheme({
  palette: {
    primary: {
      main: '#3f51b5'
    },
    secondary: {
      main: '#f50057'
    },
    error: {
      main: '#f44336'
    },
    warning: {
      main: '#ff9800'
    },
    info: {
      main: '#2196f3'
    },
    success: {
      main: '#4caf50'
    },
  },
  components: {
    MuiLink: {
      defaultProps: {
        underline: 'hover',
      },
    },
  },
})

Source File: index.js From Django-REST-Framework-React-BoilerPlate with MIT License

6 votes

export default function ThemeProvider({ children }) {
  const themeOptions = useMemo(
    () => ({
      palette,
      shape: { borderRadius: 8 },
      typography,
      shadows,
      customShadows,
    }),
    []
  );

  const theme = createTheme(themeOptions);
  theme.components = componentsOverride(theme);

  return (
    <StyledEngineProvider injectFirst>
      <MUIThemeProvider theme={theme}>
        <CssBaseline />
        {children}
      </MUIThemeProvider>
    </StyledEngineProvider>
  );
}

Source File: muiSetup.js From Edlib with GNU General Public License v3.0

6 votes

muiTheme = createTheme({
    palette: {
        grey: {
            main: grey[300],
            dark: grey[400],
        },
        primary: {
            main: '#21456A',
            dark: '#21456A',
        },
        secondary: {
            main: '#82E066',
            dark: '#1D7105',
        },
    },
    typography: {
        htmlFontSize: 16,
        fontFamily: "'Lato', sans-serif",
    },
})

Source File: theme.js From karto with MIT License

5 votes

theme = createTheme({
    palette: {
        mode: 'dark',
        primary: {
            main: '#EC5E69',
            dark: '#65282d'
        },
        secondary: {
            main: '#5893DF',
            dark: '#294468'
        },
        warning: {
            main: '#ff9800',
            dark: '#5f3b00'
        },
        background: {
            paper: '#24344D',
            default: '#192231'
        }
    },
    typography: {
        h1: {
            fontSize: '2rem'
        },
        h2: {
            fontSize: '1.2rem'
        },
        body1: {
            fontSize: '0.8rem'
        },
        body2: {
            fontSize: '0.7rem'
        },
        button: {
            fontSize: '0.65rem'
        }
    },
    components: {
        MuiButton: {
            styleOverrides: {
                root: {
                    minWidth: 0
                }
            }
        }
    }
})

Source File: app-wrapper.js From neutron with Mozilla Public License 2.0

5 votes

AppWrapper = ({ children }) => {
  const isFullScreen = useSelector((state) => state.general.isFullScreen);
  const locked = useSelector((state) => window.mode !== 'about' && state.general.locked);
  const shouldUseDarkColors = useSelector((state) => state.general.shouldUseDarkColors);

  const themeObj = {
    typography: {
      fontFamily: '"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
      fontSize: 13.5,
    },
    palette: {
      mode: shouldUseDarkColors ? 'dark' : 'light',
      primary: {
        light: blue[300],
        main: blue[600],
        dark: blue[800],
      },
      secondary: {
        light: red[300],
        main: red[500],
        dark: red[700],
      },
      // config taken from MUI V4
      background: shouldUseDarkColors ? {
        paper: '#424242',
        default: '#303030',
      } : {
        paper: '#fff',
        default: '#fafafa',
      },
    },
  };

  if (!shouldUseDarkColors) {
    themeObj.background = {
      primary: grey[200],
    };
  }

  const theme = createTheme(themeObj);

  const showWindowsTitleBar = window.process.platform !== 'darwin' && !isFullScreen && !getStaticGlobal('useSystemTitleBar');

  return (
    <StyledEngineProvider injectFirst>
      <MuiThemeProvider theme={theme}>
        <LocalizationProvider dateAdapter={AdapterDateFns}>
          <CssBaseline />
          <div
            style={{
              height: '100vh',
              width: '100vw',
              overflow: 'hidden',
            }}
          >
            {showWindowsTitleBar && <WindowsTitleBar title={window.mode !== 'main' ? document.title : undefined} />}
            <div style={{ height: showWindowsTitleBar ? 'calc(100vh - 32px)' : '100vh' }}>
              {locked ? <AppLock /> : children}
            </div>
          </div>
        </LocalizationProvider>
      </MuiThemeProvider>
    </StyledEngineProvider>
  );
}

Source File: sampleComponent.jsx From redis-examples with MIT License

5 votes

darkTheme = createTheme({
  palette: {
    primary: {
      main: orange[400],
    },
  }
})

Source File: sampleComponent.jsx From redis-examples with MIT License

5 votes

lightTheme = createTheme({
  palette: {
    primary: {
      main: grey[400],
    },
  }
})

Source File: App.js From material-ui-color with MIT License

5 votes

theme = createTheme({
  palette: {}
})

Source File: index.js From mui-image with ISC License

5 votes

theme = createTheme({
	typography: {
		fontFamily: ['Fira Code', 'monospace'].join(','),
	},
	palette: {
		primary: { main: '#2979ff' },
	},
})

Source File: App.js From sampo-ui with MIT License

5 votes

defaultTheme = createTheme()