styles.md

Dealing with SVMD's styles

Basic Usage

Just include svmd/dist/svmd.css in your app:

import 'svmd/dist/svmd.css';

Sass files

You may want to import sass files, for the sake of customization. svmd/src/sass/index.scss includes styles for every single component:

@import 'svmd/src/sass/index';

Or, you can import styles for every individual component:

@import 'svmd/src/sass/Button';
@import 'svmd/src/sass/Slider';
@import 'svmd/src/sass/Fab';
@import 'svmd/src/sass/TopAppBar';

NOTE: Usually modules are prefixed with a tilde (like @import '~svmd/src/sass/index'), but you can't do with SVMD. You should use node-sass with includePaths option. (Solution for Rollup users)

Changing theme colors

There are two ways for customizing the colors of your app:

CSS Variables

:root {
  --mdc-theme-primary: red;
  --mdc-theme-secondary: blue;
}

See the docs on material.io for more info.

Sass variables

Just change the variables before importing the components:

$mdc-theme-primary: red;
$mdc-theme-secondary: blue;
@import 'svmd/src/sass/index';

If you want to import colors from the material design palette, use the following approach:

// actually it's a dependency of SVMD:
@import '@material/theme/color-palette';
$mdc-theme-primary: $material-color-indigo-500;
// ...

See the docs on material.io about Sass customization for more info.