diff --git a/client/components/forms/components/CameraUpload.vue b/client/components/forms/components/CameraUpload.vue
index 1876b369..9426e4f9 100644
--- a/client/components/forms/components/CameraUpload.vue
+++ b/client/components/forms/components/CameraUpload.vue
@@ -98,11 +98,20 @@
 
 <script>
 import Webcam from "webcam-easy"
-import { themes } from "~/lib/forms/themes/form-themes.js"
+import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
+
 export default {
   name: "FileInput",
   props: {
-    theme: { type: Object, default: () => themes.default },
+    theme: {
+      type: Object, default: () => {
+        const theme = inject("theme", null)
+        if (theme) {
+          return theme.value
+        }
+        return CachedDefaultTheme.getInstance()
+      }
+    },
   },
   emits: ['stopWebcam', 'uploadImage'],
   data: () => ({
diff --git a/client/components/open/components/EditSubmissionModal.vue b/client/components/open/components/EditSubmissionModal.vue
index 7048da8f..4bad0f2e 100644
--- a/client/components/open/components/EditSubmissionModal.vue
+++ b/client/components/open/components/EditSubmissionModal.vue
@@ -28,11 +28,20 @@
 <script setup>
 import { ref, defineProps, defineEmits } from "vue"
 import OpenForm from "../forms/OpenForm.vue"
-import { themes } from "~/lib/forms/themes/form-themes.js"
+import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
+
 const props = defineProps({
   show: { type: Boolean, required: true },
   form: { type: Object, required: true },
-  theme: { type: Object, default: themes.default },
+  theme: {
+      type: Object, default: () => {
+        const theme = inject("theme", null)
+        if (theme) {
+          return theme.value
+        }
+        return CachedDefaultTheme.getInstance()
+      }
+    },
   submission: { type: Object },
 })
 
diff --git a/client/components/open/forms/OpenForm.vue b/client/components/open/forms/OpenForm.vue
index e6f9da6a..53df780b 100644
--- a/client/components/open/forms/OpenForm.vue
+++ b/client/components/open/forms/OpenForm.vue
@@ -141,14 +141,14 @@ export default {
       required: true
     },
     theme: {
-    type: Object, default: () => {
-      const theme = inject("theme", null)
-      if (theme) {
-        return theme.value
+      type: Object, default: () => {
+        const theme = inject("theme", null)
+        if (theme) {
+          return theme.value
+        }
+        return CachedDefaultTheme.getInstance()
       }
-      return CachedDefaultTheme.getInstance()
-    }
-  },
+    },
     loading: {
       type: Boolean,
       required: true
diff --git a/client/mixins/forms/input.js b/client/mixins/forms/input.js
index 478e6d16..10f5f63b 100644
--- a/client/mixins/forms/input.js
+++ b/client/mixins/forms/input.js
@@ -1,4 +1,4 @@
-import { themes } from "~/lib/forms/themes/form-themes.js"
+import CachedDefaultTheme from "~/lib/forms/themes/CachedDefaultTheme.js"
 import { default as _has } from "lodash/has"
 
 export default {
@@ -14,7 +14,15 @@ export default {
     uppercaseLabels: { type: Boolean, default: false },
     help: { type: String, default: null },
     helpPosition: { type: String, default: "below_input" },
-    theme: { type: Object, default: () => themes.default },
+    theme: {
+      type: Object, default: () => {
+        const theme = inject("theme", null)
+        if (theme) {
+          return theme.value
+        }
+        return CachedDefaultTheme.getInstance()
+      }
+    },
     color: { type: String, default: "#3B82F6" },
     wrapperClass: { type: String, default: "relative mb-3" },
   },