srcdev-nuxt-forms 2.1.33 → 2.1.35

package/assets/styles/utils/_page.css

@@ -1,12 +1,19 @@
-:root {
+html {
   color-scheme: light dark;
-}
 
-html {
-  /* background-color: var(--body-background-color); */
+  &[data-color-scheme='light'] {
+    color-scheme: light;
+  }
+
+  &[data-color-scheme='dark'] {
+    color-scheme: dark;
+  }
+
   background-color: var(--page-bg);
 
   font-size: 62.5%;
+
+  transition: background-color 0.4s ease, color 0.4s ease;
 }
 body,
 p,

package/components/forms/toggle-switch/variants/ToggleSwitchWithLabel.vue

@@ -39,7 +39,8 @@ const { id, name, label, required, errorMessage, fieldHasError, trueValue, false
   },
   errorMessage: {
     type: [Object, String],
-    required: true,
+    default: '',
+    required: false,
   },
   fieldHasError: {
     type: Boolean,

package/components/utils/dark-mode-switcher/DarkModeSwitcher.vue

@@ -0,0 +1,23 @@
+<template>
+  <ToggleSwitchCore v-model="displayMode" class="dark-mode-switcher" :class="elementClasses" true-value="dark" false-value="light" name="header-dark-mode-switcher" id="header-dark-mode-switcher">
+    <template #iconOn>
+      <Icon name="radix-icons:moon" class="icon" />
+    </template>
+    <template #iconOff>
+      <Icon name="radix-icons:sun" class="icon" />
+    </template>
+  </ToggleSwitchCore>
+</template>
+
+<script setup lang="ts">
+const { styleClassPassthrough } = defineProps({
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const displayMode = ref<'auto' | 'dark' | 'light'>('auto');
+const { elementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+useColourScheme(displayMode);
+</script>

package/composables/useColourScheme.ts

@@ -0,0 +1,41 @@
+export const useColourScheme = (colourScheme: Ref<'auto' | 'dark' | 'light'> = ref('light')) => {
+  const updateColourScheme = (newColourScheme: 'auto' | 'dark' | 'light') => {
+    colourScheme.value = newColourScheme;
+  };
+
+  const getSetPrefereredColourScheme = () => {
+    if (import.meta.client) {
+      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && !document.documentElement.dataset.colorScheme) {
+        colourScheme.value = 'dark';
+      } else {
+        colourScheme.value = 'light';
+      }
+    }
+  };
+
+  onMounted(() => {
+    if (import.meta.client) {
+      const storedMode = localStorage.getItem('colourScheme');
+      if (storedMode) {
+        colourScheme.value = storedMode as 'dark' | 'light';
+      } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        colourScheme.value = 'dark';
+      } else {
+        colourScheme.value = 'light';
+      }
+    }
+  });
+
+  watch(colourScheme, (newVal) => {
+    if (import.meta.client) {
+      localStorage.setItem('colourScheme', newVal);
+      document.documentElement.dataset.colorScheme = newVal;
+    }
+  });
+
+  return {
+    colourScheme,
+    updateColourScheme,
+    getSetPrefereredColourScheme,
+  };
+};

package/nuxt.config.ts

@@ -11,6 +11,16 @@ export default defineNuxtConfig({
       },
     },
   },
+  app: {
+    head: {
+      htmlAttrs: {
+        lang: 'en',
+        'data-color-scheme': 'auto',
+      },
+      titleTemplate: '%s - Website name',
+      meta: [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
+    },
+  },
   components: [
     {
       path: './components',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "2.1.33",
+  "version": "2.1.35",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",