Theme ใน UnoCSS

Theme ใน UnoCSS คือการกำหนดค่าพื้นฐาน เช่น สี ขนาด ฟอนต์ ฯลฯ ที่ utility class สามารถเรียกใช้ได้

ตัวอย่างการปรับ Theme

ใน uno.config.ts:

export default defineConfig({
  theme: {
    colors: {
      brand: "#1e40af",
      accent: "#f59e42",
    },
    fontSize: {
      sm: "0.875rem",
      lg: "1.25rem",
    },
  },
});

แล้วสามารถใช้ใน class ได้เลย เช่น text-brand, bg-accent, text-lg

Tips

• Theme สามารถ extend/override ได้ตลอดเวลา
• ใช้ร่วมกับ preset/theme อื่น ๆ ได้
• Theme ที่กำหนดเองจะ merge กับของ preset อัตโนมัติ

อ่าน UnoCSS Theme Docs เพิ่มเติม

---