README
unocss-preset-chroma
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
, orconic
. - Value for
mode
are:rgb
,lab
,hsl
, orlch
.
chroma-linear-direction-<angle>
For rotating the gradient.
chroma-direction-[<direction>]
For orienting the gradient (especially radial & conic gradient).
ChromaOptions
Type of export interface ChromaOptions {
/**
* Class prefix for matching gradient rules.
*
* @defaultValue `chroma-`
*/
prefix?: string
/**
* Number of gradient steps to generate.
*
* @defaultValue 7
*/
steps?: number
}
Acknowledgement
- Polychroma
- chroma.js
- Make Beautiful Gradients by Josh Comeau
License
MIT