テーマ

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

TIP

パース処理中、themeは常にcontext内に存在します。

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`
  }],
]

ブレークポイント

WARNING

カスタムbreakpointsオブジェクトが提供された場合、デフォルトはマージではなく上書きされます。

以下の例では、sm:とmd:のブレークポイントバリアントのみを使用できます：

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

元のテーマのブレークポイントを継承したい場合は、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"
      },
    },
  }
}