Chủ đề

UnoCSS cũng hỗ trợ hệ thống chủ đề mà bạn có thể đã quen thuộc trong Tailwind CSS / Windi CSS. Ở cấp độ người dùng, bạn có thể chỉ định thuộc tính theme trong cấu hình của mình, và nó sẽ được hợp nhất sâu vào chủ đề mặc định.

Sử dụng

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

Trong quá trình phân tích, theme sẽ luôn tồn tại trong context.

Sử dụng trong rules

Để tiêu thụ chủ đề trong quy tắc:

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

Sử dụng trong variants

Để tiêu thụ chủ đề trong biến thể:

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

Sử dụng trong shortcuts

Để tiêu thụ chủ đề trong các phím tắt động:

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

Điểm ngắt

WARNING

Khi một đối tượng breakpoints tùy chỉnh được cung cấp, mặc định sẽ bị ghi đè thay vì hợp nhất.

Với ví dụ sau, bạn sẽ chỉ có thể sử dụng các biến thể điểm ngắt sm: và md::

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

Nếu bạn muốn kế thừa các điểm ngắt chủ đề gốc, bạn có thể sử dụng extendTheme:

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

INFO

verticalBreakpoints giống như breakpoints nhưng cho bố cục dọc.

Ngoài ra, chúng tôi sẽ sắp xếp các điểm màn hình theo kích thước (cùng đơn vị). Đối với các điểm màn hình ở các đơn vị khác nhau, để tránh lỗi, vui lòng sử dụng các đơn vị thống nhất trong cấu hình.

theme: {
  // ...
  breakpoints: {
    sm: '320px',
    // Vì uno không hỗ trợ sắp xếp so sánh các kích thước đơn vị khác nhau, vui lòng chuyển đổi thành cùng đơn vị.
    // md: '40rem',
    md: `${40 * 16}px`,
    lg: '960px',
  },
}

ExtendTheme

ExtendTheme cho phép bạn chỉnh sửa chủ đề được hợp nhất sâu để lấy đối tượng chủ đề hoàn chỉnh.

Các hàm tùy chỉnh thay đổi đối tượng chủ đề.

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

Nó cũng có thể trả về một đối tượng chủ đề mới để thay thế hoàn toàn đối tượng ban đầu.

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"
      },
    },
  }
}