主題

UnoCSS 也支援您可能在 Tailwind CSS / Windi CSS 中熟悉的主題系統。在使用者層級，您可以在設定中指定 theme 屬性，它將會被深度合併到預設主題中。

用法

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

提示

在解析過程中，context 中將始終存在 theme。

在 rules 中的用法

要在規則中使用主題

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

在 variants 中的用法

要在變體中使用主題

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

在 shortcuts 中的用法

要在動態捷徑中使用主題

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

斷點

警告

當提供自定義的 breakpoints 物件時，將會覆蓋預設值而不是合併。

使用以下範例，您將只能使用 sm: 和 md: 斷點變體

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

如果您想繼承原始主題斷點，您可以使用 extendTheme

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

資訊

verticalBreakpoints 與 breakpoints 相同，但適用於垂直佈局。

此外，我們將按大小（相同單位）對螢幕斷點進行排序。 對於不同單位的螢幕斷點，為避免錯誤，請在設定中使用統一的單位。

theme: {
  // ...
  breakpoints: {
    sm: '320px',
    // Because uno does not support comparison sorting of different unit sizes, please convert to the same unit.
    // 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"
      },
    },
  }
}