คู่มือ ปรับแต่ง Theme

1เปิดหน้า Theme Editor

ไปที่ https://longtunpen-concept.pages.dev/theme

จะเห็นหน้าจอแบ่งเป็น 2 ฝั่ง:

• ซ้าย — ปุ่มควบคุม (Preset + Color tokens)
• ขวา — Preview แสดงผลทันที

2เลือก Preset เริ่มต้น

ในกล่อง Presets ทางซ้าย คลิกหนึ่งใน:

• Default · Bright Salon · Deep Editorial · Warm Paper · Bold Gold

→ Preview ฝั่งขวาเปลี่ยนทันที · เลือกอันที่ ใกล้เคียง ที่อยากได้ที่สุด

3ดู Preview · ระบุจุดที่อยาก "ทรงเดิม แต่..."

Scroll ดู preview ทั้งหน้าจอ:

• Brand color · Buttons · Section Header · Cards · Pull-quote

ถ้าเห็นว่า "สีน้ำเงินเข้มเกินไป" หรือ "สีทองหม่นไป" → จดไว้

4หา ช่องสี ที่ตรงกับสีที่จะแก้

Scroll ลงในแผงควบคุม (ซ้าย) ไปที่ สี ของ Theme · จะเห็น 11 ช่องสี · แต่ละช่องมีชื่อ + swatch + รหัส HEX:

5คลิก ช่องสี · เปิด Color Picker

คลิกที่ ช่องสี ที่ต้องการแก้ → จะเปิด Color Picker ของ browser

• เลือกสีใหม่จาก Color Picker
• หรือพิมพ์ HEX code เช่น #C9A357

6ดู Preview เปลี่ยน เรียลไทม์

ทุกการปรับสี · preview ขวาจะอัปเดต ทันที

• ถ้าไม่ใช่ → ลองสีอื่น
• ถ้าใช่ → ไปข้อต่อไป

7ปรับ ช่องสี อื่นเพิ่ม (ถ้าจำเป็น)

ทำซ้ำขั้น 5-6 กับช่องสีอื่น ๆ:

• เช่น แก้ gold → ปกติต้องแก้ gold-soft + gold-line ตามไปด้วยให้กลมกลืน
• หรือเปลี่ยน navy → อาจต้องดู navy-soft ด้วย

8บันทึกเป็น Preset

เลื่อนกลับไปบน Presets · ที่ท้าย grid จะมีช่อง + บันทึก preset · ของฉันเอง

• คลิก
• พิมพ์ชื่อ (เช่น ปรับ-รอบ1 หรือ Light & Gold)
• กดบันทึก
• Preset ใหม่ขึ้นใน grid พร้อม badge SAVED

9ทดสอบบน เว็บจริง

• คลิกปุ่ม เปิดหน้าเว็บจริง → มุมขวาบน
• ไปดูที่หน้าเว็บจริง
• กดที่ dropdown theme (มุมขวาล่าง) → เลือก preset ของคุณ
• Scroll ดูทั้งหน้า · ตรวจสอบ feel โดยรวม

10ส่ง ชื่อ preset ให้ทีม

หลังบันทึก · preset จะปรากฏใน dropdown ของทุกคนใน 5-10 วินาที โดยอัตโนมัติ

• ส่งทีม → บอก ชื่อ preset ที่ตั้ง (เช่น ปรับ-รอบ1)
• ทีมเปิดเว็บ → คลิก theme dropdown มุมขวาล่าง → เลือกชื่อนั้น
• เห็น theme เดียวกันทันที