/* ═══════════════════════════════════════════════════════════════════════════ theme.css — สีพื้น / แถบบน / ผิวการ์ด ของทั้งเว็บ อยู่ที่ไฟล์นี้ไฟล์เดียว ─────────────────────────────────────────────────────────────────────────── [9 ก.ย. 69 เจ้าของจับได้เอง] "สีพื้นหลังขอบบนและล่าง ระหว่างหน้าสมาชิกกับหน้า Signal ใช้สีไม่เหมือนกัน หน้าสมาชิกพื้นหลังออกสีขาว แต่หน้า Signal พื้นหลังออกเทากว่า" ตรวจแล้วจริง และเพี้ยนมากกว่าที่เห็น — วัดจากไฟล์ที่ขึ้นเว็บจริง: หน้าสมาชิก พื้น #F5F8FA · แถบบน rgba(255,255,255,.94) Signal/แรก พื้น #FAFAFA · แถบบน rgba(250,250,250,.92) detail พื้น #F8FAFC · แถบบน rgba(248,250,252,.92) plans พื้น #FAFAFA · แถบบน "ไม่มีสีเลย" (ลืมใส่สคริปต์) = พื้น 3 สี · แถบบน 4 แบบ · โหมดมืดก็เพี้ยนคนละชุด (#080808 vs #0A0A0A) ต้นเหตุ 2 อย่าง: 1. หน้าสมาชิกใช้ ซึ่งโดน body.mb-body{background:var(--mb-page)} ใน member.css ทับ (specificity ชนะ body{...}) → ได้ #F5F8FA คนเดียว 2. สีแถบบนถูก "พิมพ์มือ" ไว้ในสคริปต์ของแต่ละหน้า ไม่ได้อ่านจากตัวแปรกลาง → เพิ่มหน้าใหม่ทีไรก็ลอกผิดหรือลืมใส่ทุกที (plans.html คือหลักฐาน) ── ทำไมเลือก #F5F8FA (ค่าของหน้าสมาชิก) ไม่ใช่ #FAFAFA ── ดีไซน์ที่ใช้คือ "การ์ดขาวไม่มีเส้นขอบ" → พื้นหลังต้องทำหน้าที่แทนเส้นขอบ ระยะห่างจากการ์ดขาว #FFFFFF (ยิ่งมากยิ่งเห็นการ์ดลอย): #FAFAFA → 8.7 ใกล้ขาวเกิน การ์ดจมหาย ต้องพึ่งเส้นขอบ #F8FAFC → 9.1 เหมือนกัน #F5F8FA → 13.2 ✅ การ์ดลอยชัดโดยไม่ต้องมีเส้นขอบ #F1F5F9 → 18.2 เข้มไป เริ่มดูเป็นกล่องเทา ตัวหนังสือรอง (--text-muted #64707E) ผ่าน WCAG AA ทั้งสามสี (4.7–4.8:1) จึงไม่ใช่ตัวตัดสิน · #F5F8FA อมฟ้าจาง ๆ เป็นโทนมาตรฐานของหน้าจอข้อมูล โหมดมืด: การ์ดคือ #141414 · พื้น #0A0A0A ให้ระยะพอดี (17.3) ส่วน #080808 ห่างเกิน (20.8) จนการ์ดดูเหมือนลอยอยู่บนรู ⚠️ ห้ามพิมพ์สีพวกนี้ซ้ำในหน้าใดหน้าหนึ่งอีก — แก้ที่นี่ที่เดียว มี tools/test-theme-colors.mjs วัดสีจริงทุกหน้าไว้กันเพี้ยนซ้ำ ═══════════════════════════════════════════════════════════════════════════ */ :root[data-theme="light"] { --bg-page: #F5F8FA; /* พื้นหน้า — เท่ากับ --mb-page ของหน้าสมาชิก */ --nav-bg: rgba(255, 255, 255, .94); /* แถบบน — ขาวกว่าพื้น จึงแยกเป็นชั้นลอย */ --surface: #FFFFFF; /* ผิวการ์ด/ฟุตเตอร์ */ --surface-sh: 0 1px 2px rgba(0, 0, 0, .05); } :root[data-theme="dark"] { --bg-page: #0A0A0A; --nav-bg: rgba(20, 20, 20, .94); --surface: #141414; --surface-sh: 0 1px 2px rgba(0, 0, 0, .5); } /* พื้นหน้า — ใช้ .mb-body ร่วมด้วยให้ specificity ชนะกฎเดิมของหน้าสมาชิก (ไม่งั้น body.mb-body{background:var(--mb-page)} จะยังชนะอยู่) */ body, body.mb-body { background: var(--bg-page); } /* แถบบน — เดิมตั้งด้วย JS เป็น inline style ทีละหน้า ตอนนี้ย้ายมาที่นี่ · sync-theme.mjs ถอดบรรทัด JS พวกนั้นออกให้แล้ว */ #navbar { background: var(--nav-bg); }