/* assets/css/themes.css — ระบบ Theme ของ NOOMQ 5 ชุดสี (theme) x 2 โหมด (light/dark) = 10 ค่าผสมทั้งหมด ทำงานร่วมกับ style.css เดิมโดยไม่แก้ style.css เลย เพราะ style.css อ้างอิงตัวแปร --bg, --bg2, --bg3, --primary, --text, --muted, --border อยู่แล้วทุกที่ — ไฟล์นี้แค่ "เปลี่ยนค่าตัวแปรเหล่านั้น" ตาม data-theme/data-mode ที่ตั้งไว้บน เท่านั้น ลำดับการโหลดต้องมาหลัง style.css เสมอ */ /* ======================================================== 1) ดำ (เดิม) — Classic Dark ของระบบ NOOMQ ตั้งแต่แรก ======================================================== */ html[data-theme="classic"][data-mode="dark"] { --bg: #0f172a; --bg2: #1e293b; --bg3: #334155; --primary: #3b82f6; --success: #22c55e; --danger: #ef4444; --warning: #f59e0b; --text: #f1f5f9; --muted: #94a3b8; --border: #334155; } html[data-theme="classic"][data-mode="light"] { --bg: #f1f5f9; --bg2: #ffffff; --bg3: #e2e8f0; --primary: #2563eb; --success: #16a34a; --danger: #dc2626; --warning: #d97706; --text: #0f172a; --muted: #64748b; --border: #cbd5e1; } /* ======================================================== 2) น้ำเงินทางการ — Professional Blue ======================================================== */ html[data-theme="blue"][data-mode="dark"] { --bg: #0b1320; --bg2: #15233a; --bg3: #1f3354; --primary: #3b82f6; --success: #22c55e; --danger: #ef4444; --warning: #f59e0b; --text: #eef2ff; --muted: #93a4c3; --border: #28406a; } html[data-theme="blue"][data-mode="light"] { --bg: #eef3fb; --bg2: #ffffff; --bg3: #dbe6f8; --primary: #2563eb; --success: #16a34a; --danger: #dc2626; --warning: #d97706; --text: #0b1f3f; --muted: #5b6f93; --border: #c4d5ef; } /* ======================================================== 3) เขียวการศึกษา — Academic Teal ======================================================== */ html[data-theme="teal"][data-mode="dark"] { --bg: #08201c; --bg2: #0f2e28; --bg3: #16403a; --primary: #14b8a6; --success: #22c55e; --danger: #ef4444; --warning: #f59e0b; --text: #ecfdf9; --muted: #8fbab0; --border: #1f5c52; } html[data-theme="teal"][data-mode="light"] { --bg: #eefaf7; --bg2: #ffffff; --bg3: #d7f0e9; --primary: #0f766e; --success: #15803d; --danger: #dc2626; --warning: #b45309; --text: #07211c; --muted: #50796f; --border: #b9e3d8; } /* ======================================================== 4) ม่วงสุภาพ — Royal Violet ======================================================== */ html[data-theme="violet"][data-mode="dark"] { --bg: #160f2b; --bg2: #211740; --bg3: #2f2258; --primary: #8b5cf6; --success: #22c55e; --danger: #ef4444; --warning: #f59e0b; --text: #f3effc; --muted: #a692c9; --border: #3c2c6b; } html[data-theme="violet"][data-mode="light"] { --bg: #f5f1fc; --bg2: #ffffff; --bg3: #e7defa; --primary: #7c3aed; --success: #16a34a; --danger: #dc2626; --warning: #d97706; --text: #1d1336; --muted: #6e6189; --border: #d8caf2; } /* ======================================================== 5) ส้มอบอุ่น — Warm Amber ======================================================== */ html[data-theme="amber"][data-mode="dark"] { --bg: #211405; --bg2: #311e08; --bg3: #46290a; --primary: #f59e0b; --success: #22c55e; --danger: #ef4444; --warning: #fbbf24; --text: #fef6ea; --muted: #c9a679; --border: #5a3a10; } html[data-theme="amber"][data-mode="light"] { --bg: #fdf6ec; --bg2: #ffffff; --bg3: #f6e6c9; --primary: #b45309; --success: #15803d; --danger: #dc2626; --warning: #b45309; --text: #2b1c08; --muted: #836a45; --border: #ecd9ad; } /* ค่าเริ่มต้นเผื่อยังไม่เคยตั้ง data-theme/data-mode มาก่อน (ผู้ใช้ครั้งแรก) */ html:not([data-theme]) { --bg: #0f172a; --bg2: #1e293b; --bg3: #334155; --primary: #3b82f6; --success: #22c55e; --danger: #ef4444; --warning: #f59e0b; --text: #f1f5f9; --muted: #94a3b8; --border: #334155; } /* transition นุ่มๆ ตอนสลับ theme ไม่ให้กระพริบแข็งๆ */ body, .sidebar, .card, .form-control, .btn-outline { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }