@acrsolutions/chat-components
Version:
Un set di componenti per la creazione di un'applicazione di messaggistica
96 lines (95 loc) • 3.5 kB
JavaScript
import { createTheme } from '@mui/material/styles';
/**
*
* @param customTheme : il tema personalizzato da adattare. Può essere un tema parziale o completo.
* @returns un tema completo per Styled Components, pronto per essere utilizzato.
* La funzione traduce un oggetto tema personalizzato in un oggetto tema compatibile con Styled Components.
* @returns
*/
export const adaptToStyledTheme = (customTheme) => ({
palette: {
light: customTheme.palette.light,
dark: customTheme.palette.dark,
primary: {
main: customTheme.palette.primary.main,
dark: customTheme.palette.primary.dark,
contrastText: customTheme.palette.primary.contrastText,
},
secondary: {
main: customTheme.palette.secondary.main,
dark: customTheme.palette.secondary.dark,
contrastText: customTheme.palette.secondary.contrastText,
},
success: {
main: customTheme.palette.success.main,
dark: customTheme.palette.success.dark,
contrastText: customTheme.palette.success.contrastText,
},
error: {
main: customTheme.palette.error.main,
dark: customTheme.palette.error.dark,
contrastText: customTheme.palette.error.contrastText,
},
accent: {
main: customTheme.palette.accent.main,
dark: customTheme.palette.accent.dark,
contrastText: customTheme.palette.accent.contrastText,
},
grey: {
100: customTheme.palette.grey[100],
200: customTheme.palette.grey[200],
300: customTheme.palette.grey[300],
400: customTheme.palette.grey[400],
500: customTheme.palette.grey[500],
600: customTheme.palette.grey[600],
700: customTheme.palette.grey[700],
800: customTheme.palette.grey[800],
900: customTheme.palette.grey[900],
},
// altri mapping
},
zIndex: {
popper: customTheme.zIndex.popper,
modal: customTheme.zIndex.modal,
header: customTheme.zIndex.header,
footer: customTheme.zIndex.footer,
},
});
//nell'adattamento Mui, info = accent
export function adaptToMuiTheme(customTheme) {
const { palette, zIndex } = customTheme;
return createTheme({
palette: {
primary: {
main: palette.primary.main,
dark: palette.primary.dark,
contrastText: palette.primary.contrastText,
},
secondary: {
main: palette.secondary.main,
dark: palette.secondary.dark,
contrastText: palette.secondary.contrastText,
},
error: {
main: palette.error.main,
dark: palette.error.dark,
contrastText: palette.error.contrastText,
},
success: {
main: palette.success.main,
dark: palette.success.dark,
contrastText: palette.success.contrastText,
},
info: {
main: palette.accent.main,
dark: palette.accent.dark,
contrastText: palette.accent.contrastText,
},
},
zIndex: {
modal: zIndex.modal,
appBar: zIndex.header,
drawer: zIndex.footer, // se non usi drawer puoi ometterlo
},
});
}