Fix darkMode

client/components/open/forms/OpenCompleteForm.vue

@@ -23,7 +23,7 @@
            class="border shadow-sm p-2 my-4 flex items-center rounded-md bg-yellow-100 border-yellow-500"
       >
         <div class="flex flex-grow">
-          <p class="mb-0 py-2 px-4 text-yellow-600">
+          <p class="mb-0 py-2 px-4 text-yellow-600 dark:text-yellow-600">
             We disabled the password protection for this form because you are an owner of it.
           </p>
           <v-button color="yellow" @click="hidePasswordDisabledMsg=true">

client/components/open/forms/OpenForm.vue

@@ -65,8 +65,9 @@ import draggable from 'vuedraggable'
 import OpenFormButton from './OpenFormButton.vue'
 import VueHcaptcha from "@hcaptcha/vue3-hcaptcha"
 import OpenFormField from './OpenFormField.vue'
-import {pendingSubmission} from "~/composables/forms/pendingSubmission.js";
-import FormLogicPropertyResolver from "~/lib/forms/FormLogicPropertyResolver.js";
+import {pendingSubmission} from "~/composables/forms/pendingSubmission.js"
+import FormLogicPropertyResolver from "~/lib/forms/FormLogicPropertyResolver.js"
+import {darkModeEnabled} from "~/lib/forms/public-page.js"
 
 export default {
   name: 'OpenForm',
@@ -104,7 +105,7 @@ export default {
       dataForm,
       recordsStore,
       workingFormStore,
-      darkModeEnabled: useDark(),
+      darkModeEnabled: darkModeEnabled(),
       pendingSubmission: pendingSubmission(props.form)
     }
   },

client/components/open/forms/components/form-components/FormCustomSeo.vue

@@ -35,6 +35,7 @@ export default {
   setup () {
     const workingFormStore = useWorkingFormStore()
     return {
+      workspacesStore: useWorkspacesStore(),
       workingFormStore
     }
   },
@@ -53,7 +54,7 @@ export default {
       }
     },
     workspace () {
-      return this.$store.getters['open/workspaces/getCurrent']()
+      return this.workspacesStore.getCurrent
     },
     customDomainOptions () {
       return this.workspace.custom_domains.map((domain) => {

client/components/open/forms/components/form-components/FormCustomization.vue

@@ -23,6 +23,16 @@
       </small>
     </div>
 
+    <select-input name="dark_mode" class="mt-4"
+                  help="To see changes, save your form and open it"
+                  :options="[
+                    {name:'Auto - use Device System Preferences',value:'auto'},
+                    {name:'Light Mode',value:'light'},
+                    {name:'Dark Mode',value:'dark'}
+                  ]"
+                  :form="form" label="Dark Mode"
+    />
+
     <select-input name="width" class="mt-4"
                   :options="[
                     {name:'Centered',value:'centered'},
@@ -41,15 +51,6 @@
                  :required="false"
     />
 
-    <select-input name="dark_mode" class="mt-4"
-                  help="To see changes, save your form and open it"
-                  :options="[
-                    {name:'Auto - use Device System Preferences',value:'auto'},
-                    {name:'Light Mode',value:'light'},
-                    {name:'Dark Mode',value:'dark'}
-                  ]"
-                  :form="form" label="Dark Mode"
-    />
     <color-input name="color" class="mt-4"
                  :form="form"
                  label="Color (for buttons & inputs border)"

client/components/open/forms/components/form-components/FormEditorPreview.vue

@@ -1,6 +1,6 @@
 <template>
   <!--   Form Preview (desktop only)   -->
-  <div
+  <div ref="parent"
     class="bg-gray-50 dark:bg-notion-dark-light hidden md:flex flex-grow p-5 flex-col items-center overflow-y-scroll"
   >
     <div class="border rounded-lg bg-white dark:bg-notion-dark w-full block transition-all max-w-5xl">
@@ -59,9 +59,9 @@
 </template>
 
 <script>
-import { useWorkingFormStore } from '../../../../../stores/working_form'
 import VSwitch from '../../../../forms/components/VSwitch.vue'
 import OpenCompleteForm from '../../OpenCompleteForm.vue'
+import {handleDarkMode} from "~/lib/forms/public-page.js"
 
 export default {
   components: { OpenCompleteForm, VSwitch },
@@ -93,9 +93,16 @@ export default {
     }
   },
 
-  watch: {},
+  watch: {
+    'form.dark_mode': {
+      handler () {
+        this.handleDarkMode()
+      }
+    }
+  },
 
   mounted () {
+    this.handleDarkMode()
   },
 
   methods: {
@@ -108,7 +115,10 @@ export default {
         return URL.createObjectURL(val)
       }
       return val
+    },
+    handleDarkMode () {
+      handleDarkMode(this.form.dark_mode, this.$refs.parent)
     }
-  }
+  },
 }
 </script>