Colors

Classes

Each color gets its own text and background variant. You can use these classes in your application like <div class='red' /> for red background and <span class='red-text' />. These colors are defined over here.

You can also change the variant of the background color by adding the class: {lighten|darken}-{n} and change the accent by adding the class accent-{n}

To change the variant of the text color by adding the class: text-{lighten|darken}-{n} and change the accent by adding the class accent-{n}

You can also do the same for theme colors such as primary-color for background color and primary-text for text color.

<!-- backgrounds -->
<div class="red">Red</div>
<div class="yellow lighten-4">Light yellow</div>
<div class="deep-purple accent-1">Deep Purple</div>
<div class="primary-color">Primary</div>

<!-- text -->
<div class="red-text">Red</div>
<div class="yellow-text text-lighten-4">Light yellow</div>
<div class="deep-purple-text text-accent-1">Deep Purple</div>
<div class="primary-text">Primary</div>

Scss

To add material colors in your own styles, just include the scss file.

@import 'svelte-materialify/src/styles/tools/colors';

h1 {
  color: material-color('red', 'base');
  background-color: material-color('green', 'lighten-5');
}

Javascript

You can also import colors from the included utility in javascript if you wish to do so.

import colors from 'svelte-materialify/src/utils/colors';
let red = colors.red.base;
let lightRed = colors.red['lighten-1'];

import { deepPurple } from 'svelte-materialify/src/utils/colors';
let purple = deepPurple.base;

Color Pack