🎨 ธีม + ฟอนต์ + Dark Mode

ปรับแต่งหน้าตาระบบ — สี โหมดมืด/สว่าง ฟอนต์ ขนาด ไอคอน ภาษา (per-user)

ในหน้านี้

เข้าหน้าตั้งค่าได้ยังไง
โหมด: สว่าง / มืด / Auto
8 สีธีม (Light + Dark variant)
ขนาดตัวอักษร
รูปแบบฟอนต์ (16 ตัว)
รูปแบบไอคอน
ภาษา
เก็บค่าที่ไหน

เข้าหน้าตั้งค่าได้ยังไง

คลิก avatar มุมขวาบน (megamenu)
คลิก "การแสดงผล" (ไอคอนสีเขียว 🎨)
เข้าหน้า admin/appearance.php

แต่ละ user ตั้งค่าของตัวเอง — ค่า admin คนนี้ไม่กระทบคนอื่น (เก็บใน cookie ของแต่ละ browser)

โหมดการแสดงผล

โหมด	ความหมาย
☀️ สว่าง	พื้นขาว text เข้ม ใช้ตอนกลางวัน
🌙 มืด	พื้นดำ text สว่าง สบายตาตอนกลางคืน
🌓 Auto	ตาม system preference ของเครื่อง (prefers-color-scheme)

Dark mode ครอบคลุมอะไรบ้าง?

พื้นหลังทั้งหมด → dark navy
Card, Table, Form → dark surface
Sidebar → dark navy + tint สีธีม
Badge → translucent bg + light text
Code blocks → highlight สีเหลือง
Border → จาง

8 สีธีม

เลือกสีหลักของ UI — มีผลกับ:

ปุ่ม primary
Active menu item ใน sidebar (gradient + glow)
Sidebar accent bar ด้านบน
Brand icon
Megamenu header
Ticket header (เมื่อพิมพ์ขนาด A4/A5)
Focus state ของ form

ธีมทั้งหมด

ธีม	สีหลัก	โทน
Deep Indigo (default)	#4f46e5	น้ำเงินม่วง ทันสมัย
Sunset Orange	#ea580c	ส้ม สดใส อบอุ่น
Cherry Rose	#be123c	แดงเข้ม คลาสสิก
Teal Wave	#0d9488	เขียวฟ้า สดชื่น
Pastel Blush	#db2777	ชมพู
Pastel Lavender	#7c3aed	ม่วง อ่อนโยน
Silver Mist	#475569	เทา เป็นกลาง
Pastel Sky	#0284c7	ฟ้า สดใส

Dark variant — แต่ละสีมีรุ่นโหมดมืดด้วย คลิกการ์ดใน "ธีมมืด" → set mode=dark + theme=สีนั้น

ขนาดตัวอักษร

6 ขนาดเลือก: 12px (เล็กมาก), 14px (เล็ก), 16px (ปกติ), 18px (ใหญ่), 20px (ใหญ่มาก), 22px (ใหญ่พิเศษ)

มีผลกับ:

ขนาดตัวอักษร body ทั้งระบบ
ผ่าน CSS variable --base-font-size

💡 เหมาะกับ: ผู้สูงอายุ ผู้มีปัญหาสายตา หรือใช้บนจอใหญ่ — เลือก 18-22px จะอ่านสะดวกขึ้น

รูปแบบฟอนต์

16 ฟอนต์ไทยให้เลือก — โหลดจาก Google Fonts อัตโนมัติ

Sans-serif (ทั่วไป)

Sarabun — ค่าเริ่มต้น เป็นกลาง
Noto Sans Thai — อ่านง่าย
Kanit — ทันสมัย
Prompt — ชัดเจน
Niramit — สะอาด
K2D — เรียบหรู
Mitr — เป็นกันเอง
Krub — อ่านง่าย
IBM Plex Sans Thai — เป็นทางการ

Display / Decorative

Chonburi — ตัวหนา เด่น
Charm — ลายมือ
Mali — น่ารัก
Fahkwang — มี serif
Maitree — สง่างาม
Thasadith — เรียบง่าย
KoHo — เบาบาง

Preview: hover ที่ card ของฟอนต์ → ระบบโหลด font ทันที + แสดง preview "สวัสดี Alicia" ในฟอนต์นั้น

รูปแบบไอคอน

Flaticon Uicons มี 4 weights — เลือกได้:

Style	Code	ลักษณะ
บาง	`thin`	เส้นบาง ดูเบา
ปกติ (default)	`regular`	เส้นปานกลาง — แนะนำ
เต็ม	`solid`	สีทึบ ดูชัดเจน
หนา	`bold`	เส้นหนา เน้น

การเปลี่ยน: JS swap class prefix แบบ realtime — ทุกไอคอนเปลี่ยนทั้งระบบทันที (ไม่ต้องรีเฟรช)

ภาษา

เลือกภาษาแสดงผลของระบบ:

🇹🇭 ภาษาไทย (Thai) — default
🇬🇧 English (English)

คลิกการ์ด → URL จะมี ?lang=th หรือ ?lang=en → set cookie + reload

สิ่งที่เปลี่ยน:

UI labels ทั้งหมด (ทั้ง public + admin)
Date format (พ.ศ. ↔ ค.ศ.)
หน่วยเวลา (ชม./h, นาที/min)
หน่วยระยะทาง (กม./km)
<html lang="th|en"> → ฟอนต์ swap อัตโนมัติ

เก็บค่าที่ไหน

ทุก setting เก็บ per-user ใน 2 ที่:

ที่	หน้าที่	อายุ
Cookie	PHP อ่านตอน render — apply ตั้งแต่ HTML แรก ไม่เกิด flicker	365 วัน
localStorage	JS อ่าน sync กับ cookie เผื่อกรณี cookie โดน clear	ตลอดไป (จนกว่า user จะลบ)

Cookie keys

theme — สีธีม (deep-indigo, sunset-orange, ...)
theme_mode — light / dark / auto
font_family — ชื่อฟอนต์
font_size — 12-22
icon_style — thin / regular / fill / bold
lang — th / en

Reset settings

ล่างสุดของหน้า — ปุ่ม "รีเซ็ตการตั้งค่า" → ลบ cookies ทั้งหมด + reload → กลับเป็น default

← ก่อนหน้า ตั้งค่าระบบ ถัดไป → ผู้ใช้ระบบ