/** 浅色/深色/跟随系统三态主题,使用共享 Nuxt 状态与 html.app-dark 驱动组件和原生控件。 */ import { computed } from "vue"; import { useState } from "#app"; import { applyTheme } from "~/utils/theme-appearance.js"; var r = [`light`, `dark`, `auto`], i = { light: `浅色`, dark: `深色`, auto: `跟随系统`, }, a = { light: `pi pi-sun`, dark: `pi pi-moon`, auto: `pi pi-desktop`, }, o = `theme`; function s() { let s = useState(`theme-mode`, () => applyTheme().mode), c = useState( `theme-dark`, () => typeof document < `u` && document.documentElement.classList.contains(`app-dark`), ), l = () => window.matchMedia(`(prefers-color-scheme: dark)`); function f() { c.value = applyTheme(s.value).dark; } let p = null, m = () => { s.value === `auto` && f(); }; // init 前先移除旧监听,dispose 供应用入口卸载时释放媒体查询监听。 function h() { (p?.removeEventListener(`change`, m), (p = null)); } function g() { h(); const appearance = applyTheme(); s.value = appearance.mode; c.value = appearance.dark; p = l(); p.addEventListener(`change`, m); } // 调用方传入已知模式;持久化失败不影响当前页面切换。 function _(e) { s.value = e; try { localStorage.setItem(o, e); } catch {} f(); } function v() { _(r[(r.indexOf(s.value) + 1) % r.length]); } return { mode: s, isDark: c, init: g, dispose: h, set: _, cycle: v, label: computed(() => i[s.value]), icon: computed(() => a[s.value]), }; } export { s as t };