色彩

Vuesax has the main colors that are maintained throughout the application to facilitate the change and effective operation
Vuesax具有在整个应用程序中保持的主要颜色，以促进更改和有效操作

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.
  我们几乎总是需要使用自己的颜色的个性化应用程序。在Vuesax中，您可以将主要颜色更改为所需的颜色以及应用程序的商标。

When starting Vuesax tell it to use your colors. We add the new colors as parameters.
启动Vuesax时，告诉它使用您的颜色。我们添加新颜色作为参数。

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.仅支持> RGB和> HEX颜色。

Example of the result

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.

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 parenthesesFor 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

API