【Vue Switches】 如何自定义主题？

需要编写一套CSS样式，包括：

• .vue-switcher：基础样式类
• .vue-switcher--unchecked：unchecked状态下的样式类
• .vue-switcher-theme--diy：自定义主题diy的样式类
• .vue-switcher-color--primary：自定义颜色primary的样式类

例如：

<switches v-model="enabled" type-bold="false" theme="custom" color="blue"></switches>

这里需要定义.vue-switcher-theme--custom和.vue-switcher-color--blue的样式

.vue-switcher-theme--custom {
    &.vue-switcher-color--blue {
        div {
            background-color: lighten(blue, 10%);

            &:after {
                // for the circle on the switch
                background-color: darken(blue, 5%);
            }
        }

        &.vue-switcher--unchecked {
            div {
                background-color: lighten(blue, 30%);

                &:after {
                    background-color: lighten(blue, 10%);
                }
            }
        }
    }
}