36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
export type Theme = 'light' | 'dark'
|
|
|
|
// ต้องตรงกับ inline script กัน FOUC ใน nuxt.config.ts
|
|
const STORAGE_KEY = 'theme-preference'
|
|
|
|
export function useTheme() {
|
|
const theme = useState<Theme>('theme', () => 'light')
|
|
const isDark = computed(() => theme.value === 'dark')
|
|
|
|
function apply(next: Theme) {
|
|
theme.value = next
|
|
if (import.meta.client) {
|
|
document.documentElement.classList.toggle('dark', next === 'dark')
|
|
// ข้อยกเว้นเดียวที่ localStorage อนุญาต: theme preference ไม่ใช่ credential (กติกา #4)
|
|
localStorage.setItem(STORAGE_KEY, next)
|
|
}
|
|
}
|
|
|
|
/** Sync state กับที่ inline script ตั้งไว้ตอนโหลดหน้า (client เท่านั้น) */
|
|
function initTheme() {
|
|
if (!import.meta.client) return
|
|
const stored = localStorage.getItem(STORAGE_KEY)
|
|
if (stored === 'light' || stored === 'dark') {
|
|
theme.value = stored
|
|
} else {
|
|
theme.value = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
|
}
|
|
document.documentElement.classList.toggle('dark', theme.value === 'dark')
|
|
}
|
|
|
|
function toggle() {
|
|
apply(theme.value === 'dark' ? 'light' : 'dark')
|
|
}
|
|
|
|
return { theme, isDark, initTheme, toggle }
|
|
}
|