@lessonkit/themes

Design tokens, presets, and CSS variable utilities for LessonKit.

When to install

• Custom theme presets beyond ThemeProvider defaults
• Generating --lk-* CSS variables for non-React shells
• Validating theme tokens against theme-contract.v1.json

@lessonkit/react includes ThemeProvider and depends on this package.

Install

npm install @lessonkit/themes

Usage

import { getPresetTheme, mergeThemes, themeToCssVariables } from "@lessonkit/themes";

const theme = mergeThemes(getPresetTheme("brand"), {
  colors: { primary: "#0066cc" },
});
const vars = themeToCssVariables(theme); // { "--lk-color-primary": "#0066cc", ... }

In React courses, prefer ThemeProvider:

import { ThemeProvider } from "@lessonkit/react";

<ThemeProvider mode="light" preset="brand">
  <Course ... />
</ThemeProvider>

Presets: default, light, dark, brand via getPresetTheme()

Utilities: validateTheme(), mergeThemes(), themeToCssDeclarationBlock(), buildThemeCatalog()

Assets: theme-contract.v1.json, theme-catalog.v1.json, base.css

Docs

Theming reference · Theming & accessibility guide · TypeDoc API index

License

Apache-2.0