Design tokens and a tiny light/dark theme runtime powering tomasnikl.cz and my lab projects.
npm i @tomasnikl/theme
CSS — one import brings fonts, colors, typography, spacing, motion and dark-mode overrides:
@import "@tomasnikl/theme/tokens.css";
Or cherry-pick: @import "@tomasnikl/theme/tokens/colors.css";
JS — theme switching with localStorage persistence:
import { getTheme, setTheme, toggleTheme, subscribeTheme } from "@tomasnikl/theme";
setTheme("dark") sets data-theme="dark" on <html>; token overrides in
tokens/dark.css key off :root[data-theme="dark"]. State persists under
the tn-theme localStorage key.
| Group | File | Examples |
|---|---|---|
| Colors | tokens/colors.css | --accent, --surface-card, --ink-700, --text-body |
| Dark mode | tokens/dark.css | --paper-0, --ink-900, --btn-primary-bg, --selection-bg |
| Typography | tokens/typography.css | --font-display, --text-h1, --weight-bold, --leading-normal |
| Spacing | tokens/spacing.css | --space-4, --radius-lg, --shadow-card, --container |
| Motion | tokens/motion.css | --ease-out, --dur-base, --reveal-rise |
| Fonts | tokens/fonts.css | loads Figtree and IBM Plex Mono via @import; no custom properties |
MIT