เครื่องสร้างธีม shadcn/ui

เครื่องสร้างธีม shadcn/ui ฟรี สร้างธีม HSL CSS variable ครบทั้งโหมดสว่างและมืดพร้อมตั้งค่า radius จากสีพื้นฐานสีเดียว คัดลอกไปวางใน globals.css ได้เลย

Loading tool...

เครื่องสร้างธีม shadcn/ui คืออะไร?

เครื่องสร้างธีม shadcn/ui เปลี่ยนสีแบรนด์หนึ่งสีให้เป็นชุดเต็มของ HSL CSS variables สำหรับ shadcn/ui ทั้งโหมดสว่างและมืด พร้อมโทเคน radius ดูพรีวิวสดแล้ววางบล็อกที่สร้างได้ลง globals.css ได้เลย

ประโยชน์หลัก

ธีมสม่ำเสมอและดูมืออาชีพ โดยไม่ต้องเลือกสียี่สิบสีด้วยมือ
สร้างโหมดสว่างและมืดพร้อมกัน จึงเข้ากันเสมอ
พรีวิวคอมโพเนนต์สดช่วยจับปัญหาก่อน commit
ผลลัพธ์พร้อมคัดลอกวาง - ไม่ต้องจัดรูปแบบเอง
เร็วพอให้ไล่ลองพาเลตแบรนด์ได้ในไม่กี่นาที

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

•เปลี่ยนแบรนด์โปรเจกต์ shadcn/ui ด้วยสี primary ใหม่
•เริ่มแดชบอร์ดใหม่ด้วยชุด design token ที่กลมกลืน
•เทียบสีแบรนด์ที่เป็นตัวเลือกในพรีวิว UI จริง
•จัดเครื่องมือภายในให้ตรงแนวทางดีไซน์ขององค์กร

วิธีใช้เครื่องสร้างธีม shadcn/ui

เลือกสีแบรนด์: ใช้ตัวเลือกสีเลือกสีพื้นฐานสำหรับโทเคน primary ของคุณ
ปรับ radius: เลื่อนรัศมีมุมให้ตรงดีไซน์ - 0.5rem คือค่าเริ่มต้นของ shadcn
ดูพรีวิว: เทียบปุ่มและการ์ดทั้งโหมดสว่างและมืดแบบเคียงข้างกัน
คัดลอกลง globals.css: คัดลอกบล็อกที่สร้างได้แล้วแทนที่ตัวแปรใน globals.css ของคุณ

คุณสมบัติหลัก

สร้างบล็อก :root และ .dark ครบจากสีพื้นฐานสีเดียว
โทเคน shadcn/ui ครบ: background, primary, secondary, muted, accent, ring
สไลเดอร์โทเคน radius 0 ถึง 1.5 rem
พรีวิวคอมโพเนนต์สดทั้งสองโหมด
คัดลอกบล็อก globals.css ทั้งหมดในคลิกเดียว
ทำงานออฟไลน์ - ไม่อัปโหลด ไม่ติดตาม

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

ผลลัพธ์รองรับ shadcn/ui เวอร์ชันใด?

บล็อกที่สร้างได้ใช้รูปแบบ HSL variable แบบคลาสสิกของ shadcn/ui กับ Tailwind CSS v3 และ v4 ที่ใช้ HSL ถ้าโปรเจกต์คุณใช้ฟอร์แมต oklch ใหม่ ชื่อตัวแปรยังเหมือนเดิม

ทำไมสีเป็นตัวเลข HSL สามตัว?

ตัวแปร shadcn/ui เก็บช่อง HSL เปล่า เพื่อให้ Tailwind class ห่อด้วย hsl() และใช้ opacity modifier ได้ วางบล็อกตามที่สร้างได้เลย

สี destructive และ chart ถูกจัดการด้วยหรือไม่?

destructive ถูกรวมมาพร้อมค่าที่เหมาะสม ส่วน chart variables ขึ้นกับโปรเจกต์ ปรับเพิ่มหลังวางธีมหลัก

ใช้ผลลัพธ์นอก shadcn/ui ได้หรือไม่?

ได้ - เป็น CSS ธรรมดา ทุก setup ของ Tailwind หรือ CSS ที่มีชื่อตัวแปรเหล่านี้จะใช้ธีมนี้ได้

คู่มือฉบับละเอียด

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

อ่านคู่มือฉบับเต็ม →

เครื่องสร้างธีม shadcn/ui

สีพื้นฐาน

รัศมีมุม (rem): 0.5

โหมดสว่าง

พรีวิวการ์ด / พื้นผิว muted

โหมดมืด

พรีวิวการ์ด / พื้นผิว muted

globals.css

:root {
  --background: 221 40% 97%;
  --foreground: 221 20% 10%;
  --card: 221 40% 97%;
  --card-foreground: 221 20% 10%;
  --popover: 221 40% 97%;
  --popover-foreground: 221 20% 10%;
  --primary: 221 83% 53%;
  --primary-foreground: 221 30% 98%;
  --secondary: 221 30% 94%;
  --secondary-foreground: 221 20% 10%;
  --muted: 221 25% 95%;
  --muted-foreground: 221 15% 38%;
  --accent: 221 35% 93%;
  --accent-foreground: 221 20% 10%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 221 30% 98%;
  --border: 221 20% 89%;
  --input: 221 20% 89%;
  --ring: 221 83% 50%;
  --radius: 0.5rem;
}

.dark {
  --background: 221 25% 8%;
  --foreground: 221 20% 96%;
  --card: 221 25% 8%;
  --card-foreground: 221 20% 96%;
  --popover: 221 25% 8%;
  --popover-foreground: 221 20% 96%;
  --primary: 221 85% 60%;
  --primary-foreground: 221 30% 10%;
  --secondary: 221 20% 16%;
  --secondary-foreground: 221 20% 96%;
  --muted: 221 20% 15%;
  --muted-foreground: 221 15% 65%;
  --accent: 221 25% 18%;
  --accent-foreground: 221 20% 96%;
  --destructive: 0 72% 55%;
  --destructive-foreground: 221 20% 96%;
  --border: 221 15% 20%;
  --input: 221 15% 20%;
  --ring: 221 85% 55%;
  --radius: 0.5rem;
}

เกี่ยวกับเครื่องมือนี้

เครื่องสร้างธีม shadcn/ui เปลี่ยนสีพื้นฐานสีเดียวให้เป็นธีม shadcn/ui ครบถ้วน: CSS variable แบบ HSL ครบทุกตัวทั้ง background, primary, secondary, muted, accent, border และ ring - ทั้งโหมดสว่างและมืด - พร้อมโทเคน border-radius วางบล็อกที่สร้างได้ลงใน globals.css ของคุณตรงๆ แล้วไลบรารีคอมโพเนนต์ทั้งหมดจะใช้สีแบรนด์ของคุณ พรีวิวสดแสดงปุ่มและการ์ดทั้งสองโหมดก่อนคัดลอก

ทำไมต้องสร้างธีม shadcn?

•การแก้ CSS variable ยี่สิบตัวให้สอดคล้องกันนั้นช้าและผิดพลาดง่าย
•สีแบรนด์หนึ่งสีควรขับเคลื่อนทั้งอินเทอร์เฟซ ทั้งสว่างและมืด
•ความสัมพันธ์ของโทเคน HSL ที่ถูกต้องรักษา contrast และลำดับชั้น
•ปรับโทเคน radius ให้ตรงดีไซน์ซิสเทมได้ในไม่กี่วินาที
•เครื่องมือทำงานออฟไลน์และเป็นส่วนตัว - ข้อมูลดีไซน์ไม่ออกจากหน้า

คุณสมบัติเด่น

✓บล็อกตัวแปร :root และ .dark ครบจากสีพื้นฐานสีเดียว
✓โทเคน shadcn/ui ครบ: background, primary, muted, accent, ring และอื่นๆ
✓ปรับโทเคน border-radius ได้ 0 ถึง 1.5 rem
✓พรีวิวสดทั้งโหมดสว่างและมืดของปุ่มและการ์ด
✓คัดลอกบล็อก globals.css พร้อมวางได้ในคลิกเดียว

Loading tool...

เครื่องสร้างธีม shadcn/ui คืออะไร?

ประโยชน์หลัก

ธีมสม่ำเสมอและดูมืออาชีพ โดยไม่ต้องเลือกสียี่สิบสีด้วยมือ
สร้างโหมดสว่างและมืดพร้อมกัน จึงเข้ากันเสมอ
พรีวิวคอมโพเนนต์สดช่วยจับปัญหาก่อน commit
ผลลัพธ์พร้อมคัดลอกวาง - ไม่ต้องจัดรูปแบบเอง
เร็วพอให้ไล่ลองพาเลตแบรนด์ได้ในไม่กี่นาที

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

•เปลี่ยนแบรนด์โปรเจกต์ shadcn/ui ด้วยสี primary ใหม่
•เริ่มแดชบอร์ดใหม่ด้วยชุด design token ที่กลมกลืน
•เทียบสีแบรนด์ที่เป็นตัวเลือกในพรีวิว UI จริง
•จัดเครื่องมือภายในให้ตรงแนวทางดีไซน์ขององค์กร

วิธีใช้เครื่องสร้างธีม shadcn/ui

เลือกสีแบรนด์: ใช้ตัวเลือกสีเลือกสีพื้นฐานสำหรับโทเคน primary ของคุณ
ปรับ radius: เลื่อนรัศมีมุมให้ตรงดีไซน์ - 0.5rem คือค่าเริ่มต้นของ shadcn
ดูพรีวิว: เทียบปุ่มและการ์ดทั้งโหมดสว่างและมืดแบบเคียงข้างกัน
คัดลอกลง globals.css: คัดลอกบล็อกที่สร้างได้แล้วแทนที่ตัวแปรใน globals.css ของคุณ

คุณสมบัติหลัก

สร้างบล็อก :root และ .dark ครบจากสีพื้นฐานสีเดียว
โทเคน shadcn/ui ครบ: background, primary, secondary, muted, accent, ring
สไลเดอร์โทเคน radius 0 ถึง 1.5 rem
พรีวิวคอมโพเนนต์สดทั้งสองโหมด
คัดลอกบล็อก globals.css ทั้งหมดในคลิกเดียว
ทำงานออฟไลน์ - ไม่อัปโหลด ไม่ติดตาม

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

ผลลัพธ์รองรับ shadcn/ui เวอร์ชันใด?

ทำไมสีเป็นตัวเลข HSL สามตัว?

สี destructive และ chart ถูกจัดการด้วยหรือไม่?

ใช้ผลลัพธ์นอก shadcn/ui ได้หรือไม่?

คู่มือฉบับละเอียด

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

อ่านคู่มือฉบับเต็ม →

:root { --background: 221 40% 97%; --foreground: 221 20% 10%; --card: 221 40% 97%; --card-foreground: 221 20% 10%; --popover: 221 40% 97%; --popover-foreground: 221 20% 10%; --primary: 221 83% 53%; --primary-foreground: 221 30% 98%; --secondary: 221 30% 94%; --secondary-foreground: 221 20% 10%; --muted: 221 25% 95%; --muted-foreground: 221 15% 38%; --accent: 221 35% 93%; --accent-foreground: 221 20% 10%; --destructive: 0 84% 60%; --destructive-foreground: 221 30% 98%; --border: 221 20% 89%; --input: 221 20% 89%; --ring: 221 83% 50%; --radius: 0.5rem; } .dark { --background: 221 25% 8%; --foreground: 221 20% 96%; --card: 221 25% 8%; --card-foreground: 221 20% 96%; --popover: 221 25% 8%; --popover-foreground: 221 20% 96%; --primary: 221 85% 60%; --primary-foreground: 221 30% 10%; --secondary: 221 20% 16%; --secondary-foreground: 221 20% 96%; --muted: 221 20% 15%; --muted-foreground: 221 15% 65%; --accent: 221 25% 18%; --accent-foreground: 221 20% 96%; --destructive: 0 72% 55%; --destructive-foreground: 221 20% 96%; --border: 221 15% 20%; --input: 221 15% 20%; --ring: 221 85% 55%; --radius: 0.5rem; }

เกี่ยวกับเครื่องมือนี้

เครื่องสร้างธีม shadcn/ui

เครื่องสร้างธีม shadcn/ui คืออะไร?

ประโยชน์หลัก

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

วิธีใช้เครื่องสร้างธีม shadcn/ui

คุณสมบัติหลัก

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

ผลลัพธ์รองรับ shadcn/ui เวอร์ชันใด?

ทำไมสีเป็นตัวเลข HSL สามตัว?

สี destructive และ chart ถูกจัดการด้วยหรือไม่?

ใช้ผลลัพธ์นอก shadcn/ui ได้หรือไม่?

เครื่องสร้าง CSS Anchor Positioning

ตัวสร้างเลย์เอาต์ Bento Grid

ตัวสร้าง CSS สไตล์ Neubrutalism

ตัวสร้าง CSS @starting-style

ตัวสร้างเขาวงกต

ชีตสรุป CSS Easing

เครื่องสร้างธีม shadcn/ui

เกี่ยวกับเครื่องมือนี้

ทำไมต้องสร้างธีม shadcn?

คุณสมบัติเด่น

เครื่องสร้างธีม shadcn/ui คืออะไร?

ประโยชน์หลัก

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

วิธีใช้เครื่องสร้างธีม shadcn/ui

คุณสมบัติหลัก

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

ผลลัพธ์รองรับ shadcn/ui เวอร์ชันใด?

ทำไมสีเป็นตัวเลข HSL สามตัว?

สี destructive และ chart ถูกจัดการด้วยหรือไม่?

ใช้ผลลัพธ์นอก shadcn/ui ได้หรือไม่?

เครื่องสร้าง CSS Anchor Positioning

ตัวสร้างเลย์เอาต์ Bento Grid

ตัวสร้าง CSS สไตล์ Neubrutalism

ตัวสร้าง CSS @starting-style

ตัวสร้างเขาวงกต

ชีตสรุป CSS Easing

เกี่ยวกับเครื่องมือนี้

ทำไมต้องสร้างธีม shadcn?

คุณสมบัติเด่น