Dark mode fix first page loading

src/App.ts

@@ -35,6 +35,8 @@ export default {
 
     const site = computed(() => globalStore.site)
 
+    const darkcookie = ref(false)
+
     watch(() => finishLoading.value, (newval: boolean, oldval: boolean) => {
       // console.log('watch finished', newval)
       if (newval) {
@@ -44,6 +46,7 @@ export default {
 
     })
 
+
     const listaRoutingNoLogin = ['/vreg?', '/offline']
 
     function meta() {
@@ -75,6 +78,8 @@ export default {
     }
 
     function mounted() {
+      darkcookie.value = tools.getCookie('darkmode', false, false, false) === '-1'
+
       scroll()
     }
 
@@ -130,6 +135,7 @@ export default {
 
     return {
       finishLoading,
+      darkcookie,
     }
   },
 }

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <!--<q-layout view="lHh Lpr lFf" class="shadow-2 rounded-borders">--->
-    <q-layout view="hHh LpR fFf" class="shadow-2 rounded-borders">
+    <q-layout view="hHh LpR fFf" :class="`shadow-2 rounded-borders ` + ((darkcookie && !finishLoading) ? `bg-black`: ``)">
       <app-header></app-header>
       <q-ajax-bar></q-ajax-bar>
 
@@ -10,7 +10,7 @@
 
       <app-footer></app-footer>
 
-      <q-page-container id="mypage">
+      <q-page-container id="mypage" :class="(darkcookie && !finishLoading) ? `bg-black`: ``">
         <div v-if="finishLoading">
           <CFirstPageApp></CFirstPageApp>
           <router-view/>

src/common/shared_vuejs.ts

@@ -1332,6 +1332,10 @@ export const shared_consts = {
       value: 160,
       label: 'Stato Registrati',
     },
+    {
+      value: 170,
+      label: 'CheckIfIsLogged',
+    },
     {
       value: 180,
       label: 'Info Versione',

src/components/CMyElem/CMyElem.vue

@@ -457,6 +457,13 @@
             color="blue"
             type="a"
             size="md"
+            :class="
+              myel.class +
+              (editOn ? ` clEdit` : ``) +
+              getClass() +
+              ` ` +
+              tools.getClassAnim(myel.anim)
+            "
             rounded
             :label="$t('reg.link_reg_and_msg')"
             @click="

src/components/CPresentazione/CPresentazione.vue

@@ -26,7 +26,7 @@
                   <div class="q-gutter-xs testo-banda clgutter">
                     <div class="text-h1"><span :class="`myshadow text-blue-9`">{{ t('msg.myAppName') }}</span></div>
                     <div class="text-subtitle1 text-italic q-pl-sm">
-                      <span :class="`shadow text-black `">{{ t('msg.sottoTitoloApp') }}</span>
+                      <span :class="`shadow ` + $q.dark.isActive ? `text-white`: `text-black`">{{ t('msg.sottoTitoloApp') }}</span>
                     </div>
                     <div>
                       <div v-if="!tools.isLogged()" style="margin: 5px; padding: 5px" class="home">
@@ -179,23 +179,11 @@
                           class="btn-start">
                           {{ $t('login.enter') }}
                         </q-btn>
-                        <!--<q-btn
-                          rounded size="lg" color="positive" @click="PagReg"
-                          class="btn-start">
-                          {{ t('reg.submit') }}
-                        </q-btn>-->
                       </div>
                     </div>
 
                     <div v-if="tools.isLogged()">
                       <div>
-                        <!--<q-field-->
-                        <!--v-if="getPermission() === 'granted'"-->
-                        <!--icon="notifications"-->
-                        <!--class="shadow"-->
-                        <!--:label="t('notification.titlegranted')"-->
-                        <!--:helper="t('notification.statusnot')">-->
-                        <!--</q-field>-->
                         <q-field
                           v-if="NotServiceWorker()"
                           class="shadow"

src/components/MyHeader/MyHeader.ts

@@ -86,14 +86,19 @@ export default defineComponent({
     })
 
     watch(() => dark.value, (value: any, oldval: any) => {
-      $q.dark.set(value)
+      if (isfinishLoading.value) {
-      tools.setCookie('darkmode', value ? '-1' : '0')
+        $q.dark.set(value)
+        tools.setCookie('darkmode', value ? '-1' : '0')
+      }
     })
 
-    function uploadStart() {
+    function setDarkMode() {
       dark.value = tools.getCookie('darkmode', false, false, false) === '-1'
 
       $q.dark.set(dark.value)
+    }
+
+    function uploadStart() {
 
       BeforeMount()
     }
@@ -389,6 +394,8 @@ export default defineComponent({
     }
 
     function BeforeMount() {
+      setDarkMode()
+
       // Estrai la Lang dal Localstorage
       if (!globalStore.finishLoading)
         return;