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
secondary
var(--va-secondary)#666E75
success
var(--va-success)#3D9209
warning
var(--va-warning)#FFD43A
danger
var(--va-danger)#E42222
info
var(--va-info)#158DE3
background
Background colors are used to define the background of the page, cards, modals, dropdowns, and other elements.
backgroundPrimary
var(--va-background-primary)#FFFFFF
backgroundSecondary
var(--va-background-secondary)#FFFFFF
backgroundElement
var(--va-background-element)#ECF0F1
backgroundBorder
var(--va-background-border)#DEE5F2
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
textInverted
var(--va-text-inverted)#FFFFFF
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)
focus
var(--va-focus)#49A8FF
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](https
createVuestic({
config: {
colors: {
presets: {
light: {
primary: '#f0f0f0',
myCoolColor: '#f00f0f',
}
}
},
},
})
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 |
12:00 pm
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.
Modify colors #
You can modify colors using utilities from useColors
. You can check example below: