Theme generator

Build a theme in the browser and take it away as CSS.

Every value the default theme paints is a --blasdoc-* custom property, which means a theme is a block of CSS. Build one here, copy it, and install it.

Preview

Installation

Token	Meaning
`--blasdoc-code-bg`	Code surface
`--blasdoc-table-border`	Table rules

bash

npm install @blasdoc/core

my-theme.css

/* my-theme — a Blasdoc theme. */

/* Nothing changed yet — every token is still the default. */

Save it as my-theme.css and install it with npx @blasdoc/cli theme install my-theme.css.

What it produces

A stylesheet with only the tokens you changed — nothing else, so the rest keeps following Blasdoc's own defaults and any future change to them.

Both dark spellings are written: the media query, for a visitor who never touches a switch, and [data-theme='dark'], for an application that owns the choice. The media-query block sits behind :where(), so it carries no extra specificity and your own :root still wins.

Installing it

Save the file

Put it beside your global stylesheet, for example src/blasdoc-theme.css.

Install it

npx @blasdoc/cli theme install src/blasdoc-theme.css

The CLI copies it into place and adds the @import to your global stylesheet. It works the same in an Angular CLI project, an Nx workspace and an Analog app.

Or do it by hand

styles.css

@import './blasdoc-theme.css';

Nothing about the theme is magic — it is a stylesheet, and importing it is the whole installation.

Going further

The generator covers the tokens most themes change. The full list is on Theming, and every one of them can go in the same file.