picocrank 1.21.4 → 1.21.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "picocrank",
-  "version": "1.21.4",
+  "version": "1.21.5",
   "description": "A set of zero dependency Vue components built on the Femtocrank global CSS theme.",
   "main": "vite.config.js",
   "scripts": {

package/vue/components/Header.vue

@@ -27,11 +27,11 @@
 			v-if="themeToggleEnabled"
 			type="button"
 			class="theme-toggle neutral"
-			:aria-label="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
-			:title="isDark ? 'Light mode' : 'Dark mode'"
+			:aria-label="themeToggleLabel"
+			:title="themeToggleTitle"
 			@click="toggleTheme"
 		>
-			<HugeiconsIcon :icon="isDark ? Sun01Icon : Moon02Icon" width="1em" height="1em" />
+			<HugeiconsIcon :icon="themeToggleIcon" width="1em" height="1em" />
 		</button>
 
 		<slot name = "user-info">
@@ -46,9 +46,9 @@
 </template>
 
 <script setup>
-	import { ref } from "vue";
+	import { computed, ref } from "vue";
 	import { HugeiconsIcon } from "@hugeicons/vue";
-	import { Menu01Icon, Moon02Icon, Sun01Icon } from "@hugeicons/core-free-icons";
+	import { BulbIcon, Menu01Icon, Moon02Icon, Sun01Icon } from "@hugeicons/core-free-icons";
 
 	import Breadcrumbs from "./Breadcrumbs.vue";
 	import TopBar from "./TopBar.vue";
@@ -56,7 +56,30 @@
 	import { useTheme } from '../composables/useTheme.js';
 	import { useResponsiveNav } from '../composables/useResponsiveNav.js';
 
-	const { isDark, toggleTheme } = useTheme();
+	const { theme, nextTheme, toggleTheme } = useTheme();
+
+	const themeToggleMeta = {
+		auto: {
+			icon: BulbIcon,
+			title: 'Auto',
+		},
+		light: {
+			icon: Sun01Icon,
+			title: 'Light',
+		},
+		dark: {
+			icon: Moon02Icon,
+			title: 'Dark',
+		},
+	};
+
+	const themeToggleIcon = computed(() => themeToggleMeta[theme.value]?.icon ?? BulbIcon);
+	const themeToggleTitle = computed(() => themeToggleMeta[theme.value]?.title ?? 'Auto');
+	const themeToggleLabel = computed(() => {
+		const current = themeToggleMeta[theme.value]?.title ?? 'Auto';
+		const next = themeToggleMeta[nextTheme.value]?.title ?? 'Auto';
+		return `Theme ${current.toLowerCase()}. Switch to ${next.toLowerCase()} mode`;
+	});
 
 	const emit = defineEmits(["toggleSidebar", "logoClick"]);
 

package/vue/composables/useTheme.js

@@ -9,15 +9,30 @@ function getSystemTheme() {
 	return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
 }
 
-function readStoredTheme() {
+function readStoredPreference() {
 	if (typeof window === 'undefined') {
-		return 'light'
+		return 'auto'
 	}
 	const stored = localStorage.getItem(STORAGE_KEY)
-	if (stored === 'light' || stored === 'dark') {
+	if (stored === 'light' || stored === 'dark' || stored === 'auto') {
 		return stored
 	}
-	return getSystemTheme()
+	return 'auto'
+}
+
+function resolveTheme(preference) {
+	return preference === 'auto' ? getSystemTheme() : preference
+}
+
+function getNextTheme(preference) {
+	const system = getSystemTheme()
+	if (preference === 'auto') {
+		return system === 'light' ? 'dark' : 'light'
+	}
+	if (preference === 'light') {
+		return system === 'light' ? 'auto' : 'dark'
+	}
+	return system === 'dark' ? 'auto' : 'light'
 }
 
 function applyTheme(value) {
@@ -27,32 +42,50 @@ function applyTheme(value) {
 	document.documentElement.setAttribute('data-theme', value)
 }
 
-export const theme = ref(readStoredTheme())
+export const theme = ref(readStoredPreference())
 
-applyTheme(theme.value)
+applyTheme(resolveTheme(theme.value))
 
 watch(theme, (value) => {
-	applyTheme(value)
+	applyTheme(resolveTheme(value))
 	if (typeof localStorage !== 'undefined') {
 		localStorage.setItem(STORAGE_KEY, value)
 	}
 })
 
+if (typeof window !== 'undefined') {
+	const media = window.matchMedia('(prefers-color-scheme: dark)')
+	const onSystemThemeChange = () => {
+		if (theme.value === 'auto') {
+			applyTheme(getSystemTheme())
+		}
+	}
+	if (typeof media.addEventListener === 'function') {
+		media.addEventListener('change', onSystemThemeChange)
+	} else if (typeof media.addListener === 'function') {
+		media.addListener(onSystemThemeChange)
+	}
+}
+
 export function useTheme() {
-	const isDark = computed(() => theme.value === 'dark')
+	const resolvedTheme = computed(() => resolveTheme(theme.value))
+	const nextTheme = computed(() => getNextTheme(theme.value))
+	const isDark = computed(() => resolvedTheme.value === 'dark')
 
 	function toggleTheme() {
-		theme.value = theme.value === 'dark' ? 'light' : 'dark'
+		theme.value = getNextTheme(theme.value)
 	}
 
 	function setTheme(value) {
-		if (value === 'light' || value === 'dark') {
+		if (value === 'light' || value === 'dark' || value === 'auto') {
 			theme.value = value
 		}
 	}
 
 	return {
 		theme,
+		resolvedTheme,
+		nextTheme,
 		isDark,
 		toggleTheme,
 		setTheme,