// npm
npm i unocss-preset-palette
// yarn
yarn add unocss-preset-palette
// pnpm
pnpm add unocss-preset-palette
import { defineConfig, presetUno } from "unocss";
import presetPalette from "unocss-preset-palette";
export default defineConfig({
presets: [
presetUno(),
presetPalette({
// hsl | rgb
colorFormat: "hsl",
themeColors: {
// [hue, saturation, lightness]
primary: [100, "100%", "50%"],
tertiary: "#0000ff",
secondary: {
// dark theme
dark: "#ff0000",
// light theme
default: "#00ff00",
}
},
}),
],
});
<div class="text-primary/72"></div>
<div class="bg-primary/36"></div>
.text-primary\/72 {
// hsla
color: hsla(var(--un-palette-primary-color-hsl) / 0.72);
// rgba
// color: rgba(var(--un-palette-primary-color-rgb) / 0.72);
}
.bg-primary\/36 {
// hsla
background-color: hsla(var(--un-palette-primary-color-hsl) / 0.36);
// rgba
// background-color: rgba(var(--un-palette-primary-color-rgb) / 0.36);
}
export type ThemeColors = Record<string, string | (string | number)[] | Record<string, string | (string | number)[]>>;
export interface CssVarName {
(name: string): string
prefix?: string
suffix?: string
}
export interface PaletteOptions {
/**
* define theme colors
*/
themeColors?: ThemeColors
/**
* @deprecated
*/
colors?: ThemeColors
/**
* @see "@vueuse/core/useColorMode"
*/
colorMode?: {
/**
* @default ':root'
*/
selector?: string
/**
* @default 'class'
*/
attribute?: string
/**
* @default 'light'
*/
defaultValue?: string
}
/**
* use opacity variable
*
* ```css
* .text-primary {
* --un-text-opacity: 1;
* color: rgb(var(--un-palette-primary-rgb) / var(--un-text-opacity));
* }
* ```
* @default true
*/
useOpacityVariable?: boolean
/**
* @default --un-palette-[name]-color
*/
cssVarName?: CssVarName
colorFormat?: "rgb" | "hsl"
}
MIT License © 2022-PRESENT Chizukicn