Vuesax has the main colors that are maintained throughout the application to facilitate the change and effective operation
We have a series of colors that are used by default. They include:
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).
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.
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.
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
Name | Type | Parameters | Description | default |
---|---|---|---|---|
$vs.theme | function | primary, success, danger, warning, dark | Change the color of the whole application and components (at run time). |