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