Changing the theme for the components

Our design system accepts theming via scss variables. To change a theme for a component, you'll just need to override the corresponding theme variable.

To do that, take a look at which are the default themes in our _settings.scss file, and which themes are available for the components in the _colors.scss file.

To change the themes, you may need to import our variables files before overwriting. To properly overwrite the Button theme, for example, you may need to do something like this:

// first, import the color variables file
@import "~labsystem/scss/variables/_colors";
// then, overwrite the theme variable
// if you want to override all of them, overwrite the $default-theme variable
$button-theme: $purple-palette;
// finally, import the rest of the styles
@import "~labsystem/scss/main";