How to change colors of a tempa element plus in nuxt3?

Question

We have a Nuxt3 installation and we are trying to use Element ui.

We would like to know how we can change the colors.

I tried to enter the site that customizes the themes, but it is not working.

https://element.eleme.io/#/en-US/theme

I also tried including the change inside a var.css file

Create a new style file in assets/css/index.scss

Imported in css: ['~/assets/scss/index.scss' ] on nuxt.config file

Nothing happens.

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  )
);

Answer 1

Resolved.

$colors: (
        'primary': (
                'base': #ff8900,
        ),
        'success': (
                'base': #13ce66,
        ),
        'warning': (
                'base': #ffba00,
        ),
        'danger': (
                'base': #ff4949,
        ),
        'error': (
                'base': #db2828,
        ),
        'info': (
                'base': #42b8dd,
        ),
);

@forward "element-plus/theme-chalk/src/common/var.scss" with (
// do not use same name, it will override.
$colors: $colors
);

@use "element-plus/theme-chalk/src/index.scss" as *;