テーマ

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

ヒント

解析プロセス中は、`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`
  }],
]

ブレークポイント

警告

カスタムの`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"
      },
    },
  }
}