Colored switches

<script setup lang="ts">
import { Field, FieldLabel } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
</script>

<template>
  <div class="flex flex-col gap-4">
    <Field orientation="horizontal" class="w-auto">
      <Switch
        id="sw-blue"
        :default-value="true"
        class="data-checked:bg-blue-500"
      />
      <FieldLabel for="sw-blue">Blue</FieldLabel>
    </Field>
    <Field orientation="horizontal" class="w-auto">
      <Switch
        id="sw-green"
        :default-value="true"
        class="data-checked:bg-green-500"
      />
      <FieldLabel for="sw-green">Green</FieldLabel>
    </Field>
    <Field orientation="horizontal" class="w-auto">
      <Switch
        id="sw-yellow"
        :default-value="true"
        class="data-checked:bg-yellow-500"
      />
      <FieldLabel for="sw-yellow">Yellow</FieldLabel>
    </Field>
  </div>
</template>