diff --git a/client/components/forms/components/InputLabel.vue b/client/components/forms/components/InputLabel.vue
index 7bfa064d..840935ed 100644
--- a/client/components/forms/components/InputLabel.vue
+++ b/client/components/forms/components/InputLabel.vue
@@ -18,12 +18,21 @@
 </template>
 
 <script>
+import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
 export default {
   name: "InputLabel",
 
   props: {
     nativeFor: { type: String, default: null },
-    theme: { type: Object, required: true },
+    theme: {
+      type: Object, default: () => {
+        const theme = inject("theme", null)
+        if (theme) {
+          return theme.value
+        }
+        return CachedDefaultTheme.getInstance()
+      }
+    },
     uppercaseLabels: { type: Boolean, default: false },
     required: { type: Boolean, default: false },
     label: { type: String, required: true },
diff --git a/client/components/forms/components/InputWrapper.vue b/client/components/forms/components/InputWrapper.vue
index 878ecb9f..ff863edf 100644
--- a/client/components/forms/components/InputWrapper.vue
+++ b/client/components/forms/components/InputWrapper.vue
@@ -55,13 +55,22 @@
 import InputLabel from "./InputLabel.vue"
 import InputHelp from "./InputHelp.vue"
 import {twMerge} from "tailwind-merge"
+import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
 
 defineProps({
   id: {type: String, required: false},
   name: {type: String, required: false},
   label: {type: String, required: false},
   form: {type: Object, required: false},
-  theme: {type: Object, required: true},
+  theme: {
+    type: Object, default: () => {
+      const theme = inject("theme", null)
+      if (theme) {
+        return theme.value
+      }
+      return CachedDefaultTheme.getInstance()
+    }
+  },
   wrapperClass: {type: String, required: false},
   inputStyle: {type: Object, required: false},
   help: {type: String, required: false},
diff --git a/client/components/forms/components/UploadedFile.vue b/client/components/forms/components/UploadedFile.vue
index 4385be60..cae51792 100644
--- a/client/components/forms/components/UploadedFile.vue
+++ b/client/components/forms/components/UploadedFile.vue
@@ -63,12 +63,22 @@
 </template>
 
 <script>
+import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
+
 export default {
   name: "UploadedFile",
 
   props: {
     file: { type:Object, default: null },
-    theme: { type: Object },
+    theme: {
+      type: Object, default: () => {
+        const theme = inject("theme", null)
+        if (theme) {
+          return theme.value
+        }
+        return CachedDefaultTheme.getInstance()
+      }
+    },
   },
   emits: ['remove'],
   data: () => ({
diff --git a/client/components/forms/components/VCheckbox.vue b/client/components/forms/components/VCheckbox.vue
index 1dd2107d..d08b167e 100644
--- a/client/components/forms/components/VCheckbox.vue
+++ b/client/components/forms/components/VCheckbox.vue
@@ -22,6 +22,7 @@
 
 <script setup>
 import { defineEmits, defineOptions, defineProps, onMounted, ref, watch, } from "vue"
+import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
 
 defineOptions({
   name: "VCheckbox",
@@ -32,7 +33,15 @@ const props = defineProps({
   name: { type: String, default: "checkbox" },
   modelValue: { type: [Boolean, String], default: false },
   disabled: { type: Boolean, default: false },
-  theme: { type: Object },
+  theme: {
+    type: Object, default: () => {
+      const theme = inject("theme", null)
+      if (theme) {
+        return theme.value
+      }
+      return CachedDefaultTheme.getInstance()
+    }
+  },
   color: { type: String, default: null },
 })
 
diff --git a/client/components/forms/components/VSelect.vue b/client/components/forms/components/VSelect.vue
index a6b3b1df..164ee67c 100644
--- a/client/components/forms/components/VSelect.vue
+++ b/client/components/forms/components/VSelect.vue
@@ -198,7 +198,7 @@
 
 <script>
 import Collapsible from '~/components/global/transitions/Collapsible.vue'
-import {themes} from '../../../lib/forms/themes/form-themes.js'
+import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
 import debounce from 'debounce'
 import Fuse from 'fuse.js'
 
@@ -224,7 +224,15 @@ export default {
     color: {type: String, default: '#3B82F6'},
     placeholder: {type: String, default: null},
     uppercaseLabels: {type: Boolean, default: true},
-    theme: {type: Object, default: () => themes.default},
+    theme: {
+      type: Object, default: () => {
+        const theme = inject("theme", null)
+        if (theme) {
+          return theme.value
+        }
+        return CachedDefaultTheme.getInstance()
+      }
+    },
     allowCreation: {type: Boolean, default: false},
     disabled: {type: Boolean, default: false}
   },
diff --git a/client/components/forms/components/VSwitch.vue b/client/components/forms/components/VSwitch.vue
index 5e983e66..10131a21 100644
--- a/client/components/forms/components/VSwitch.vue
+++ b/client/components/forms/components/VSwitch.vue
@@ -22,6 +22,7 @@
 
 <script setup>
 import { defineEmits, defineProps } from "vue"
+import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
 
 const props = defineProps({
   id: { type: String, default: null },
@@ -29,7 +30,15 @@ const props = defineProps({
   modelValue: { type: Boolean, default: false },
   disabled: { type: Boolean, default: false },
   color: { type: String, default: '#3B82F6' },
-  theme: { type: Object },
+  theme: {
+    type: Object, default: () => {
+      const theme = inject("theme", null)
+      if (theme) {
+        return theme.value
+      }
+      return CachedDefaultTheme.getInstance()
+    }
+  },
 })
 const emit = defineEmits(["update:modelValue"])
 
diff --git a/client/components/open/forms/OpenFormButton.vue b/client/components/open/forms/OpenFormButton.vue
index 11406144..cfe35c47 100644
--- a/client/components/open/forms/OpenFormButton.vue
+++ b/client/components/open/forms/OpenFormButton.vue
@@ -17,8 +17,7 @@
 </template>
 
 <script>
-import {themes} from "~/lib/forms/themes/form-themes.js"
-
+import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
 export default {
   name: "OpenFormButton",
 
@@ -43,7 +42,15 @@ export default {
       default: false,
     },
 
-    theme: {type: Object, default: () => themes.default},
+    theme: {
+      type: Object, default: () => {
+        const theme = inject("theme", null)
+        if (theme) {
+          return theme.value
+        }
+        return CachedDefaultTheme.getInstance()
+      }
+    },
   },
 
   computed: {
diff --git a/client/components/open/forms/OpenFormField.vue b/client/components/open/forms/OpenFormField.vue
index 73bb639b..67ea3746 100644
--- a/client/components/open/forms/OpenFormField.vue
+++ b/client/components/open/forms/OpenFormField.vue
@@ -110,6 +110,7 @@
 <script>
 import {computed} from 'vue'
 import FormLogicPropertyResolver from "~/lib/forms/FormLogicPropertyResolver.js"
+import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
 import {default as _has} from 'lodash/has'
 
 export default {
@@ -129,8 +130,13 @@ export default {
       required: true
     },
     theme: {
-      type: Object,
-      required: true
+      type: Object, default: () => {
+        const theme = inject("theme", null)
+        if (theme) {
+          return theme.value
+        }
+        return CachedDefaultTheme.getInstance()
+      }
     },
     showHidden: {
       type: Boolean,