Style Defines core of theme. How theme is being set using Material-UI.
Customize Berry with your theme. You can change the colors, the typography, and much more. Material-UI provides flexibility to change the style of the project in a single place and on top of it, we made it more centralized and consistent by proper file structure.
You might don't need to update anything in..\src\themes
unless wanted to have separate theming.
Theme configuration
The whole theme can be configured from the folder ..\src\themes
. Theme initialization starts in index.jsx
, where palette, typography, and component's overridable style exist.
JavaScript Typescript
Copy // project import
import useConfig from 'hooks/useConfig' ;
import Palette from './palette' ;
import Typography from './typography' ;
... .
export default function ThemeCustomization ({ children }) {
const { borderRadius , fontFamily , mode , outlinedFilled , presetColor , themeDirection } = useConfig ();
...
const themeOptions = useMemo (
() => ({
direction : themeDirection ,
palette : theme .palette ,
mixins : {
toolbar : {
minHeight : '48px' ,
padding : '16px' ,
'@media (min-width: 600px)' : {
minHeight : '48px'
}
}
} ,
typography : themeTypography ,
customShadows : themeCustomShadows
}) ,
[themeDirection , theme , themeCustomShadows , themeTypography]
);
... .
}
Copy // project import
import useConfig from 'hooks/useConfig' ;
import Palette from './palette' ;
import Typography from './typography' ;
... .
export default function ThemeCustomization ({ children } : Props ) {
...
const themeCustomShadows: CustomShadowProps = useMemo<CustomShadowProps>(() => customShadows(mode, theme), [mode, theme]);
const themeOptions : ThemeOptions = useMemo (
() => ({
direction : themeDirection ,
palette : theme .palette ,
mixins : {
toolbar : {
minHeight : '48px' ,
padding : '16px' ,
'@media (min-width: 600px)' : {
minHeight : '48px'
}
}
} ,
typography : themeTypography ,
customShadows : themeCustomShadows
}) ,
[themeDirection , theme , themeCustomShadows , themeTypography]
);
... .
}
As you can see colors for the theme came from the central location import value from '../assets/scss/_themes-vars.module.scss';
:themes-vars.module.scss
Copy // paper & background
$paper: #ffffff;
// primary
$primaryLight: #e3f2fd;
...
// secondary
$secondaryLight: #ede7f6;
...
// success Colors
$successLight: #b9f6ca;
...
// error
$errorLight: #ef9a9a;
...
// orange
$orangeLight: #fbe9e7;
...
// warning
$warningLight: #fff8e1;
...
// grey
$grey50: #fafafa;
...
//-----------------------|| DARK THEME VARIANTS | |-----------------------//
// paper & background
$darkBackground: #1a223f; // level 3
$darkPaper: #111936; // level 4
// dark 800 & 900
$darkLevel1: #29314f; // level 1
$darkLevel2: #212946; // level 2
// primary dark
$darkPrimaryLight: #e3f2fd;
...
// secondary dark
$darkSecondaryLight: #d1c4e9;
...
// text variants
$darkTextTitle: #d7dcec;
...
//-----------------------|| JAVASCRIPT | |-----------------------//
:export {
// paper & background
paper : $paper ;
// primary
primaryLight : $primaryLight ;
primary 200 : $primary200 ;
primaryMain : $primaryMain ;
primaryDark : $primaryDark ;
primary 800 : $primary800 ;
// secondary
secondaryLight : $secondaryLight ;
secondary 200 : $secondary200 ;
secondaryMain : $secondaryMain ;
secondaryDark : $secondaryDark ;
secondary 800 : $secondary800 ;
// success
successLight : $successLight ;
success 200 : $success200 ;
successMain : $successMain ;
successDark : $successDark ;
// error
errorLight : $errorLight ;
errorMain : $errorMain ;
errorDark : $errorDark ;
// orange
orangeLight : $orangeLight ;
orangeMain : $orangeMain ;
orangeDark : $orangeDark ;
// warning
warningLight : $warningLight ;
warningMain : $warningMain ;
warningDark : $warningDark ;
// grey
grey 50 : $grey50 ;
grey 100 : $grey100 ;
grey 200 : $grey200 ;
grey 300 : $grey300 ;
grey 500 : $grey500 ;
grey 600 : $grey600 ;
grey 700 : $grey700 ;
grey 900 : $grey900 ;
//-----------------------|| DARK THEME VARIANTS ||-----------------------//
// paper & background
darkPaper : $darkPaper ;
darkBackground : $darkBackground ;
// dark 800 & 900
darkLevel 1 : $darkLevel1 ;
darkLevel 2 : $darkLevel2 ;
// text variants
darkTextTitle : $darkTextTitle ;
darkTextPrimary : $darkTextPrimary ;
darkTextSecondary : $darkTextSecondary ;
// primary dark
darkPrimaryLight : $darkPrimaryLight ;
darkPrimaryMain : $darkPrimaryMain ;
darkPrimaryDark : $darkPrimaryDark ;
darkPrimary 200 : $darkPrimary200 ;
darkPrimary 800 : $darkPrimary800 ;
// secondary dark
darkSecondaryLight : $darkSecondaryLight ;
darkSecondaryMain : $darkSecondaryMain ;
darkSecondaryDark : $darkSecondaryDark ;
darkSecondary 200 : $darkSecondary200 ;
darkSecondary 800 : $darkSecondary800 ;
}
You can check other settings like theme typography, palette, and components style override in the same folder. ..src\themes
How to customize it?
You might come across questions like how to change a theme's primary color? How to change textbox or other components which can apply to an entire theme? Check below for each of your need:
Last updated 3 months ago