Vuestic UI comes with a convenient mechanism that allows for a deep icons, components, and colors customization.

Color themes

You can easily modify the colors used by Vuestic UI components (and even add custom ones):

Icon fonts

By default Vuestic UI uses material icons, so make sure to install the package:

After installing the material icons package, you need to import its styles into the main.js file.

Using custom icons

With icons config you can use any icon font youโ€™d like by simply transforming the icon names to respective props.

Custom classes for the colors

By default, Vuestic UI creates custom classes for coloring the text and background colors of elements relative to the global color configuration.

Configuring the custom classes

With custom classes configuration you can create and/or use classes with styles associated with the global color configuration

Components config

If you want to set global defaults for Vuestic components or create presets โ€” we have config for this as well!

Letโ€™s say you want all of your buttons to be outline and small to match your design, but by default thatโ€™s not the case:

Open in GitHub

To solve that problem edit to main.js file the following way:

Now all of your buttons by default will look like this:

Open in GitHub

You can configure any prop for any Vuestic UI component in such a manner.

In case your customization runs deeper consider overriding CSS variables or even directly the .classโ€™ properties (components use BEM-notation so it should be easy to figure out which selector to address with the help of standard dev-tooling).