0.1.0, stylific's approach to theming is similar to the one
suggested by Angular
You configure three themes:
warn. Each theme consists
of the main colour and two additional hues for "activated" and "selected"
For each given theme
X, the library creates two classes:
.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
Demo of some elements with the
<!-- ... --> <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"> <!-- ... -->
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"> <!-- ... -->
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:
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
and want it as a new theme. Modify the
$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):