To create a custom MUI 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 SASS
@import "bower_components/mui/src/sass/mui";
Now you can compile your custom SASS file:
$ sass custom.scss
| Global variables | |
|---|---|
| Variable name | Default value |
| $mui-include-globals | true |
| $mui-use-rem | true |
| $mui-body-bg-color | mui-color('white') |
| $mui-base-font-color | mui-color('black-alpha-87') |
| $mui-base-font-family | Arial, Verdana, Tahoma |
| $mui-base-font-size | 14px |
| $mui-base-font-weight | 400 |
| $mui-base-line-height | 1.429 |
| $mui-base-font-smoothing | false |
| $mui-link-font-color | $mui-primary-color |
| $mui-link-text-decoration | none |
| $mui-link-font-color-hover | $mui-primary-color-dark |
| $mui-link-text-decoration-hover | underline |
| $mui-cursor-disabled | not-allowed |
| $mui-border-radius-default | 2px |
| $mui-hr-color | mui-color('black-alpha-12') |
| $mui-abbr-border-color | $mui-primary-color |
| Media query breakpoints | |
| Variable name | Default value |
| $mui-screen-sm-min | 544px |
| $mui-screen-md-min | 768px |
| $mui-screen-lg-min | 992px |
| $mui-screen-xl-min | 1200px |
| Container sizes | |
| Variable name | Default value |
| $mui-container-sm | 570px |
| $mui-container-md | 740px |
| $mui-container-lg | 960px |
| $mui-container-xl | 1170px |
| Grid system | |
| Variable name | Default value |
| $mui-grid-columns | 12 |
| $mui-grid-gutter-width | 30px |
| $mui-grid-float-breakpoint | $mui-screen-sm-min |
| 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', 'A400') |
| $mui-accent-color-light | mui-color('pink', 'A100') |
| $mui-danger-color | mui-color('red', '500') |
| Text colors | |
| Variable name | Default value |
| $mui-text-dark | mui-color('black-alpha-87') |
| $mui-text-dark-secondary | mui-color('black-alpha-54') |
| $mui-text-dark-hint | mui-color('black-alpha-54') |
| $mui-text-light | mui-color('white') |
| $mui-text-light-secondary | mui-color('white-alpha-70') |
| $mui-text-light-hint | mui-color('white-alpha-30') |
| $mui-text-accent | rgba($mui-accent-color, .87) |
| $mui-text-accent-secondary | rgba($mui-accent-color, .54) |
| $mui-text-accent-hint | rgba($mui-accent-color, .38) |
| $mui-text-danger | $mui-danger-color |
| Appbar | |
| Variable name | Default value |
| $mui-appbar-height | 64px |
| $mui-appbar-height-xs-portrait | 56px |
| $mui-appbar-height-xs-landscape | 48px |
| $mui-appbar-bg-color | $mui-primary-color |
| $mui-appbar-font-color | mui-color('white') |
| Button | |
| Variable name | Default value |
| $mui-btn-height | 36px |
| $mui-btn-height-lg | $mui-btn-height * 1.5 |
| $mui-btn-border-radius | $mui-border-radius-default |
| $mui-btn-padding-horizontal | 26px |
| $mui-btn-margin-vertical | 6px |
| $mui-btn-spacing-horizontal | 8px |
| $mui-btn-default-bg-color | mui-color('white') |
| $mui-btn-default-font-color | $mui-base-font-color |
| $mui-btn-default-ripple-color | darken(mui-color('white'), 35%) |
| $mui-btn-primary-bg-color | $mui-primary-color |
| $mui-btn-primary-font-color | mui-color('white') |
| $mui-btn-primary-ripple-color | mui-color('white') |
| $mui-btn-danger-bg-color | $mui-danger-color |
| $mui-btn-danger-font-color | mui-color('white') |
| $mui-btn-danger-ripple-color | mui-color('white') |
| $mui-btn-flat-bg-color | transparent |
| $mui-btn-flat-bg-color-hover | darken(mui-color('white'), 5%) |
| $mui-btn-flat-ripple-color | darken(mui-color('white'), 35%) |
| $mui-btn-floating-bg-color | $mui-accent-color |
| $mui-btn-floating-font-color | mui-color('white') |
| $mui-btn-floating-ripple-color | mui-color('white') |
| Caret | |
| Variable name | Default value |
| $mui-caret-width | 4px |
| Dividers | |
| Variable name | Default value |
| $mui-divider-color | mui-color('black-alpha-12') |
| Dropdown | |
| Variable name | Default value |
| $mui-dropdown-bg-color | mui-color('white') |
| $mui-dropdown-border-color | $mui-divider-color |
| $mui-dropdown-border-radius | $mui-border-radius-default |
| $mui-dropdown-link-font-color | $mui-base-font-color |
| $mui-dropdown-link-font-color-hover | darken($mui-dropdown-link-font-color, 5%) |
| $mui-dropdown-link-font-color-active | $mui-accent-color |
| $mui-dropdown-link-font-color-disabled | mui-color('grey', '200') |
| $mui-dropdown-link-bg-color-hover | mui-color('grey', '200') |
| $mui-dropdown-link-bg-color-active | mui-color('white') |
| Form | |
| Variable name | Default value |
| $mui-form-legend-font-size | $mui-base-font-size * 1.5 |
| $mui-form-legend-margin-bottom | $mui-form-legend-font-size / 2 |
| $mui-form-legend-font-color | $mui-base-font-color |
| $mui-form-group-margin-bottom | 20px |
| $mui-label-font-size | 12px |
| $mui-label-font-color | mui-color('black-alpha-54') |
| $mui-label-margin-bottom | 3px |
| Input | |
| Variable name | Default value |
| $mui-input-bg-color | transparent |
| $mui-input-bg-color-disabled | transparent |
| $mui-input-font-color | $mui-base-font-color |
| $mui-input-font-size | 16px |
| $mui-input-height | 32px |
| $mui-input-placeholder-color | rgba(mui-color('black'), 0.26) |
| $mui-input-border-color | $mui-input-placeholder-color |
| $mui-input-border-color-focus | $mui-primary-color |
| Overlay | |
| Variable name | Default value |
| $mui-overlay-bg-color | rgba(mui-color('black'), 0.20) |
| Panel | |
| Variable name | Default value |
| $mui-panel-bg-color | mui-color('white') |
| $mui-panel-padding | 15px |
| $mui-panel-border-radius | 0 |
| Select | |
| Variable name | Default value |
| $mui-select-menu-font-size | $mui-input-font-size |
| $mui-select-menu-bg-color | mui-color('white') |
| $mui-select-menu-item-height | $mui-select-menu-font-size + 26px |
| $mui-select-menu-item-bg-color-selected | mui-color('grey', '200') |
| $mui-select-menu-item-bg-color-hover | mui-color('grey', '300') |
| Table | |
| Variable name | Default value |
| $mui-table-cell-padding | 10px |
| $mui-table-border-color | $mui-divider-color |
| Tabs | |
| Variable name | Default value |
| $mui-tab-font-color | $mui-base-font-color |
| $mui-tab-font-color-active | $mui-primary-color |
| $mui-tab-border-color-active | $mui-primary-color |
| Textarea | |
| Variable name | Default value |
| $mui-textarea-height | 64px |