Theme Generator

riebeckite create theme creates an applicable local Theme in themes/ using the public defineTheme API. It styles semantic --rb-* tokens and stable rb-* / rr-* hooks; it does not copy Plugin implementation CSS or add behavior. Read Your First Theme for the complete Theme contract.

Create a Theme

riebeckite create theme my-theme
riebeckite create theme my-theme --template blog --features print-styles
riebeckite create theme --list

The default template is minimal; the default destination is themes/my-theme/. The generated factory points to /themes/my-theme/styles/theme.css, a local module specifier resolved by the site bundler. Existing directories are never overwritten.

Templates are minimal, blog, documentation, portfolio, digital-garden, and blank. The first five include their appropriate visual recipes. blank contains only the public factory, scoped token declarations, and no component styling.

Optional features are typography, code-blocks, callouts, cards, toc, responsive, animations, and print-styles. They only style public hooks. Dark mode is part of the Theme contract and is generated by default; use --no-dark-mode only when the Theme intentionally has one color mode.

Interactive mode and scripts

In a TTY, run riebeckite create theme to choose its name, destination, template, features, color-mode support, tests, README, and config registration. In scripts or CI, prompts are disabled: provide a name. --template, --features, --directory, --no-dark-mode, --no-tests, --no-docs, and --register are available.

--register conservatively replaces one recognizable single-line theme: field and adds the local import. If the config cannot be edited safely, it remains unchanged and the CLI prints the manual step:

import { myThemeTheme } from "./themes/my-theme/index";
 
export default defineConfig({ theme: myThemeTheme() });

Develop and verify

Preview a generated local Theme before registering it in a Site:

riebeckite theme preview my-theme
riebeckite theme preview my-theme --port 4173 --no-open

The preview starts an isolated temporary HonoX Site with deterministic Home, Article, Documentation, and Components fixtures. It uses the Theme's real factory and stylesheet path, never edits the current Site or Vault, and removes the temporary files after Ctrl+C. Vite updates Theme CSS changes; changing index.ts restarts the dev server and reloads the open page. Use browser developer tools for responsive widths and system color preference. Previewing executes the local Theme module, so run it only for trusted Theme code.

Generated tests verify the factory and stylesheet module specifier. Run the site in both light and dark modes, at mobile and desktop widths, and with enabled Plugins. Theme CSS loads after Framework and Plugin styles, while userCss loads last. Keep functionality in Plugins and site-specific structure in the application.

pnpm typecheck
pnpm test
riebeckite check