Brand Presets
เปลี่ยน branding ทั้งเว็บได้จากไฟล์ CSS เดียว
วิธีใช้
เพิ่ม brand preset หลัง StackUI CSS:
<!-- StackUI --><link rel="stylesheet" href="https://stackui-cdn.intern-studio.com/v1.0.0/stackui.min.css"><!-- Brand Preset — เปลี่ยนไฟล์นี้ตามลูกค้า --><link rel="stylesheet" href="https://stackui-cdn.intern-studio.com/brand-presets/client-abc.css">สร้าง Preset ใหม่
Copy template แล้วแก้ค่าตามลูกค้า:
:root { /* Primary brand color */ --stk-primary: #003366; --stk-primary-light: #004d99; --stk-primary-dark: #001a33; /* Secondary brand color */ --stk-secondary: #ff6600; --stk-secondary-light: #ff8533; --stk-secondary-dark: #cc5200; /* Accent color */ --stk-accent: #00bcd4; /* Fonts */ --stk-font-heading: "Noto Sans Thai", sans-serif; --stk-font-body: "Noto Sans Thai", sans-serif; /* Border radius */ --stk-radius-md: 0.375rem; --stk-radius-lg: 0.5rem;}ตัวแปรที่ Override ได้
| Variable | Description | Default |
|---|---|---|
--stk-primary | สีหลัก | #1a3c6e |
--stk-primary-light | สีหลัก (อ่อน) | #2a5a9e |
--stk-primary-dark | สีหลัก (เข้ม) | #0f2444 |
--stk-secondary | สีรอง | #e8b931 |
--stk-accent | สีเน้น | #2ecc71 |
--stk-font-heading | Font หัวข้อ | Prompt |
--stk-font-body | Font เนื้อหา | Sarabun |
--stk-radius-md | มุมโค้ง | 0.5rem |