Colors

Vuesax has the main colors that are maintained throughout the application to facilitate the change and effective operation

Colors Defaults

We have a series of colors by default to start the application that are:

  • primary
  • success
  • danger
  • warning
  • dark

Each of them we think has its functionality in the application as alerts of errors (danger), warnings to the user (warning), communications of approval (success), main color of the application (primary)

  • primary
  • success
  • danger
  • warning
  • dark

Customize Theme Colors

Almost always we need a personalized application with own colors, in vuesax you can change the main colors to those that you need and the branding that your application has.

when starting vuesax and tell it again to use it, we add the new colors as parameters.

Vue.use(Vuesax, {
  theme:{
    colors:{
      primary:'#5b3cc4',
      success:'rgb(23, 201, 100)',
      danger:'rgb(242, 19, 93)',
      warning:'rgb(255, 130, 0)',
      dark:'rgb(36, 33, 69)'
    }
  }
})

WARNING

Only RGB and HEX colors are supported.

Example of the result

  • primary
  • success
  • danger
  • warning
  • dark

Change Colors

You can change the color of the application in process of execution with the function $vs.theme which as a parameter requires a json with the colors to change

imagine that in the middle of the application we want the primary color change would be something like this:

this.$vs.theme({
  primary:'rgb(5, 173, 88)' // myColorNew
})

By doing this all the primary color of the application will change including all the vuesax components.

Select one of the colors to change it and that all the components of this documentation have that color.

  • Primary
  • Success
  • Danger
  • Warning
  • Dark

API #

NameTypeParametersDescriptiondefault
$vs.themefunctionprimary, success, danger, warning, darkChange the color of the whole application and components (at run time).