Checkbox input color (#413)

* stule: checkbox input color

* fix toggle switch input color

* clean up console.log

client/components/forms/CheckboxInput.vue

@@ -9,6 +9,7 @@
       v-model="compVal"
       :disabled="disabled ? true : null"
       :name="name"
+      :color="color"
     >
       <slot name="label">
         {{ label }}

client/components/forms/ToggleSwitchInput.vue

@@ -10,6 +10,7 @@
         v-model="compVal"
         class="inline-block mr-2"
         :disabled="disabled ? true : null"
+        :color="color"
       />
       <slot name="label">
         <span>{{ label }}

client/components/forms/components/VCheckbox.vue

@@ -6,7 +6,8 @@
       :name="name"
       type="checkbox"
       :class="sizeClasses"
-      class="rounded border-gray-500 cursor-pointer"
+      class="rounded border-gray-500 cursor-pointer checkbox"
+      :style="{ '--accent-color': color }"
       :disabled="disabled ? true : null"
     >
     <label
@@ -20,14 +21,7 @@
 </template>
 
 <script setup>
-import {
+import { defineEmits, defineOptions, defineProps, onMounted, ref, watch, } from "vue"
-  defineEmits,
-  defineOptions,
-  defineProps,
-  onMounted,
-  ref,
-  watch,
-} from "vue"
 
 defineOptions({
   name: "VCheckbox",
@@ -39,6 +33,7 @@ const props = defineProps({
   modelValue: { type: [Boolean, String], default: false },
   disabled: { type: Boolean, default: false },
   sizeClasses: { type: String, default: "w-4 h-4" },
+  color: { type: String, default: null },
 })
 
 const emit = defineEmits(["update:modelValue", "click"])
@@ -73,3 +68,8 @@ onMounted(() => {
   if (internalValue.value === null) internalValue.value = false
 })
 </script>
+<style>
+  .checkbox {
+    accent-color: var(--accent-color);
+  }
+</style>

client/components/forms/components/VSwitch.vue

@@ -5,7 +5,9 @@
   >
     <div
       class="inline-flex items-center h-6 w-12 p-1 bg-gray-300 border rounded-full cursor-pointer focus:outline-none transition-all transform ease-in-out duration-100"
-      :class="{ 'bg-nt-blue': props.modelValue }"
+      :class="{ 'toggle-switch': props.modelValue }"
+      :style="{ '--accent-color': props.color }"
+
     >
       <div
         class="inline-block h-4 w-4 rounded-full bg-white shadow transition-all transform ease-in-out duration-150 rounded-2xl scale-100"
@@ -21,6 +23,7 @@ import { defineEmits, defineProps } from "vue"
 const props = defineProps({
   modelValue: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
+  color: { type: String, default: null },
 })
 const emit = defineEmits(["update:modelValue"])
 
@@ -29,3 +32,8 @@ function onClick() {
   emit("update:modelValue", !props.modelValue)
 }
 </script>
+<style>
+  .toggle-switch {
+    background-color: var(--accent-color);
+  }
+</style>