Colors config
#

You can personalize colors that are used in your app. The colors used by Vuestic components may be redefined dynamically. You can also add your own colors that you intend to use frequently in your app.

For example, you can change the primary color that is used by almost all Vuestic components.

Pick a different primary color below and notice how the colors are changing all over the page.

#154EC1

Reactivity
#

Methods like getColors return a computed reactives that can also be accessed by variable colors. The advantage is allow to change properties, instead of rewriting whole colors variable. For example, you can change primary color by writing colors.primary = "#ff0". Multiple properties changes are also supported, you can write setColors({'{ primary: "#00f", secondary: "#0ff" }'}).

Adding new colors
#

You can add new colors and use your custom colors in Components config.

import { createVuestic } from "vuestic-ui";

createApp(App)
  .use(
    createVuestic({
      config: {
        colors: {
          variables: {
            primary: "#ff00ff",
            button: "#000",
          },
        },
        components: {
          VaButton: {
            color: "button",
          },
        },
      },
    })
  )
  .mount("#app");

The same works for Icons config.

import { createVuestic, createIconsConfig } from 'vuestic-ui'

createApp(App)
  .use(createVuestic({
    config: {
      colors: {
        variables: {
          success: '#0fb',
          'player-icon': '#aaa',
        }
      },
      icons: createIconsConfig({
        aliases: [
          {
            name: 'prev',
            to: 'fa4-prev',
            color: 'player-icon',
          },
          {
            name: 'play',
            to: 'fa4-play',
            color: 'success',
          }
        ],
        fonts: [...],
      })
    }
  }))
  .mount('#app')

Getting typings for custom colors
#

Color config is fully typed and provides type safety and autocompletion for all instances where color is specified. Color typings could be extended with your custom colors to rip the same benefits via Typescript Module augmentation.

declare module 'vuestic-ui' {
  interface CustomColorVariables {
    newColor: string
  }
}

Colors config service API
#

Types
#

name	type	description
CssColor	`string`	A valid CSS color.
EssentialVariables	`Record<string, CssColor>`	An object where the keys are the color names and values are valid CSS colors.
ColorVariables	`{ [colorName: string]: CssColor } & EssentialVariables`	An object where the keys are the color names and values are valid CSS colors.
ColorConfig	`{ variables: ColorVariables, threshold: number, presets: Record<string, ColorVariables>, currentPresetName: string, }`	Configuration object where is defined color variables, threshold, presets and current preset name.

useColors hook methods.
#

method	type	description
applyPreset	`(presetName: string) => void`	Applies preset by its name to the colors config.
setColors	`(colors: Partial<ColorVariables>) => void`	Used to merge new colors into config or update existing colors.
getColors	`() => ColorVariables`	Returns current color config.
getColor	`(prop?: string, defaultColor?: string, preferVariables?: boolean) => CssColor`	Return color by name.
getComputedColor	`(color: string) => ComputedRef(CssColor)`	Returns compute color from colors variables.
getBoxShadowColor	`(color: ColorInput, opacity = 0.4) => string`	Return a color that is appropriate to be used for the `box-shadow`.
getBoxShadowColorFromBg	`(background: ColorInput, opacity = 0.4) => string`	Return a color that is appropriate to be used for the `box-shadow`.
getHoverColor	`(color: ColorInput, opacity = 0.2) => string`	Return a color that you can use as a `hover` color.
getFocusColor	`(color: ColorInput, opacity = 0.3) => string`	Return a color that you can use as a `focus` color.
getGradientBackground	`(color: string) => string`	Return a gradient-color that you can use as a `background-image` CSS property's value.
getTextColor	`(color: ColorInput, darkColor?: string, lightColor?: string) => string`	Returns a color depending on the background lightness.
shiftHSLAColor	`(color: ColorInput, offset: { h?: number; s?: number; l?: number; a?: number }) => string`	Returns shifted HSLA color.
setHSLAColor	`(color: ColorInput, newColor: { h?: number; s?: number; l?: number; a?: number }) => string`	Sets HSLA color.
colorsToCSSVariable	`(colors: { [colorName: string]: string \| undefined }, prefix = 'va') => Record<string, string>`	Converts object of colors to the object of named css variables.
colorToRgba	`(color: string, maskColor: string, maskOpacity: number) => string`	Converts named color to the `rgba` string.
getStateMaskGradientBackground	`(color: string, maskColor: string, maskOpacity: number) => string`	Returns a CSS linear-background value for the `background-image` property.

useColors hook variables.
#

variable	type	description
colors	`ColorVariables`	A computed reactive where the keys are color names and values are valid CSS colors.
currentPresetName	`ComputedRef<string>`	A computed reactive where the keys are color names and values are valid CSS colors.
presets	`ComputedRef<Record<string, ColorVariables>>`	A computed reactive where the keys are color names and values are valid CSS colors.

Colors config #

Reactivity #

Adding new colors #

Getting typings for custom colors #

Colors config service API #

Types #

useColors hook methods. #

useColors hook variables. #