Fix darkMode

client/components/global/Navbar.vue

@@ -182,12 +182,12 @@ export default {
       return this.config.public.paidPlansEnabled
     },
     showAuth() {
-      return this.$route.name && !this.$route.name.startsWith('forms-slug')
+      return this.$route.name && this.$route.name !== 'forms-slug'
     },
     hasNavbar() {
       if (this.isIframe) return false
 
-      if (this.$route.name && this.$route.name.startsWith('forms-slug')) {
+      if (this.$route.name && this.$route.name === 'forms-slug') {
         if (this.form) {
           // If there is a cover, or if branding is hidden remove nav
           if (this.form.cover_picture || this.form.no_branding) {

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>

client/components/pages/welcome/Testimonials.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import {useDark} from "@vueuse/core";
+import {darkModeEnabled} from "~/lib/forms/public-page.js"
 
 export default {
 
@@ -21,7 +21,7 @@ export default {
   data: () => ({}),
 
   setup () {
-    const isDark = useDark()
+    const isDark = darkModeEnabled()
     return {
       isDark
     }

client/lib/forms/public-page.js

@@ -1,9 +1,13 @@
+
+let darkModeNodeParent = process.client ? document.body : null
+
 /**
  * Handle form public pages dark mode and transparent mode
  */
 export function handleDarkMode (darkMode, elem = null) {
   if (process.server) return
-  const darkModeNodeParent = elem ?? document.body
+
+  darkModeNodeParent = elem ?? document.body
 
   // Dark mode
   if (['dark', 'light'].includes(darkMode)) {
@@ -11,14 +15,19 @@ export function handleDarkMode (darkMode, elem = null) {
   }
 
   // Case auto
-  handleDarkModeToggle(window.matchMedia('(prefers-color-scheme: dark)').matches, darkModeNodeParent)
+  handleDarkModeToggle(window.matchMedia('(prefers-color-scheme: dark)').matches)
 
   // Create listener
   window.matchMedia('(prefers-color-scheme: dark)')
     .addEventListener('change', handleDarkModeToggle)
 }
 
-function handleDarkModeToggle (enabled, darkModeNodeParent) {
+export function darkModeEnabled() {
+  if (process.server) return false
+  return computed(() => document.body.classList.contains('dark'))
+}
+
+function handleDarkModeToggle (enabled) {
   if (enabled !== false && enabled !== true) {
     // if we received an event
     enabled = enabled.matches

client/pages/forms/[slug]/index.vue

@@ -75,7 +75,6 @@ onBeforeRouteLeave((to, from) => {
 })
 
 const passwordEntered = function (password) {
-  console.log('passwordEntered', password, sha256(password))
   useCookie('password-' + slug, {
     maxAge: 60 * 60 * 7,
     sameSite: false,
@@ -83,14 +82,12 @@ const passwordEntered = function (password) {
   }).value = sha256(password)
   loadForm().then(() => {
     if (form.value?.is_password_protected) {
-      console.log(openCompleteForm.value)
       openCompleteForm.value.addPasswordError('Invalid password.')
     }
   })
 }
 
 const loadForm = async (setup=false) => {
-  console.log('loadForm',setup)
   if (formsStore.loading || (form.value && !form.value.is_password_protected)) return Promise.resolve()
 
   if (setup) {
@@ -107,8 +104,8 @@ const loadForm = async (setup=false) => {
   formsStore.stopLoading()
 
   // Adapt page to form: colors, custom code etc
-  handleDarkMode(form.value)
-  handleTransparentMode(form.value)
+  handleDarkMode(form.value.dark_mode)
+  handleTransparentMode(form.value.transparent_background)
 
   if (process.server) return
   if (form.value.custom_code) {
@@ -120,6 +117,8 @@ const loadForm = async (setup=false) => {
 
 onMounted(() => {
   loadForm()
+  handleDarkMode(form.value.dark_mode)
+  handleTransparentMode(form.value.transparent_background)
 })
 
 await loadForm(true)