Apply theme color on toggle

JhumanJ · Nov 5, 2024 · bda37cf · bda37cf
1 parent d3afc7d
commit bda37cf
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 59 deletions.
diff --git a/client/components/forms/ToggleSwitchInput.vue b/client/components/forms/ToggleSwitchInput.vue
@@ -9,8 +9,11 @@
         :id="id ? id : name"
         v-model="compVal"
         :disabled="disabled ? true : null"
-        :color="color"
-        :theme="theme"
+        :style="{ '--toggle-color': color }"
+        :ui="{
+          active: 'bg-[var(--toggle-color)]',
+          ring: 'focus:ring-[var(--toggle-color)]/50'
+        }"
       />
 
       <div>
@@ -52,14 +55,13 @@
 
 <script>
 import {inputProps, useFormInput} from "./useFormInput.js"
-import VSwitch from "./components/VSwitch.vue"
 import InputWrapper from "./components/InputWrapper.vue"
 import InputHelp from "~/components/forms/components/InputHelp.vue"
 
 export default {
   name: "ToggleSwitchInput",
 
-  components: {InputHelp, InputWrapper, VSwitch},
+  components: {InputHelp, InputWrapper},
   props: {
     ...inputProps,
   },
@@ -74,4 +76,4 @@ export default {
     this.compVal = !!this.compVal
   },
 }
-</script>
+</script>
diff --git a/client/components/forms/components/VSwitch.vue b/client/components/forms/components/VSwitch.vue