Fix Dark mode (#376)

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/open/forms/OpenCompleteForm.vue

@@ -69,6 +69,7 @@
                    :loading="loading"
                    :fields="form.properties"
                    :theme="theme"
+                   :dark-mode="darkMode"
                    :admin-preview="adminPreview"
                    @submit="submitForm"
         >
@@ -127,7 +128,11 @@ export default {
     form: { type: Object, required: true },
     creating: { type: Boolean, default: false }, // If true, fake form submit
     adminPreview: { type: Boolean, default: false }, // If used in FormEditorPreview
-    submitButtonClass: { type: String, default: '' }
+    submitButtonClass: { type: String, default: '' },
+    darkMode: {
+      type: Boolean,
+      default: false
+    }
   },
 
   setup(props) {

client/components/open/forms/OpenForm.vue

@@ -41,6 +41,7 @@
               :data-form="dataForm"
               :data-form-value="dataFormValue"
               :theme="theme"
+              :dark-mode="darkMode"
               :admin-preview="adminPreview"
             />
           </template>
@@ -51,7 +52,7 @@
     <!-- Captcha -->
     <template v-if="form.use_captcha && isLastPage">
       <div class="mb-3 px-2 mt-2 mx-auto w-max">
-        <vue-hcaptcha ref="hcaptcha" :sitekey="hCaptchaSiteKey" :theme="darkModeEnabled?'dark':'light'" />
+        <vue-hcaptcha ref="hcaptcha" :sitekey="hCaptchaSiteKey" :theme="darkMode?'dark':'light'" />
         <has-error :form="dataForm" field="h-captcha-response" />
       </div>
     </template>
@@ -85,7 +86,6 @@ 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 {darkModeEnabled} from "~/lib/forms/public-page.js"
 
 export default {
   name: 'OpenForm',
@@ -112,7 +112,11 @@ export default {
       required: true
     },
     defaultDataForm:{},
-    adminPreview: { type: Boolean, default: false } // If used in FormEditorPreview
+    adminPreview: { type: Boolean, default: false }, // If used in FormEditorPreview
+    darkMode: {
+      type: Boolean,
+      default: false
+    }
   },
 
   setup (props) {
@@ -124,7 +128,6 @@ export default {
       dataForm,
       recordsStore,
       workingFormStore,
-      darkModeEnabled: darkModeEnabled(),
       pendingSubmission: pendingSubmission(props.form)
     }
   },

client/components/open/forms/OpenFormField.vue

@@ -56,7 +56,6 @@
 <script>
 import { computed } from 'vue'
 import FormLogicPropertyResolver from "~/lib/forms/FormLogicPropertyResolver.js"
-import { darkModeEnabled } from '~/lib/forms/public-page.js'
 import { default as _has } from 'lodash/has'
 
 export default {
@@ -83,6 +82,10 @@ export default {
       type: Boolean,
       default: false
     },
+    darkMode: {
+      type: Boolean,
+      default: false
+    },
     field: {
       type: Object,
       required: true
@@ -177,9 +180,6 @@ export default {
     },
     fieldSideBarOpened() {
       return this.adminPreview && (this.form && this.selectedFieldIndex !== null) ? (this.form.properties[this.selectedFieldIndex] && this.showEditFieldSidebar) : false
-    },
-    isDark () {
-      return this.form.dark_mode === 'dark' || this.form.dark_mode === 'auto' && darkModeEnabled()
     }
   },
 
@@ -250,7 +250,7 @@ export default {
         theme: this.theme,
         maxCharLimit: (field.max_char_limit) ? parseInt(field.max_char_limit) : 2000,
         showCharLimit: field.show_char_limit || false,
-        isDark: this.isDark
+        isDark: this.darkMode
       }
 
       if (['select', 'multi_select'].includes(field.type)) {

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

@@ -32,6 +32,7 @@
       <open-complete-form ref="form-preview" class="w-full mx-auto py-5 px-3" :class="{'max-w-lg': form && (form.width === 'centered')}"
                           :creating="creating"
                           :form="form"
+                          :dark-mode="darkMode"
                           :admin-preview="true"
                           @restarted="previewFormSubmitted=false"
                           @submitted="previewFormSubmitted=true"
@@ -61,7 +62,7 @@
 <script>
 import VSwitch from '../../../../forms/components/VSwitch.vue'
 import OpenCompleteForm from '../../OpenCompleteForm.vue'
-import {handleDarkMode} from "~/lib/forms/public-page.js"
+import {handleDarkMode, useDarkMode} from "~/lib/forms/public-page.js"
 import { default as _has } from 'lodash/has'
 
 export default {
@@ -69,8 +70,11 @@ export default {
   props: {},
   setup () {
     const workingFormStore = useWorkingFormStore()
+    const parent = ref(null)
     return {
-      workingFormStore
+      workingFormStore,
+      parent: parent,
+      darkMode: useDarkMode(parent)
     }
   },
   data () {