Finally, a theme-forward UI kit
Built for dashboards — KPI cards, sparklines, tables, charts — and all of it re-themes from one CSS file, or live in code. Light and dark, no build.
Pick an accent — every component below recolors, in both light and dark.
Nobody should hand-roll a stat card
KPI cards, sparklines, progress, bar lists, split bars, figure rows and donuts ship with the kit — no chart library, no copy-pasted SVG. And its adapters theme your real Tabulator tables and Chart.js charts alongside them. Everything below is the shipped components, recoloring live with the swatches above — no screenshots.
One stylesheet, one script
Drop it in from the CDN and start using the classes. Nothing to install, nothing to build.
<!-- 1. pre-paint theme — FIRST, before any stylesheet -->
<script>
(function(){var p=localStorage.getItem('_78-theme')||'system';
var t=p==='system'?(matchMedia('(prefers-color-scheme: light)').matches?'light':'dark'):p;
var r=document.documentElement;r.dataset.theme=t;r.dataset.themePref=p;})();
</script>
<!-- 2. the kit -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/1978io/78UIKit@v0.4.0/css/kit.css">
<script defer src="https://cdn.jsdelivr.net/gh/1978io/78UIKit@v0.4.0/js/_78.js"></script>
<!-- 3. your own theme overrides, AFTER the kit -->
<style>:root[data-theme="dark"]{--accent:#7c5cff}</style>
Pinned to v0.4.0. Use @main for the
latest, or download the repo and serve the files yourself — jsDelivr also serves the minified builds.
That third block is a one-token taste of theming; a full theme sets the accent's tints alongside it, or
comes out of the generator complete and contrast-checked.
Color should not need a rebuild
And the parts a dashboard is actually made of should come in the box.
Runtime theming
Colors live in CSS variables, not in a Sass build. Override the tokens you want and the whole UI follows — instantly, with no tooling.
The theme generator
Pick an accent; it derives the whole token set for light and dark in OKLCH, contrast-checks every pair that matters, and hands you paste-ready CSS.
Dashboard parts included
KPI cards, sparklines, progress, bars, split bars, figure rows, donuts, gauges and trend — drawn in CSS and inline SVG, so there is no chart library to add and nothing to hand-roll.
Your tables and charts match
Opt-in adapters for Tabulator, FullCalendar and Chart.js map them onto the same tokens — including when the theme switches.
No build step
Vanilla HTML, CSS and JS. No framework, no bundler, no dependencies — and it works the same in ten years.