How to Change Element Colours?

[coofercat]

This is possibly a simple question, but having read the documentation I can't figure it out. I think I'm missing an example.

Taking the pseudo-code below, at the moment, the switch is grey when false and green when true. What if I want to change the grey (when false) to yellow, or the green (when true) to blue. What do I need to do to this pseudo-code?

<script>
import { NSwitch } from 'naive-ui'

export default {
  components: {
    NSwitch,
  },
  data() {
    return {
        switch: true,
    },
  },
}
</script>
<template>
  <div class="example">
    <n-switch v-model:value="switch"/>
  </div>
</template>
<style>
.example {
  border: 5px solid white;
  padding: 20px;
}
</style>

[whale2002]

Hi, there 👋
you can try the prop theme-overrides to override style, like this

<script>
import { NSwitch } from 'naive-ui'

export default {
  components: {
    NSwitch,
  },
  data() {
    return {
      switch: true,
      switchThemeOverrides: {
        railColor: '#FFFF00',
        railColorActive: '#0000FF'
      }
    }
  }
}
</script>
<template>
  <div class="example">
    <n-switch v-model:value="switch" :theme-overrides="switchThemeOverrides"/>
  </div>
</template>
<style>
.example {
  border: 5px solid white;
  padding: 20px;
}
</style>

The document: https://www.naiveui.com/en-US/light/docs/customize-theme#Customizing-component-theme-vars
The themes in Naive UI are customizable. And The theme editor in the lower right corner contains the variables you can change.

[coofercat]

Oh my goodness, that's easy (when you know how!). Now I look again, I can see the documentation describing it - but couldn't get to the above code from the documentation without a little extra "shove".

Thank you very much - very helpful :-)