aly/servatrice
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add Material UI theme support (#4437)

Browse source 
* add Material UI theme support

* add primary color palette

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>
This commit is contained in:
Jeremy Letto 2021-10-20 19:03:05 -05:00 committed by GitHub
parent 586f23cfa9
commit ebebb9c4bb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 96 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
webclient/src/index.tsx
View file

@ -1,7 +1,16 @@
import { ThemeProvider } from '@material-ui/styles';
import React from "react"; import React from "react";
import ReactDOM from "react-dom"; import ReactDOM from "react-dom";
import "./index.css"; import "./index.css";
import { materialTheme } from './material-theme';
import { AppShell } from "containers"; import { AppShell } from "containers";
ReactDOM.render(<AppShell />, document.getElementById("root")); const appWithMaterialTheme = () => (
<ThemeProvider theme={materialTheme}>
<AppShell />
</ThemeProvider>
);
ReactDOM.render(appWithMaterialTheme(), document.getElementById("root"));

85
webclient/src/material-theme.ts Normal file
View file

@ -0,0 +1,85 @@
import { createMuiTheme } from '@material-ui/core';
export const materialTheme = createMuiTheme({
// overrides: {
// MuiCssBaseline: {
// '@global': {
// '@font-face': [],
// },
// },
// MuiButton: {
// text: {
// color: 'white',
// },
// },
// },
palette: {
primary: {
main: '#7033DB',
light: 'rgba(112, 51, 219, .3)',
dark: '#401C7F',
contrastText: '#FFFFFF',
},
// secondary: {
// main: '',
// light: '',
// dark: '',
// contrastText: '',
// },
// error: {
// main: '',
// light: '',
// dark: '',
// contrastText: '',
// },
// warning: {
// main: '',
// light: '',
// dark: '',
// contrastText: '',
// },
// info: {
// main: '',
// light: '',
// dark: '',
// contrastText: '',
// },
// success: {
// main: '',
// light: '',
// dark: '',
// contrastText: '',
// },
},
typography: {
fontSize: 12,
// h1: {},
// h2: {},
// h3: {},
// h4: {},
// h5: {},
// h6: {},
// subtitle1: {},
// subtitle2: {},
// body1: {},
// body2: {},
// button: {},
// caption: {},
// overline: {},
},
spacing: 8,
breakpoints: {
values: {
xs: 0,
sm: 640,
md: 768,
lg: 1024,
xl: 1280,
},
},
});