To create a custom MUI email library CSS file, first install the MUI package with Bower:
$ bower install mui
Then create a SASS file that defines MUI variables and imports the MUI SASS definition:
// import MUI colors
@import "bower_components/mui/src/sass/mui/colors";
// customize MUI variables
$mui-primary-color: mui-color('purple', '500');
$mui-primary-color-dark: mui-color('purple', '700');
$mui-primary-color-light: mui-color('purple', '100');
$mui-accent-color: mui-color('green', 'A200');
$mui-accent-color-dark: mui-color('green', 'A100');
$mui-accent-color-light: mui-color('green', 'A400');
// import MUI email SASS
@import "bower_components/mui/src/email/mui-email-inline";
Now you can compile your custom SASS file:
$ sass custom.scss
| Colors | |
|---|---|
| Variable name | Default value |
| $mui-primary-color | mui-color('blue', '500') |
| $mui-primary-color-dark | mui-color('blue', '700') |
| $mui-primary-color-light | mui-color('blue', '100') |
| $mui-accent-color | mui-color('pink', 'A200') |
| $mui-accent-color-dark | mui-color('pink', 'A100') |
| $mui-accent-color-light | mui-color('pink', 'A400') |
| $mui-danger-color | mui-color('red', '500') |
| Layout | |
| Variable name | Default value |
| $mui-container-max-width | 600px |
| $mui-container-padding-horizontal | 15px |
| Scaffolding | |
| Variable name | Default value |
| $mui-body-bg-color | mui-color('white') |
| $mui-link-font-color | $mui-primary-color |
| $mui-link-text-decoration | none |
| $mui-hr-color | lighten(mui-color('black'), 88%) |
| Typography | |
| Variable name | Default value |
| $mui-base-font-color | lighten(mui-color('black'), 13%) |
| $mui-base-font-family | "Helvetica Neue", Helvetica, Arial, Verdana, "Trebuchet MS" |
| $mui-base-font-size | 14px |
| $mui-base-font-weight | 400 |
| $mui-base-line-height | 1.429 |
| $mui-base-letter-spacing | 0.001em |
| Text colors | |
| Variable name | Default value |
| $mui-text-dark | lighten(mui-color('black'), 13%) |
| $mui-text-dark-secondary | lighten(mui-color('black'), 46%) |
| $mui-text-dark-hint | lighten(mui-color('black'), 62%) |
| $mui-text-light | mui-color('white') |
| $mui-text-light-secondary | darken(mui-color('white'), 30%) |
| $mui-text-light-hint | darken(mui-color('white'), 70%) |
| $mui-text-accent | $mui-accent-color |
| $mui-text-accent-secondary | lighten($mui-accent-color, 13%) |
| $mui-text-accent-hint | lighten($mui-accent-color, 20%) |
| $mui-text-danger | $mui-danger-color |
| Buttons | |
| Variable name | Default value |
| $mui-btn-height | 36px |
| $mui-btn-height-lg | $mui-btn-height * 1.5 |
| $mui-btn-border-radius | 3px |
| $mui-btn-padding-horizontal | 26px |
| $mui-btn-default-bg-color | mui-color('white') |
| $mui-btn-default-font-color | $mui-base-font-color |
| $mui-btn-primary-bg-color | $mui-primary-color |
| $mui-btn-primary-font-color | mui-color('white') |
| $mui-btn-danger-bg-color | $mui-danger-color |
| $mui-btn-danger-font-color | mui-color('white') |
| $mui-btn-accent-bg-color | $mui-accent-color |
| $mui-btn-accent-font-color | mui-color('white') |
| $mui-btn-flat-bg-color | transparent |
| Panel | |
| Variable name | Default value |
| $mui-panel-bg-color | mui-color('white') |
| $mui-panel-padding | 15px |
| $mui-panel-border-radius | 0 |
| Dividers | |
| Variable name | Default value |
| $mui-divider-color | lighten(mui-color('black'), 88%) |