Theming

Canon's theming is built entirely on CSS, without relying on any CSS-in-JS libraries. At its core, it provides a solid default theme that is easily customizable using a comprehensive set of CSS variables. Additionally, it enables anyone to adapt the design to their specific needs. Each component comes with fixed class names, making customization even more straightforward.

Light & Dark modes

By default, Canon supports both light and dark modes using the data-theme attribute. The light theme is applied by default if no data-theme attribute is specified. To create a custom theme, you'll need to define both light and dark modes as outlined below. If only one mode is defined, the other will fall back to the default theme.

How to create your own theme

In our started guide, we ask you to import two css files. The core.css file includes the default set of variables. We recommend to keep this file in place and add your own theme on top of it. core.css also include an opinionated reset. If you decided to remove core.css you will have to provide your own reset css.

Here's an example of how your theme.css file should look like:

:root {
  --canon-font-regular: system-ui;
  --canon-font-weight-regular: 400;
  --canon-font-weight-bold: 600;
  --canon-bg: #f8f8f8;
  --canon-bg-surface-1: #fff;
  /* ... other CSS variables */

  /* Add your custom components styles here */
  .canon-Button {
    background-color: #000;
    color: #fff;
  }
}

[data-theme='dark'] {
  --canon-font-regular: system-ui;
  --canon-font-weight-regular: 400;
  --canon-font-weight-bold: 600;
  --canon-bg: #f8f8f8;
  --canon-bg-surface-1: #fff;
  /* ... other CSS variables */

  /* Add your custom components styles here */
  .canon-Button {
    background-color: #000;
    color: #fff;
  }
}

CSS class name structure

All Canon components come with a set of CSS classes that you can use to style them. To make it easier to identify the class name you can use, we use a specific structure for the class names.

Every component has a unique prefix .canon- followed by the component name. Component props are represented using the data- attribute. That way, class names are easily identifiable.

Available CSS variables

Base colors

These colors are used for special purposes like ring, scrollbar, ...

Core background colors

These colors are used for the background of your application. We are mostly using for now a single elevated background for panels. --canon-bg should mostly use as the main background color of your app.

Foreground colors

Foreground colours are meant to work in pair with a background colours. Typeically this would work for icons, texts, shapes, ... Use a matching name to know what foreground color to use. These colors are prefixed with fg to make it easier to identify.

Border colors

These border colors are mostly meant to be used as borders on top of any components with low contrast to help as a separator with the different background colors.

Special colors

These colors are used for special purposes like ring, scrollbar, ...

Font families

We have two fonts that we use across Canon. The first one is the sans-serif font that we use for the body of the application. The second one is the monospace font that we use for code blocks and tables.

Font weights

We have two font weights that we use across Canon. Regular or Bold.

Spacing

We built a spacing system based on a single value --canon-space. This value is used to calculate the spacing for all the components. By default if you would like to increase or decrease the spacing between your components you can do it simply by updating --canon-space and it will apply to all spacing values.

--canon-space is not used directly in any components but serve as an easy way to calculate the other values.

Below is the list of all spacing values you can use in your application. We use these tokens for pretty much each spacing properties like padding, margin, gaps, ...

Radius

We use a radius system to make sure that the components have a consistent look and feel.