pnpm add -D unocss-preset-radix
import { defineConfig, presetUno } from "unocss";
import { presetRadix } from "unocss-preset-radix";
export default defineConfig({
presets: [
presetUno(),
presetRadix({
palette: ["blue", "green", "red"],
aliases: {
primary: "green",
base: "slate",
},
}),
],
});
Alphas are available as extra shades in each scale. For example bg-blue5
for solid, bg-blue5A
for alpha.
The optimized foreground colors are available as -fg
shades. For example text-blue-fg
for white text-amber-fg
for white. These colors are based on the Radix docs. This also works with hues and aliases.
An array of the Radix UI Colors you'd like to include. Dark mode and alpha variants are automatic. Overlay colors are added by default.
The prefix used for the CSS variables generated by the preset. Default is --un-preset-radix
.
The selector used for dark mode palette. Default is .dark-theme
.
The selector used for dark mode palette. Default is :root, .light-theme
.
A key value object of color aliases in the format alias: target
that allows you to set aliases for the color palette. You cannot set aliases to other aliases. Alpha variants for aliases are generated automatically, so for then given alias brand: blue
, an alias brandA: blueA
will also be generated.
A boolean that sets whether or not the preset will completely overwrite or merge with the previous palette. Default is true
.
With any scale included in your palette, you can use the utility hue-{scale}
like hue-red
or hue-sand
. This sets a series of CSS variables that allow usage of hue
in place of a color. For example:
<div class="hue-red bg-hue4" />
<div class="bg-red4" />
are equivilant.
This allows you to add all the hues
you'd like to use to your safelist, and be able to dynamically choose the colorway of an element using JS or whatever your poison of choice is.
This feature is heavily inspired by Imba's hue