🐤 Canary

Appearance

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.

bash
# colors
--canary-color-primary-c
--canary-color-primary-h
--canary-color-gray-c
--canary-color-gray-h
Available CSS Variables
  • --canary-color-backdrop-overlay
  • --canary-color-gray-0
  • --canary-color-gray-10
  • --canary-color-gray-100
  • --canary-color-gray-20
  • --canary-color-gray-30
  • --canary-color-gray-40
  • --canary-color-gray-5
  • --canary-color-gray-50
  • --canary-color-gray-60
  • --canary-color-gray-70
  • --canary-color-gray-80
  • --canary-color-gray-90
  • --canary-color-gray-95
  • --canary-color-gray-c
  • --canary-color-gray-ch
  • --canary-color-gray-h
  • --canary-color-primary-0
  • --canary-color-primary-10
  • --canary-color-primary-100
  • --canary-color-primary-20
  • --canary-color-primary-30
  • --canary-color-primary-40
  • --canary-color-primary-5
  • --canary-color-primary-50
  • --canary-color-primary-60
  • --canary-color-primary-70
  • --canary-color-primary-80
  • --canary-color-primary-90
  • --canary-color-primary-95
  • --canary-color-primary-c
  • --canary-color-primary-ch
  • --canary-color-primary-h
  • --canary-content-max-height
  • --canary-content-max-width
  • --canary-font-family-base
  • --canary-font-family-mono
  • --canary-font-size-logo
  • --canary-is-dark
  • --canary-is-light
  • --canary-snippet-color
  • --canary-snippet-font-size
  • --canary-snippet-font-weight
  • --canary-trigger-searchbar-height
  • --canary-trigger-searchbar-max-width

CSS Parts ​

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

Available Parts
  • canary-input
    • input
  • canary-trigger-searchbar
    • button
    • icon
    • kbd
    • text

Light / Dark Mode ​

html
<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, and starlight.