Theme

You can use theming at the top level of an application and to create a theme for a component library.

When importing a stylesheet use-st-theme directive to add its look and feel to your stylesheet. Any CSS definitions written inside the imported stylesheet are output to the final CSS.

/* CSS */
@namespace "project";
:import {
    -st-theme: true;
    -st-from: './theme.st.css';
}

Override classes

Any shared classes and component variants defined at the theme level can be overridden in our stylesheet by simply redefining them.

/* CSS */
@namespace "project";
:import {
    -st-theme: true;
    -st-from: 'comp-lib/backoffice-theme.st.css';
    -st-named: emphasisBox, mainGallery;
}
.mainGallery { /* component variant extends Gallery */
    background: black;
}
.mainGallery::navButton {
    color: white;
}
.emphasisBox {
    border: 5px dashed black;
}

Override theme variables (experimental)

Any variable defined in a theme file can be overridden. Every CSS declaration that uses that variable is overridden under our stylesheet.

/* CSS */
@namespace "project";
:import {
    -st-theme: true;
    -st-from: 'comp-lib/backoffice-theme.st.css';
    color1: black; /* override color1 with black */
    color2: purple; /* override color2 with purple */
}