Initialise colour scheme on mount

Author: srcdev

app/components/display-theme-switch/DisplayThemeSwitch.vue

@@ -1,9 +1,11 @@
 <template>
-  <TripleToggleSwitchCore
-    v-model="colorModeVal"
-    v-model:field-data="sampleFieldData"
-    :style-class-passthrough="[`colour-scheme-select`, elementClasses]"
-  />
+  <ClientOnly>
+    <TripleToggleSwitchCore
+      v-model="colorModeVal"
+      v-model:field-data="sampleFieldData"
+      :style-class-passthrough="[`colour-scheme-select`, elementClasses]"
+    />
+  </ClientOnly>
 </template>
 
 <script setup lang="ts">

app/layouts/default.vue

@@ -145,6 +145,28 @@ const responsiveNavLinks = {
     },
   ],
 } as ResponsiveHeaderProp;
+
+// *** COLOR SCHEME INITIALIZATION ***
+onMounted(() => {
+  const applyColorScheme = (scheme: string) => {
+    const htmlElement = document.documentElement;
+    htmlElement.classList.remove("system", "dark", "light");
+    htmlElement.classList.add(scheme);
+  };
+
+  try {
+    const storedValue = localStorage.getItem("useSettingsStore");
+
+    if (storedValue) {
+      const parsed = JSON.parse(storedValue);
+      applyColorScheme(parsed.colourScheme || "system");
+    } else {
+      applyColorScheme("system");
+    }
+  } catch {
+    applyColorScheme("system");
+  }
+});
 </script>
 <style lang="css">
 .header {

app/pages/forms/examples/material/text-fields.vue

@@ -895,7 +895,7 @@ const {
   doZodValidate,
   fieldMaxLength,
   scrollToFirstError,
-  scrollToFormHead,
+  // scrollToFormHead,
 } = useZodValidation(formSchema, formRef);
 
 initZodForm();

app/stores/useSettingsStore.ts

@@ -29,7 +29,7 @@ export const useSettingsStore = defineStore(
   },
   {
     persist: {
-      storage: piniaPluginPersistedstate.cookies(),
+      storage: piniaPluginPersistedstate.localStorage(),
     },
   }
 );