ธีมและ design token

ค่าทุกอย่างกำหนดที่เดียวใน app/globals.css — สีทุกตัวมีทั้งโหมดสว่างและมืด และห้ามใส่ค่า hex ตรง ๆ ใน component

ตารางด้านล่างแสดงสีตามโหมดปัจจุบันของหน้าเว็บ — กดสลับโหมดเพื่อเทียบทั้งสองโหมด

สี

โทน slate + ฟ้าน้ำเงินตัวเดียว สีสถานะมีคู่ -soft สำหรับพื้นหลังจาง ๆ เช่น bg-success-soft text-success

token	ตัวอย่างสี	การใช้งาน
พื้นฐาน
background		bg-background
foreground		text-foreground
card		bg-card
card-foreground		text-card-foreground
popover		bg-popover
popover-foreground		text-popover-foreground
surface		bg-surface
border		border-border
input		border-input
ring		ring-ring
แบรนด์และสถานะ
primary		bg-primary
primary-foreground		text-primary-foreground
secondary		bg-secondary
secondary-foreground		text-secondary-foreground
muted		bg-muted
muted-foreground		text-muted-foreground
accent		bg-accent
accent-foreground		text-accent-foreground
destructive		bg-destructive / text-destructive
destructive-soft		bg-destructive-soft
success		text-success
success-soft		bg-success-soft
warning		text-warning
warning-soft		bg-warning-soft
info		text-info
info-soft		bg-info-soft
กราฟ
chart-1		bg-chart-1
chart-2		bg-chart-2
chart-3		bg-chart-3
chart-4		bg-chart-4
chart-5		bg-chart-5
Sidebar
sidebar		bg-sidebar
sidebar-foreground		text-sidebar-foreground
sidebar-primary		bg-sidebar-primary
sidebar-primary-foreground		text-sidebar-primary-foreground
sidebar-accent		bg-sidebar-accent
sidebar-accent-foreground		text-sidebar-accent-foreground
sidebar-border		border-sidebar-border
sidebar-ring		ring-sidebar-ring

เงา

ธีมเพิ่มเงา 3 ระดับจาก shadcn ปกติ

shadow-card

shadow-pop

shadow-dialog

มุมโค้ง

ทุกขั้นคำนวณจากตัวแปรเดียว --radius: 0.75rem — แก้ค่าเดียวเปลี่ยนทั้งชุด

rounded-sm

rounded-md

rounded-lg

rounded-xl

rounded-2xl

rounded-3xl

rounded-4xl

ตัวอักษรไทย

ฟอนต์ IBM Plex Sans Thai ผ่าน next/font/google (ตัวแปร --font-sans) — ขนาดฐาน 15px line-height 1.65 เพื่อกันสระและวรรณยุกต์ชนบรรทัด เช่น ปี่ ี้ ้ ็

หัวข้อใหญ่ — การเคลมค่าล่วงเวลา ประจำเดือนตุลาคม

หัวข้อรอง — รายชื่อพนักงานที่รอการอนุมัติ

เนื้อความปกติ — กรุณาตรวจสอบรายการลาพักงานของคุณก่อนสิ้นเดือน ทุกช่องกรอกใช้สระบน-ล่างและวรรณยุกต์ได้ครบ เช่น ปี่ เปี้ย ๊ ๋ ็

คำอธิบายเล็ก — อัปเดตล่าสุด 13 พฤศจิกายน 2569

จอสัมผัส 44px

บนจอสัมผัส (มือถือ แท็บเล็ต และ LIFF) control ทุกชนิดมีพื้นที่กดขั้นต่ำ 44px โดยไม่ต้องแก้ไฟล์ component ใด ๆ — เปิดหน้านี้บนมือถือแล้วกดปุ่มด้านล่างเพื่อลอง

app/globals.css

@media (pointer: coarse) {  [data-slot="button"]:not([data-size="xs"]):not([data-size="icon-xs"]),  [data-slot="input"],  [data-slot="select-trigger"],  [data-slot="native-select"],  [data-slot="input-group"],  [data-slot="toggle"],  [data-slot="tabs-trigger"],  [data-slot="pagination-link"],  [data-slot="select-item"],  [data-slot="dropdown-menu-item"],  [data-slot="combobox-item"] {    min-height: 2.75rem; /* 44px */  }}

แก้ไขธีม

ค่าสีทั้งหมดอยู่ใน app/globals.css ที่เดียว (บล็อก :root สำหรับโหมดสว่าง .dark สำหรับโหมดมืด)
แก้สีใน project ที่ติดตั้งไปแล้ว: แก้ใน globals.css ของ project นั้นได้เลย เพราะ code เป็นของคุณแล้ว
ห้ามใส่ค่า hex หรือสี Tailwind ตรง ๆ (เช่น bg-blue-500) ใน component — ใช้ token เสมอเพื่อให้โหมดมืดทำงานอัตโนมัติ
ปุ่ม icon ขยายความกว้างเป็น 44px ด้วยเช่นกัน ยกเว้นขนาด xs และ icon-xs