# Themes and styles

Since its version 0.9.0, zircle-ui uses the SASS preprocessor for development. The output is a zircle.css file automatically generated by vue-cli 3. You can find it in the /dist folder. The sass files are under the src/css folder.

# Built-in themes and styles

# Themes

zircle-ui provides some themes under the hood. The themes are divided by colors:

• .color--white
• .color--light-blue
• .color--blue
• .color--green
• .color--orange
• .color--yellow
• .color--red
• .color--purple
• .color--black (default)
• .color--gray

Each theme is a CSS class that wraps three CSS variables:

.theme-green {
  --shade-color: #f6fbf6;
  --primary-color: #69bf66;
  --accent-color: #2b6329
}

• You can invoke the zircle-ui action getTheme() to retrieve the current theme.

# See

• Tutorial - Settings view

# Theme modes

In addtion, zircle-ui has four theme modes. This modes allow to modify the selected theme to change the contrast:

The themes modes are:

• .mode-light for light backgrounds.
• .mode-light-filled for light backgrounds and filled views.
• .mode-dark for dark backgrounds (default).
• .mode-dark-filledfor dark backgrounds and filled views.

As happens with the themes, each theme mode is a CSS class that four CSS variables

.mode-light {
  --main-text-and-border-color: var(--primary-color);
  --main-color: var(--shade-color);
  --accent-text-and-border-color: var(--accent-color);
  --background-color: var(--shade-color)
}

• You can invoke the zircle-ui action getThemeMode() to retrieve the current theme mode.

# See:

• Tutorial - Settings view

# General purpose styles

Finally, zircle-ui offers some general purpose styles to use in your project.

The styles are:

• .primary
• .accent
• .success
• .warning
• .danger

# Changing up themes, modes and shapes

By default the preseted theme is black, the theme mode is dark and the shape is circle. You can set up your prefered theme and theme mode using the zircle-ui action config()

new Vue({
  /* ...  */
  mounted () {
    this.$zircle.config({
      style: {
        theme: 'red',
        mode: 'light-filled',
        shape: 'square'
      }
    })
  }
})

# See:

• $zircle.config()

# Customization

# Customize themes

The easiest way to adapt the themes to your needs is to override the color CSS classes or create a new color themes:

.theme-ferrari {
  --shade-color: red;
  --primary-color: yellow;
  --accent-color: black
}

# Customize zircle's built-in components

In you project you can add a custom css class or an inline style attribute using the styles provided. Also, you can define any other.

<z-spot
  class="success"
  :angle="-145"
  to-view="status">
    <span style="color: var( --accent-color)">2</span>
</z-spot>

# See:

• Tutorial - Home view

# SASS files

Currently, zircle-ui has two SASS files

• themes.sass
• styles.sass