SmartGear Edison Components and Material-UI Theme.
bash
npm install --save @smartgear/edison
`
Usage
$3
`tsx
import React from 'react';
import { ThemeProvider, makeStyles } from '@smartgear/edison';
import { SmartgearIcons } from '@smartgear/icons';
import {
CssBaseline,
Card,
CardActions,
Button,
CardContent,
Typography,
CardHeader,
Avatar,
} from '@material-ui/core';
const App: React.FC = () => {
// By default, two themes are registerd:
// "Siemens (Light)" and "Siemens (Dark)"
const themeName = 'Siemens (Light)'
return (
);
}
const useStyles = makeStyles(theme => ({
root: {
left: 0,
right: 0,
marginTop: theme.spacing(10),
marginBottom: theme.spacing(10),
marginLeft: 'auto',
marginRight: 'auto',
maxWidth: '800px',
maxHeight: '800px',
},
}));
const AppContent: React.FC = () => {
const classes = useStyles();
return (
avatar={
}
>
This is a card
)
}
export default App;
`
$3
`tsx
import {
edisonThemeCreatorFactory,
SiemensBaseColors,
ThemeProvider,
getRegisteredThemeNames,
} from '@smartgear/edison'
import { Select, MenuItem, Typography } from '@material-ui/core';
import { useEdisonTheme } from '../src/hooks/useCustomTheme';
import { useLocalThemeName } from '../src/hooks/useLocalThemeName';
// The name of the theme you want to register
const myCustomThemeName = 'My Custom Theme Name';
// the edison theme creator factory generates the theme and
// then registers it into the list of supported themes.
// It can now be called
edisonThemeCreatorFactory(myCustomThemeName, {
palette: {
primary: {
main: SiemensBaseColors.Accent.BlueDark,
},
secondary: {
main: SiemensBaseColors.Accent.RedLight,
},
text: {
primary: '#F4F2E1',
},
background: {
default: '#ccd6db',
paper: '#495359',
},
type: 'dark',
},
})
const ThemeSelector: React.FC = () => {
const themeNames = getRegisteredThemeNames();
const [themeName, setThemeName] = useLocalThemeName();
const [theme] = useEdisonTheme();
const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
setThemeName(event.target.value as string);
};
return (
The current themes primary color is {theme.palette.primary.main}
value={themeName}
onChange={handleChange}
>
{
themeNames.map(name => (
))
}
)
}
const App: React.FC = () => {
return (
)
}
export default App;
``