Canon
Quiet and compact, the default.
Themes
A theme is one stylesheet that decides how every component looks. The markup and canon.js don't change, so a page moves to another theme by changing one line.
One markup, six themes
Each frame below holds the same HTML, and they all work. Only the linked stylesheet differs. To read these docs in a theme, use its button or the menu in the top bar.
Carbon-inspired
Square corners, IBM Plex and filled fields.
Material-inspired
Rounded shapes, Roboto and floating labels.
Fluent-inspired
Soft corners, the system font and an underline on focus.
Ant Design-inspired
Bright blue, the system font and a soft halo on focus.
Bootstrap-inspired
Roomy 16px controls, the system font and a wide ring on focus.
The themes other than Canon are inspired by the Carbon, Material, Fluent, Ant Design and Bootstrap design systems. They aren't affiliated with or endorsed by IBM, Google, Microsoft, Ant Group or the Bootstrap project. Those names are trademarks of their owners.
Use a theme
Link the theme's stylesheet in place of css/canon/canon.css. Each theme is a folder in css/, so keep its files together:
index.html
<link rel="stylesheet" href="css/carbon/carbon.css">| Theme | Stylesheet | Type | Icons |
|---|---|---|---|
| Canon | css/canon/canon.css | Inter, JetBrains Mono | Lucide |
| Carbon-inspired | css/carbon/carbon.css | IBM Plex Sans and Mono, in the folder | Carbon icons, in the folder |
| Material-inspired | css/material/material.css | Roboto and Roboto Mono, in the folder | Material Symbols, in the folder |
| Fluent-inspired | css/fluent/fluent.css | Segoe UI where it's installed, otherwise the system font | Fluent UI System Icons, in the folder |
| Ant Design-inspired | css/ant/ant.css | The system font | Ant Design Icons, in the folder |
| Bootstrap-inspired | css/bootstrap/bootstrap.css | The system font | Bootstrap Icons, in the folder |
Write your own
The quickest way is to build on canon.css, as every other theme here does. Change the tokens first, since they restyle every component at once, then add rules for what makes the look its own:
acme.css
/* css/acme/acme.css */
@import url("../canon/canon.css");
@layer canon.theme {
:root {
/* Tokens restyle every component at once… */
--canon-theme-font-mono: "Acme Mono", monospace;
}
/* …then rules redraw what makes the look its own. */
.canon-button { border-radius: 0; }
}To start from nothing, import css/canon/canon.core.css instead and draw every component yourself. Each component's specification lists what a theme must do, and the contract check shows markup that breaks a component's contract while you build.
For a few changes, you don't need a theme. Canon's styles sit in cascade layers, so your own unlayered CSS always wins.