shadcn/ui Theme Generator: สร้างธีม HSL สำหรับ shadcn/ui ได้ในไม่กี่วินาที

ทุกโปรเจกต์ที่ใช้ shadcn/ui จะดึงเอกลักษณ์ทางสายตาทั้งหมดมาจากก้อน CSS variables สั้น ๆ บนหัวไฟล์ globals.css เพียงจุดเดียว พอคุณเปลี่ยนค่า tokens เหล่านี้ ปุ่ม การ์ด dialog และ badge ทุกชิ้นในแอปจะเปลี่ยนตามทันที ซึ่งทรงพลังมาก แต่จะเกิดขึ้นได้ก็ต่อเมื่อคุณสร้างชุด tokens ที่กลมกลืนกันออกมาได้ก่อน การแปลงสีจาก hex เป็น HSL ด้วยมือ จูนสีให้ light mode กับ dark mode ไปด้วยกันได้ และรักษาระบบ radius ให้สม่ำเสมอ เป็นงานที่ยุ่งยากและพลาดได้ง่าย

เครื่องมือ shadcn/ui Theme Generator ช่วยย่องานทั้งหมดนี้ให้เหลือหน้าจอเดียว เพียงเลือก base color แล้วเครื่องมือจะสร้างชุด HSL CSS variable tokens ของ shadcn/ui แบบครบถ้วน พร้อม corner radius เป็นหน่วย rem และ block สำหรับ light mode กับ dark mode จากนั้นมอบผลลัพธ์เป็น globals.css ที่คัดลอกไปวางได้ทันที ด้านข้างมี live preview ที่เรนเดอร์ primary button การ์ด และพื้นผิว muted ด้วยธีมใหม่ของคุณ เพื่อให้คุณประเมินผลได้ก่อนที่โค้ดจริงจะถูกแตะ

บทความนี้จะพาไปดูว่าเครื่องมือนี้ทำอะไรได้บ้าง วิธีใช้งานครบทั้ง 5 ขั้นตอน ความหมายของค่า HSL tokens ที่อยู่ข้างใน รวมถึงกรณีการใช้งานจริงและแนวทางปฏิบัติที่แนะนำสำหรับทีมที่ใช้ shadcn/ui อย่างจริงจัง

ทำไมต้องใช้ shadcn/ui Theme Generator?

• ประหยัดเวลาคำนวณค่าสี: การแปลงสี hex ของแบรนด์เป็นช่อง HSL ที่ shadcn/ui ต้องการ แล้วไล่สร้างตัวแปร background, foreground, muted และ border ตามมาเป็นงานที่ช้า เครื่องมือนี้ทำให้เสร็จทันทีและได้ผลสม่ำเสมอทุกครั้ง
• ผลลัพธ์พร้อมคัดลอกวาง: ได้ snippet ในรูปแบบ globals.css ที่ถูกต้อง แค่วาง เซฟ แล้วคอมโพเนนต์ทั้งไลบรารีจะเปลี่ยนธีมให้เอง
• ได้ทั้ง light และ dark ในรอบเดียว: เครื่องมือสร้างทั้ง block :root และ block .dark ออกมาพร้อมกัน ทำให้ dark mode ไม่ถูกทิ้งไว้เป็นการบ้านท้ายสุดอีกต่อไป
• radius ที่ขยายตามดีไซน์: corner radius ถูกสร้างเป็นหน่วย rem และเชื่อมกับระบบ rounding ของ shadcn/ui ทำให้ปุ่ม การ์ด และ dialog คงสัดส่วนที่เข้ากันเสมอ
• เห็นผลลัพธ์ทันตา: live preview แสดง primary button พร้อมพื้นผิว card และ muted ช่วยให้คุณเช็ก contrast และอารมณ์โดยรวมของธีมก่อนตัดสินใจใช้งานจริง
• ไม่ต้องติดตั้งอะไรเลย: ทำงานในเบราว์เซอร์ทั้งหมด ไม่ต้องสมัครบัญชี ไม่ต้องติดตั้งโปรแกรม และไม่มีการอัปโหลดข้อมูลใด ๆ

ฟีเจอร์หลัก

นี่คือสิ่งที่เครื่องมือแสดงให้เห็นบนหน้าจอ:

จุดที่น่าสนใจเพิ่มเติม:

• ค่า HSL ที่ได้อยู่ในรูปแบบ raw channels ตามที่ shadcn/ui ระบุไว้พอดี จึงนำไปวางในโปรเจกต์เดิมได้เลยโดยไม่ต้องแก้รูปแบบใด ๆ
• เพราะทุกสี derive มาจาก base color เดียว พาเลตต์ light และ dark จึงสัมพันธ์กันทางสายตา ไม่หลุดแยกจากกัน
• การไล่ธีมทำได้ไว ปรับสีหรือ radius แล้วดู preview ก่อนกดคัดลอกซ้ำได้ในไม่กี่วินาที

วิธีใช้งาน shadcn/ui Theme Generator

เวิร์กโฟลว์ทั้งหมดใช้เวลาไม่ถึงหนึ่งนาที:

1. เลือก base color เริ่มจาก picker หยิบเฉดสีที่เป็นแกนของแบรนด์คุณ เครื่องมือจะ derive ชุด tokens ทั้งหมดจากตัวเลือกนี้จุดเดียว จึงเป็นการตัดสินใจที่สำคัญที่สุด
2. จูน corner radius เลื่อนค่า radius (หน่วย rem) จนปุ่มและการ์ดใน preview รู้สึกถูกใจ ค่าน้อยให้ความรู้สึกเรียบคมแบบองค์กร ส่วนค่ามากให้ความรู้สึกนุ่มนวลเป็นมิตร
3. เช็กพรีวิวทั้งสองโหมด เทียบ light mode กับ dark mode ใน live preview ให้แน่ใจว่า primary button เด่นพอและตัวอักษรยังอ่านได้สบายบนพื้น muted ในทั้งสองโหมด
4. กด Copy CSS คัดลอกธีมทั้งก้อน ทั้ง block :root และ .dark ลงคลิปบอร์ดในคลิกเดียว
5. วางลง globals.css แทนที่ก้อน tokens บนหัวไฟล์ globals.css ของโปรเจกต์ด้วยผลลัพธ์ที่คัดลอกมา แล้วเซฟและรีโหลด คอมโพเนนต์ shadcn/ui ทุกตัวจะรับธีมใหม่โดยอัตโนมัติ

ทำความเข้าใจ CSS Variables ของ shadcn/ui

รูปแบบผลลัพธ์อาจดูแปลกตาสำหรับมือใหม่ tokens ถูกเขียนแบบนี้ --primary: 142 72% 29% ไม่มี hsl() ครอบ และไม่มีลูกน้ำ มีแค่สามช่อง HSL ดิบคั่นด้วยช่องว่างเท่านั้น ซึ่งเป็นเรื่องที่ตั้งใจไว้ เพราะคอมโพเนนต์ shadcn/ui ไม่ได้อ่าน --primary ตรง ๆ แต่อ่านผ่าน Tailwind utilities ที่ครอบค่านี้ด้วย hsl() เช่น hsl(var(--primary)) ถ้าตัวแปรมี hsl() อยู่ข้างในตั้งแต่แรก wrapper จะพังทันที และ color utility ทุกตัวจะกลายเป็น CSS ที่ไม่ valid

การเก็บ raw channels ยังให้ความยืดหยุ่นเพิ่มขึ้นด้วย คุณใส่ opacity ได้โดยต่อท้าย wrapper เป็น hsl(var(--primary) / 0.5) และคู่สี foreground/background ยังประกอบเข้าด้วยกันได้เสมอ นี่คือเหตุผลที่เครื่องมือส่งออกค่าในรูปแบบนี้ ไม่ใช่ hex หรือ rgb เพราะเป็นรูปแบบที่ไลบรารีคอมโพเนนต์ทั้งหมดถูกออกแบบมาให้ใช้งาน

block .dark ก็สำคัญไม่แพ้กัน เมื่อ dark mode ทำงาน (โดยทั่วไปคือการใส่ class บนแท็ก html) selector .dark จะ override ตัวแปรชื่อเดิมด้วยชุดค่าที่ปรับสำหรับพื้นมืด foreground สว่างขึ้น background มืดลง และ primary ถูกปรับเล็กน้อยเพื่อรักษา contrast บนพื้นสีเกือบดำ เพราะเครื่องมือสร้างทั้งสอง block จาก base color เดียวกัน สองโหมดจึงกลมกลืนกันทางสายตา

สุดท้าย --radius คือปุ่มควบคุมรูปทรงของไลบรารีทั้งหมด shadcn/ui คำนวณ utilities ตั้งแต่ rounded-sm จนถึง rounded-xl จาก calc(var(--radius) - Xpx) ค่า rem เพียงค่าเดียวจึงกำหนดว่าปุ่ม การ์ด dialog และ input ทุกตัวจะโค้งมุมมากน้อยแค่ไหน ปรับ radius ในเครื่องมือครั้งเดียว ภาษาดีไซน์ทั้งชุดก็เปลี่ยนจากเหลี่ยมคมเป็นโค้งนุ่มโดยไม่ต้องแตะไฟล์คอมโพเนนต์แม้แต่ไฟล์เดียว

กรณีการใช้งานจริง

จับสีแบรนด์ให้เข้าธีมได้ในไม่กี่นาที

ลูกค้าส่งโลโก้พร้อมโค้ดสี hex มาให้ แทนที่จะไล่ถอดดีไซน์ซิสเทมของเขาทีละชิ้น ให้เอาสีนั้นไปใส่ในเครื่องมือ ปรับ radius ให้เข้ากับ UI เดิม คัดลอกธีม แล้วแอป shadcn/ui ทั้งแอปของเขาจะเข้าธีมแบรนด์ภายในไม่กี่นาที รวมถึง dark mode ที่เขาอาจยังไม่ทันได้ขอด้วยซ้ำ

ทำธีมต้นแบบให้ลูกค้าอย่างรวดเร็ว

ช่วงที่ทิศทางงานยังไม่นิ่ง ลองสร้างธีมสามถึงสี่ชุดจากสีแบรนด์ที่เป็นไปได้ แล้วแคปหน้าจอ live preview ของแต่ละแบบไปเสนอ ผู้มีส่วนเกี่ยวข้องตัดสินใจจากของจริงได้เร็วกว่าดูแผ่นสีเปล่า ๆ และการเปลี่ยนทิศทางใช้เวลาเพียงไม่กี่วินาที ไม่ใช่การ refactor ทั้งโปรเจกต์

ให้ dark mode สม่ำเสมอตั้งแต่วันแรก

dark mode มักถูกใส่ไว้ทีหลัง ซึ่งเป็นจังหวะที่ความไม่สม่ำเสมอเริ่มโผล่มาให้เห็น เพราะเครื่องมือสร้าง block .dark มาพร้อมกับ tokens ฝั่งสว่าง ทุกโปรเจกต์ใหม่ของคุณจึงมีพาเลตต์มืดที่กลมกลืนตั้งแต่ก่อนจะเขียนคอมโพเนนต์แรกเสียอีก

ส่งมอบงานออกแบบอย่างเป็นระบบ

แทนที่จะส่งไฟล์ mockup แล้วหวังว่านักพัฒนาจะแปลงออกมาถูกต้อง ให้แนบ snippet globals.css ที่สร้างไว้ไปพร้อมกับตั๋วงาน ตัว implementation ก็คือสเปก ตัวแปรชุดเดียวกัน radius เดียวกัน และพฤติกรรมคอมโพเนนต์เดียวกันทั้งสองฝั่งของการส่งมอบงาน

แนวทางปฏิบัติที่แนะนำ

• เช็ก contrast ของ --primary ก่อนส่งงาน: preview ช่วยได้มาก แต่ปุ่มที่มีตัวอักษรเยอะควรยืนยันว่าสีขาวบนพื้น primary ยังผ่านเกณฑ์ WCAG AA โดยเฉพาะกับเฉดที่สดจัด
• รักษา radius ให้สม่ำเสมอทั้งแอป: อย่าเขียน override rounded-lg แบบกระจัดกระจาย ปล่อยให้ --radius เป็นผู้กำหนดทุกมุมโค้ง ระบบจะยังคงเป็นเอกภาพ
• commit tokens ที่สร้างไว้ลง version control: เก็บผลลัพธ์ไว้คู่กับโค้ดใน git ตัวแปรเหล่านี้คือแหล่งความจริงของดีไซน์ซิสเทมของคุณ
• คุม light และ dark ให้ขยับพร้อมกัน: ถ้าแก้ตัวแปรใดด้วยมือ ให้ regenerate หรือสะท้อนการเปลี่ยนแปลงไปยังอีก block ด้วย ความไม่สมมาตรจะกลับมาเป็นบั๊ก dark mode พังในภายหลัง
• เลี่ยงค่า hex เดี่ยว ๆ ในคอมโพเนนต์: ถ้าสีไหนยังไม่มีเป็น token ให้เพิ่มเป็น token เสียก่อน ดีกว่า hardcode ทิ้งไว้ในไฟล์คอมโพเนนต์
• พอแบรนด์เปลี่ยนให้กลับมาสร้างใหม่: การ regenerate จาก base color ตัวใหม่เร็วและปลอดภัยกว่าการไล่แก้ตัวแปรด้วยมือทีละตัว

พร้อมเปลี่ยนธีมโปรเจกต์ถัดไปแล้วหรือยัง เปิด shadcn/ui Theme Generator ใส่ base color ของคุณ แล้วคัดลอกธีม globals.css ที่พร้อมใช้งานจริงได้ภายในเวลาไม่ถึงนาที จากนั้นเติม design tokens ส่วนที่เหลือให้ครบด้วยเครื่องมือที่เกี่ยวข้องด้านล่างนี้

เครื่องมืออื่น ๆ ที่คุณอาจสนใจ:

• Color Palette Generator — สร้างพาเลตต์เต็มรูปแบบจากสีเดียวก่อนนำไปทำธีม
• Border Radius Generator — ทดลองค่ามุมโค้งกับ element หลายชนิด
• Box Shadow Generator — เพิ่มเงาและมิติให้การ์ดและ dropdown ให้เข้ากับธีม

ขอให้สนุกกับการแต่งธีม!

คำถามที่พบบ่อย

ถ: ต้องติดตั้งอะไรก่อนใช้เครื่องมือนี้หรือไม่? ตอบ: ไม่ต้องเลย เครื่องมือทำงานในเบราว์เซอร์ทั้งหมด เลือกสี จูน radius แล้วคัดลอก CSS ได้ทันที ไม่มีข้อมูลใดถูกอัปโหลดไปยังเซิร์ฟเวอร์ใด ๆ

ถ: ทำไมค่าสีถึงเขียนเป็นตัวเลขดิบอย่าง 142 72% 29% แทนที่จะเป็น hsl(142 72% 29%)? ตอบ: เพราะคอมโพเนนต์ shadcn/ui อ่านตัวแปรเหล่านี้ผ่าน wrapper hsl(var(--primary)) ในฝั่ง Tailwind การเก็บเพียง raw channels ทำให้ wrapper ยังใช้งานได้ และ utility ต่าง ๆ ใส่ opacity ด้วย syntax / alpha ได้ตามปกติ

ถ: ธีมที่สร้างได้ใช้กับ Tailwind CSS v4 ได้หรือไม่? ตอบ: ได้ ผลลัพธ์เป็น CSS variables ธรรมดาในรูปแบบมาตรฐานของ shadcn/ui จึงใช้ได้ทั้งโปรเจกต์ที่ map สีใน tailwind.config (v3) และโปรเจกต์ที่เชื่อมผ่าน @theme layer (v4)

ถ: ใช้ธีมนี้กับโปรเจกต์ที่ไม่ได้ใช้ shadcn/ui ได้หรือไม่? ตอบ: ได้แน่นอน ตัวแปรเหล่านี้เป็น CSS custom properties ธรรมดา อ้างอิงได้ด้วย hsl(var(--primary)) ใน stylesheet หรือคอมโพเนนต์ใดก็ได้ จะมี Tailwind หรือไม่มีก็ตาม