44 lines
2.1 KiB
TypeScript
44 lines
2.1 KiB
TypeScript
import { useQuasar } from 'quasar'
|
|
|
|
/**
|
|
* @composable useThemeMode
|
|
* @description จัดการระบบโหมดสว่าง/มืด (Light/Dark Theme) ของแพลตฟอร์ม
|
|
* ครอบคลุมการสั่งบันทึกการตั้งค่า, เปลี่ยนคลาส Tailwind และ Sync ซิงก์กับ Quasar UI
|
|
*/
|
|
export const useThemeMode = () => {
|
|
const $q = useQuasar()
|
|
|
|
// สถานะเริ่มต้นของโหมดมืด (สำหรับการทำ SSR ถูกเซ็ตเป็น false (สว่าง) ไว้ก่อน)
|
|
const isDark = useState<boolean>('theme:isDark', () => false)
|
|
|
|
// ฟังก์ชันใช้คลาสกับ Tag <html> เพื่อให้ Tailwind หรือ CSS รันโหมดมืด
|
|
const applyTheme = (value: boolean) => {
|
|
if (!process.client) return // หากทำงานฝั่งเซิร์ฟเวอร์ จะไม่สั่งให้รัน DOM
|
|
|
|
// สลับคลาส 'dark' หรือปิด
|
|
document.documentElement.classList.toggle('dark', value)
|
|
|
|
// สั่งให้ Quasar (UI Framework) ปรับโหมดสีให้ตรงกัน (มืด/สว่าง)
|
|
$q.dark.set(value)
|
|
|
|
// บันทึกการตั้งค่าลงเครื่องระยะยาวเบราว์เซอร์
|
|
localStorage.setItem('theme', value ? 'dark' : 'light')
|
|
}
|
|
|
|
|
|
|
|
// จับตาดูเมื่อตัวแปรเปลี่ยนค่าค่อยทำการเปลี่ยนโหมดบนหน้าจอ
|
|
watch(isDark, (v) => applyTheme(v))
|
|
|
|
// ฟังก์ชันสั่งสลับโหมด ไปมา (Toggle)
|
|
const toggle = () => {
|
|
isDark.value = !isDark.value
|
|
}
|
|
|
|
// ฟังก์ชันสำหรับกำหนดตั้งค่าโหมดแบบเจาะจง
|
|
const set = (v: boolean) => {
|
|
isDark.value = v
|
|
}
|
|
|
|
return { isDark, toggle, set }
|
|
}
|