如何修改v-switch组件处于toggle-off状态时的颜色？

问题分析 #

之前尝试用.v-input--switch__thumb、.theme--light修改无效，大概率是因为样式作用域（scoped）限制，或者没有精准选中关闭状态的元素——开关开启时会添加.v-input--is-active类，默认样式优先级更高，直接写类名会被覆盖。

解决方案 #

1. 穿透scoped样式（Vue 2/Vue 3通用）

如果你的组件样式带scoped，必须用深度选择器穿透Vuetify的组件样式：

/* Vue 2 写法 */
::v-deep .theme--light.v-input--switch:not(.v-input--is-active) .v-input--switch__thumb {
  background-color: green; /* 关闭状态的滑块颜色 */
}
::v-deep .theme--light.v-input--switch:not(.v-input--is-active) .v-input--switch__track {
  background-color: rgba(0, 128, 0, 0.3); /* 可选：调整关闭状态轨道的半透明绿色 */
}

/* Vue 3 写法 */
:deep(.theme--light.v-input--switch:not(.v-input--is-active) .v-input--switch__thumb) {
  background-color: green;
}
:deep(.theme--light.v-input--switch:not(.v-input--is-active) .v-input--switch__track) {
  background-color: rgba(0, 128, 0, 0.3);
}

• :not(.v-input--is-active) 精准匹配关闭状态的开关，避免和开启状态的样式冲突。

2. 全局样式修改（无需穿透）

如果在全局样式文件（比如App.vue的<style>不带scoped，或单独的global.css）中修改，直接写选择器即可：

.theme--light.v-input--switch:not(.v-input--is-active) .v-input--switch__thumb {
  background-color: green;
}
.theme--light.v-input--switch:not(.v-input--is-active) .v-input--switch__track {
  background-color: rgba(0, 128, 0, 0.3);
}

3. 自定义Vuetify主题（全局统一修改）

如果想让所有开关的关闭状态都用绿色，推荐直接在Vuetify主题配置中定义：

// Vue 2 配置文件（如 plugins/vuetify.js）
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    themes: {
      light: {
        switchOffThumb: 'green',
        switchOffTrack: 'rgba(0, 128, 0, 0.3)',
      },
    },
  },
})

// Vue 3 配置文件（如 vuetify.config.js）
import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    themes: {
      light: {
        colors: {
          switchOffThumb: 'green',
          switchOffTrack: 'rgba(0, 128, 0, 0.3)',
        },
      },
    },
  },
})

内容的提问来源于stack exchange，提问作者Adarsha Nayak