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

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:

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 and modes

By default the preseted theme is black and the theme modedark. 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'
      }
    })
  }
})

See:

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
}

TIP

You don't need to change the theme modes.

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:

SASS files

Currently, zircle-ui has two SASS files