Overview

Starting with 0.1.0, stylific's approach to theming is similar to the one suggested by Angular Material.

You configure three themes: primary, accent, and warn. Each theme consists of the main colour and two additional hues for "activated" and "selected" states.

For each given theme X, the library creates two classes: .theme-X and .theme-text-X. The text theme only changes the text colour, automatically adjusting it to a luminosity comfortably contrasting the default background colour. The "full" theme uses the theme colour for the background, automatically selecting a text colour that contrasts it.

Each theme is configurable, and you can also register additional themes. In addition, you can adjust the text and background colour with variables. See _variables.scss and colors.scss.

Text Themes

Demo of some elements with the .theme-text-* themes.

<!-- ... -->
<button class="theme-text-primary">text-primary button</button>
<div class="theme-text-primary">text-primary text</div>
<input class="theme-text-primary" value="text-primary input">
<!-- ... -->

Full Themes

Demo of some elements with the full themes.

<!-- ... -->
<button class="theme-primary">`primary` button</button>
<div class="theme-primary">`primary` text</div>
<input class="theme-primary" value="`primary` input">
<!-- ... -->

Custom Configuration

To use a custom theme, you need to import stylific into your .sass source and configure it with variables.

Each colour is defined as a map with three hues: default, active, and selected. The active and selected hues are used on interactive elements.

Suppose we want to change the primary tune:

$sf-color-map-primary: (
  name: 'primary',
  default: darkblue,
  active: lighten(darkblue, 10%),
  selected: lighten(darkblue, 20%)
);

We can also add more themes. Suppose you wrote a $sf-color-map-success colour and want it as a new theme. Modify the $sf-color-map variable:

$sf-color-map-success: (...);
$sf-color-maps: $sf-color-map-primary, $sf-color-map-accent, $sf-color-map-warn, $sf-color-map-success;

Then you can use the success theme in your HTML:

<button class="theme-text-success">text theme</button>
<button class="theme-success">full theme</button>

You can also change the base text and background colours:

$sf-color-text: white;
$sf-color-background: black;

After defining all variables, import stylific and let it take care of the rest (the path will depend on your package and build configuration):

@import './node_modules/stylific/scss/stylific';