Styling

canary-root do the heavy lifting for you.

CSS Variables

All components in Canary renders inside a shadow DOM. So CSS in your documentation website will not affect the styling of Canary components by default.

CSS variables is one exception. And Canary exposes them for you to use.

# colors
--canary-color-primary-c
--canary-color-primary-h
--canary-color-gray-c
--canary-color-gray-h

Available CSS Variables can be found in reference.

CSS Parts

You can use ::part CSS pseudo-element to style Canary's components.

Available CSS parts can be found in reference.

Light / Dark Mode

<canary-root framework="vitepress">
    <!-- Rest of the code -->
</canary-root>

Each documentation framework has its own way to add theme information to the dom. By providing framework attribute, canary-root will handle the theme for you.

Currently we support docusaurus, vitepress, nextra, and starlight.