grassroot
Install
Themes

79 token sets, no component changes.

Each theme is a plain CSS block of custom properties under a [data-theme] selector. There's no provider to wrap anything in, no config object and nothing to build. Every card below renders its theme's live tokens — surface, type, accent, radius and chart series — so click one to apply it across the whole site, or build your own by editing the tokens. 

/* One import, one attribute. */
@import "@grassroot/tokens/themes/dracula.css";

<html data-theme="dracula">

Basics

Brand

Safe

Premium

Editor classics

Distinctive

Loud

Zany

Unhinged

Accessible