# Usage

# Theme initialization

To initialize your custom theme you need to include new-theme mixin on your root element (element to which your Vue root instance is attached to). new-theme mixin has following API: new-theme($theme-name, $theme-properties). $theme-properties is a map of your custom properties, i.e. colors or main font.

@use "~atomio-vue/dist/theming" as atomio-theming;

#app {
  @include atomio-theming.new-theme("primary-dark", (
    "color-main": #123123,
    "color-background": black,
    "font-main": Roboto
  )) {
    // your own styles or properties go here...
    --app-padding: 20px;
  };
}

As you can see, new-theme mixin also has a content slot, which you can use to specify styles or properties which should only be applied when specific theme is active.

You can define as many themes as you want. Every theme only creates properties which were provided, no unnecessary CSS is generated.

After you have initialized your themes in CSS, in order to apply them, you should set them in Atomio context. You can set initial theme when installing library (or just context):

//...
Vue.use(Atomio, {
    theming: {
        currentTheme: "primary"
    }
})
//...

Or you can dynamically change theme while the application is running via $atomio Vue instance property:

//...
changeTheme() {
    this.$atomio.theming.currentTheme = "primary-light"
}
//...

# Theming individual components

If you want to customize specific component, you can do so by including set-property/set-properties mixins. These mixins accept string name of a property, and a value. The only difference between plural form and singular form is that plural form accepts a map of properties.

@use "~atomio-vue/dist/theming" as atomio-theming;

#my-atomio-button {
  @include atomio-theming.set-properties((
    "color-main": #123123,
    "color-disabled-main": #321321,
    "font-main": Roboto
  ));
}

# Using theme properties

All theme properties and colors are available as Sass variables in theming module. You can use them in your own components.

@use "~atomio-vue/dist/theming" as atomio-theming;

#my-div {
  background-color: atomio-theming.$color-background;
}

These properties will react in same way when the theme changes or when you update them with set-property mixin.