unocss-preset-chroma

chroma-js gradient for UnoCSS

Usage no npm install needed!

<script type="module">
  import unocssPresetChroma from 'https://cdn.skypack.dev/unocss-preset-chroma';
</script>

README

unocss-preset-chroma

npm version node version

chroma-js gradient for UnoCSS

Installation

npm i unocss-preset-chroma unocss --save-dev # with npm
yarn add unocss-preset-chroma unocss -D # with yarn
pnpm add unocss-preset-chroma unocss -D # with pnpm

Usage

// unocss.config.js
import { presetUno, defineConfig } from 'unocss'
import { presetChroma } from 'unocss-preset-chroma'

export default defineConfig({
  presets: [
    presetUno(), // for color theme
    presetChroma(),
  ],
})

Utilities

chroma-<gradient>-<mode>-<color-1>-<color-2>-<color-n>

  • Value for gradient are: linear, radial, or conic.
  • Value for mode are: rgb, lab, hsl, or lch.

chroma-linear-direction-<angle>

For rotating the gradient.

chroma-direction-[<direction>]

For orienting the gradient (especially radial & conic gradient).

Type of ChromaOptions

export interface ChromaOptions {
  /**
   * Class prefix for matching gradient rules.
   *
   * @defaultValue `chroma-`
   */
  prefix?: string
  /**
   * Number of gradient steps to generate.
   *
   * @defaultValue 7
   */
  steps?: number
}

Acknowledgement

License

MIT