Themes and styles


I've been working on a new zooming library.

Give Zumly a try and joing our community at

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


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.


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.


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 () {
      style: {
        theme: 'red',
        mode: 'light-filled'



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


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.



    <span style="color: var( --accent-color)">2</span>


SASS files

Currently, zircle-ui has two SASS files