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 that are used by default. They include:
- primary
- success
- danger
- warning
- dark
For each color, we think has its functionality in the application as alerts of errors (danger), warnings to the user (warning), communications of approval (success), or main color of the application (primary).
- primary
- success
- danger
- warning
- dark
Customize Theme Colors
We almost always 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 tell it to use your colors. 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)' // my new color
})
By doing this, all Vuesax components in the application that use a primary color with change.
Select one of the colors to change it and that all the components of this documentation have that color.
- Primary
- Success
- Danger
- Warning
- Dark
Change Colors SSR
To change the main colors in SSR (Server-Side Rendering) for example if you are using nuxt.js the main variables of stylus and those of css
To change the variables we must first import them into a .styl file and change the values of the variables by the colors required
WARNING
In order to change the variables and use them you have to have implemented the stylus loaders, to implement them by npm would be something like this
npm i stylus stylus-loader --save-dev
WARNING
The value of the colors can only be RGB and nothing else is added to the number without the letters rgb or the parentheses
For example if the color is rgb(50,100,200) the value to be implemented is only: 50,100,200
// main.styl
@import '~vuesax/dist/style/vuesax.styl'
$vs-primary = 50,100,200
:root {
--vs-primary: $vs-primary
}
TIP
The stylus variables of the main colors are:
$vs-primary
$vs-success
$vs-danger
$vs-warning
$vs-dark
and the css variables are:
--vs-primary
--vs-success
--vs-danger
--vs-warning
--vs-dark