v-ons-switchがONになった時のボタンの色を変えたい

Question

Onsen UIとVue.jsで以下のように書いているのですが、ボタンがオンになった時の色を変えたいのですが、対応するCSSが分からなくて困っております。

 //　略

<ons-list>
      <ons-list-item>
        <label class="center" for="switch1">
          Switch ({{ switchOn ? 'on' : 'off' }})
        </label>
        <div class="right">
          <v-ons-switch  modifier="switchcolor" input-id="switch1"
            v-model="switchOn"
          >
          </v-ons-switch>
        </div>
      </ons-list-item>
 </ons-list>   

<script>
  export default {
  data() {  
    
    return {
      switchOn: true          
    }
  }
　
// 略

</script>

<style>
  .switch--switchcolor{
    color:  red;
    background-color: green;
  }
</style>  

background-color: greenのスタイルは適用されているのですが、ボタン自体の色は変わりませんし、ボタンがOnになった時にボタン自体の色を変えたいのですが調べて色々やったのですがダメでした。

Answer 1

switch-highlight-colorとかそれに近い名称のものがあると思います

Answer 2

開発者ツールでHTMLとCSSを直接解析してやってみましたが、次のようにしたらどうでしょうか？

    :checked + .switch--switchcolor__toggle {
      background-color: red;
    }