get_app Download

# 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
Edit this page

API #

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).

Icon keyboard_arrow_right