Theming LearnKit AI: CSS custom properties as a first-class API

Most component libraries that ship theming require you to configure a design token system, install a CSS preprocessor, or wrap your app in a theme provider. We wanted something simpler: drop in four lines of CSS and your product's colors work everywhere.

@learnkit-ai/react has no Tailwind dependency. Every style is expressed as an inline CSS value or a CSS custom property reference - things like var(--accent), var(--paper), var(--ink). The three built-in themes (warm, midnight, technical) are just different values for those same twelve variables, applied as inline styles on the root component element.

To match your brand, you do not need to fork the package. Pass theme="warm" and add a stylesheet that overrides the root variables: :root { --accent: #7C3AED; --paper: #FAFAF9; --ink: #1A1523; --ink-soft: #5B5070; }. The full component tree - cards, progress bars, the AI Guide widget - inherits your values immediately.

The decision to avoid Tailwind was deliberate. Tailwind requires a build step tuned to the host project's content paths. A library that ships Tailwind classes leaks its build config into every project that installs it. CSS custom properties are a browser primitive - they compose without configuration.

If you want to ship your own named theme, the pattern is simple: export a theme object that maps the twelve variable names to your values, pass it as the theme prop, and the component applies them as a style attribute. We will document the full theme object shape in the v1 docs.