huet

Huet

Relative UI colors and themed images from one theme. Choose a theme, then give each element a ramp and a contrast amount in its class name, such as huet-bg-blue-20. Huet works out the actual colors from the element's parent background, and recolors images to match.

Demo · shadcn site themed with Huet · Docs

Quick start

pnpm add huet               # theming, any framework
pnpm add huet-react         # optional: the React theme configurator

import { mountTheme, themes, type Theme } from "huet";
import { mountImages } from "huet/images";
import "huet/styles.css";

const theme: Theme = { neutral: ["#233b91", "#ffffff"] };
const root = document.querySelector<HTMLElement>("#app")!;
const colors = mountTheme(root, theme);
const images = mountImages(root, theme); // recolors <img data-huet-recolor>

// Later: dark mode, then another theme, without rerendering
colors.update(theme, { background: 0 });
colors.update(themes.Paperback);

Class syntax

huet-PROPERTY-[RAMP-]AMOUNT

Amounts measure distance from the parent's background, not a fixed lightness. The same thirteen classes, on the page and nested in a huet-bg-80 card:

Migrating from Tailwind colors

One class per surface replaces each light and dark pair:

<section class="bg-slate-100 dark:bg-slate-800"> 
<section class="huet-bg-10"> 
  <p class="text-slate-500 dark:text-slate-400">Manage your profile.</p> 
  <p class="huet-text-60">Manage your profile.</p> 
  <button class="bg-blue-600 text-white">Save</button> 
  <button class="huet-bg-blue-20">Save</button> 
</section>

Themed images

huet/images reads each pixel as a position on Huet's default ramps and writes it back at the same position in your theme. Grays follow your neutral ramp, and greens become your green. Screenshots work too:

Things to know

Grays follow the theme's neutral ramp and colors follow its hues. That's the whole idea.

Roadmap

• Relative classes with Tailwind variants
• Recolor images on the GPU
• Shiki theme from Huet variables
• Publish to npm
• Vue and Svelte configurators