Theme studio
Build a Blasdoc theme
Every value the default theme paints is a --blasdoc-* custom property, so a theme is a block of CSS. Change what you want here, take the stylesheet, and leave the rest following Blasdoc's own defaults.
Presets
Installing a theme
A theme is a stylesheet. Put it beside your global CSS, import it, and
every --blasdoc-* value below follows from it. Nothing is forked, and the
tokens you leave alone keep following the defaults.
import { provideBlasdocTheme } from '@blasdoc/theme-default';
export const appConfig: ApplicationConfig = {
providers: [provideBlasdocTheme()],
};What each token reaches
| Token | Reaches | Optional |
|---|---|---|
--blasdoc-code-bg | The code panel | no |
--blasdoc-table-border | Table rules and its outline | no |
--blasdoc-step-marker-bg | The numbered disc | yes |
Save the file
Put it beside your global stylesheet, as src/blasdoc-theme.css.
Install it
npx @blasdoc/cli theme install src/blasdoc-theme.cssStatus:
Save it as my-theme.css and install it with npx @blasdoc/cli theme install my-theme.css — or add the @import by hand. The full token list is on Theming.