Theme

UnoCSS ยังรองรับระบบ theming ที่คุณอาจคุ้นเคยใน Tailwind CSS / Windi CSS ที่ระดับผู้ใช้ คุณสามารถระบุ property theme ใน config ของคุณ และมันจะถูก deep-merged กับธีมเริ่มต้น

การใช้งาน

theme: {
  // ...
  colors: {
    veryCool: '#0000ff', // class="text-very-cool"
    brand: {
      primary: 'hsl(var(--hue, 217) 78% 51%)', //class="bg-brand-primary"
      DEFAULT: '#942192' //class="bg-brand"
    },
  },
}

TIP

ในระหว่างกระบวนการแยกวิเคราะห์ theme จะมีอยู่เสมอใน context

การใช้งานใน rules

เพื่อใช้งานธีมในกฎ:

rules: [
  [/^text-(.*)$/, ([, c], { theme }) => {
    if (theme.colors[c])
      return { color: theme.colors[c] }
  }],
]

การใช้งานใน variants

เพื่อใช้งานธีมใน variants:

variants: [
  {
    name: 'variant-name',
    match(matcher, { theme }) {
      // ...
    },
  },
]

การใช้งานใน shortcuts

เพื่อใช้งานธีมใน shortcuts แบบ dynamic:

shortcuts: [
  [/^badge-(.*)$/, ([, c], { theme }) => {
    if (Object.keys(theme.colors).includes(c))
      return `bg-${c}4:10 text-${c}5 rounded`
  }],
]

Breakpoints

WARNING

เมื่อมีการจัดหา object breakpoints แบบกำหนดเอง ค่าเริ่มต้นจะถูกเขียนทับแทนที่จะรวมกัน

ด้วยตัวอย่างต่อไปนี้ คุณจะสามารถใช้ breakpoint variants sm: และ md: เท่านั้น:

theme: {
  // ...
  breakpoints: {
    sm: '320px',
    md: '640px',
  },
}

หากคุณต้องการสืบทอด breakpoints ของธีม original คุณสามารถใช้ extendTheme:

extendTheme: (theme) => {
  return {
    ...theme,
    breakpoints: {
      ...theme.breakpoints,
      sm: '320px',
      md: '640px',
    },
  }
}

INFO

verticalBreakpoints เหมือนกับ breakpoints แต่สำหรับเลย์เอาต์แนวตั้ง

นอกจากนี้เราจะจัดเรียงจุดหน้าจอตามขนาด (หน่วยเดียวกัน) สำหรับจุดหน้าจอในหน่วยต่างกัน เพื่อหลีกเลี่ยงข้อผิดพลาด โปรดใช้หน่วยเดียวกันในการกำหนดค่า

theme: {
  // ...
  breakpoints: {
    sm: '320px',
    // เนื่องจาก uno ไม่รองรับการจัดเรียงเปรียบเทียบขนาดหน่วยต่างกัน โปรดแปลงเป็นหน่วยเดียวกัน
    // md: '40rem',
    md: `${40 * 16}px`,
    lg: '960px',
  },
}

ExtendTheme

ExtendTheme อนุญาตให้คุณแก้ไข ธีมที่รวมกันอย่างลึก เพื่อรับอ็อบเจกต์ธีมที่สมบูรณ์

ฟังก์ชันแบบกำหนดเองเปลี่ยนแปลงอ็อบเจกต์ธีม

extendTheme: (theme) => {
  theme.colors.veryCool = '#0000ff' // class="text-very-cool"
  theme.colors.brand = {
    primary: 'hsl(var(--hue, 217) 78% 51%)', // class="bg-brand-primary"
  }
}

ยังสามารถส่งคืนอ็อบเจกต์ธีมใหม่เพื่อแทนที่อันเดิมได้

extendTheme: (theme) => {
  return {
    ...theme,
    colors: {
      ...theme.colors,
      veryCool: '#0000ff', // class="text-very-cool"
      brand: {
        primary: 'hsl(var(--hue, 217) 78% 51%)', // class="bg-brand-primary"
      },
    },
  }
}