// We need to put the MuiThemeProvider decoration in another component // Because otherwise the withStyles() HOC used in EnhancedLogin won't get // the right theme const LoginWithTheme = props => ( <MuiThemeProvider theme={createMuiTheme(lightTheme)}> <EnhancedLogin {...props} /> </MuiThemeProvider> )
export function createTheme(colors) { const theme = createMuiTheme({ palette: { primary: { main: colors.primary[500].hex }, secondary: { main: colors.secondary[500].hex }, }, }); return theme; }
const App = ({ children }) => ( <JssProvider jss={jss} generateClassName={createGenerateClassName()} > <MuiThemeProvider theme={createMuiTheme()}> {children} </MuiThemeProvider> </JssProvider> )
function createTheme(theme) { const themeOptions = merge( { props: { MuiWithWidth: { // Initial width property initialWidth: process.env.BROWSER ? undefined : global.muiInitialWidth, }, }, }, theme, ); return createMuiTheme(themeOptions); }
function makeTheme({primary, secondary, primaryShade = 700, secondaryShade = 600}) { return createMuiTheme({ palette: { primary: { main: primary[primaryShade], }, secondary: { main: secondary[secondaryShade], }, }, }); }
render() { return ( <MuiThemeProvider theme={createMuiTheme()}> <div style={LEFT_COL_STYLE}> <TodoMenu /> </div> <div style={RIGHT_COL_STYLE}> {this._renderActiveView()} </div> </MuiThemeProvider> ); }
const SubmitModal = ({ solution, lang, close }) => { const theme = createMuiTheme({ palette: { primary: {
const FormButton = ({ children }) => { const theme = createMuiTheme({ palette: { primary: { main: "#04786B", }, }, }); const classes = useStyles(); return ( <MuiThemeProvider theme={theme}> <Button type='submit' fullWidth variant='contained' color='primary' className={classes.submit} > {children} </Button> </MuiThemeProvider> ); }
const getMuiTheme = (darkTheme = false) => { const type = darkTheme ? 'dark' : 'light'; return createMuiTheme({ palette: createPalette({ type: type, primary: { light: purple[300], main: purple[500], dark: purple[700], }, secondary: { light: green[300], main: green[500], dark: green[700], }, }), }); }
function makeTheme({primary, secondary, primaryShade = 700, secondaryShade = 600}) { return createMuiTheme({ palette: { primary: { main: primary[primaryShade], }, secondary: { main: secondary[secondaryShade], }, }, }); }
const Rounded = theme => createMuiTheme({ ...theme, shape: { borderRadius: 8 } })
const customTheme = option => { return createMuiTheme({ ...defaultTheme, ...option }); }
const getMuiTheme = (darkTheme = false) => { const type = darkTheme ? 'dark' : 'light'; return createMuiTheme({ palette: createPalette({ type: type, primary: { light: purple[300], main: purple[500], dark: purple[700], }, secondary: { light: green[300], main: green[500], dark: green[700], }, }), }); }
const FormButton = ({ children }) => { const theme = createMuiTheme({ palette: { primary: { main: "#04786B", }, }, }); const classes = useStyles(); return ( <MuiThemeProvider theme={theme}> <Button type='submit' fullWidth variant='contained' color='primary' className={classes.submit} > {children} </Button> </MuiThemeProvider> ); }
export default function theme (type) { return createMuiTheme(