Our team will be speaking at MadVue – The Vue.js Event in Madrid! Don’t miss it, join us!
🎟️ Get you ticket

Colors
#

Developing an effective and user-friendly color scheme can be a challenging task. The Vuestic UI component library aims to make this process simpler and more convenient by providing a versatile set of colors that are easy to customize and manage.

Color Palette
#

Vuestic UI library offers a color palette consisting of 14 colors. These colors are divided into accent colors, background colors, text colors and utility colors. By default, there are two color presets available: light and dark.

accent

Accent colors are used to highlight interactive elements such as buttons, links, and other interactive elements.

primary

var(--va-primary)#154EC1

Accent color used on button, links and other interactive elements

secondary

var(--va-secondary)#666E75

Accent color used on non important interactive elements

success

var(--va-success)#3D9209

Accent color for success validation, alerts or toasts

warning

var(--va-warning)#FFD43A

Accent color for warning toasts or alerts

danger

var(--va-danger)#E42222

Accent color for error validation, alerts or toasts

info

var(--va-info)#158DE3

Accent color for info toasts or alerts
background

Background colors are used to define the background of the page, cards, modals, dropdowns, and other elements.

backgroundPrimary

var(--va-background-primary)#FFFFFF

Page background

backgroundSecondary

var(--va-background-secondary)#FFFFFF

Card, Modal, Dropdown background

backgroundElement

var(--va-background-element)#ECF0F1

Input, switch, divider background colors

backgroundBorder

var(--va-background-border)#DEE5F2

Used as border color in elements like input, switch etc.
text

Text colors are used to define the main and alternative text colors. Vuestic automatically choose correct text color based on background color.

textPrimary

var(--va-text-primary)#262824

Main text used on page. Used as default color on background colors.

textInverted

var(--va-text-inverted)#FFFFFF

Used as text color, if textPrimary doesn't have enough contrast with background color.
utility

Utility colors are used to define the color of shadows and keyboard focus outline.

shadow

var(--va-shadow)rgba(0, 0, 0, 0.12)

Color of shadows that used in elements like cards, modals etc.

focus

var(--va-focus)#49A8FF

Keyboard focus outline color

Auto text color detection
#

With auto text color detection you don't need to worry about text readability. Vuestic UI library will automatically detect the best text color for you.

We use threshold property to detect if text should be dark or light. It used as a lightness value. If lightness value is less than threshold we assume it is dark background and text color must be light. Otherwise, text color must be dark.

Primary
Warning
Success
CustomColor
threshold

In case threshold is not enough for you, you can set onPrimary, onSuccess, onBackgroundPrimary and other colors in colors config.

Customization
#

There is the flexibility to modify or expand upon the existing color set, as well as define own custom color presets. The color scheme can be applied globally using a Colors Config

createVuestic({
  config: {
    colors: {
      presets: {
        light: {
          primary: '#f0f0f0',
          myCoolColor: '#ff00ff',
          onMyCoolColor: '#ffffff',
        }
      }
    },
  },
})

Read more about Colors Config

Making a global theme switcher
#

You can use useColors composable function to make a theme switcher. applyPreset method will change theme globally. You can check example below:

Get started

Amount
Package
Review
SU
MO
TU
WE
TH
FR
SA
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

12:00 pm

Primary color:
Dark mode:
Open in GitHub

Making a local theme switcher
#

Color preset can be provided using VaConfig for specific part of application:

Logo
Primary color:
Open in GitHub

CSS Variables
#

In case you need custom component that will follow Vuestic theme, you can use CSS variables. CSS variables are reactive and can be also scoped using VaConfig.

Accent gradient
Open in GitHub

Modify colors
#

You can modify colors using utilities from useColors. You can check example below:

Accent gradient
Open in GitHub