Skip to content
canopy-pagecanopy-page on GitHub

Your CSS wins

tokens is now styles

{ "styles": "brand.css" }

The value carries over unchanged, and a list works too — ["brand.css", "layout.css"], linked in that order. A settings file that still says tokens is told the new name.

Restyle anything, not just the palette

The built-in CSS now sits in cascade layers, so a rule in a styles file wins whatever its specificity. Restating --accent still works exactly as before, and plain selectors restyle the layout itself:

/* No sidebar: the layout paints the sidebar column as its own background, so it goes too. */
.canopy-sidebar { display: none; }
.canopy-layout { grid-template-columns: 1fr; background: none; }

A styles file is now published where it stands and linked there, so a relative url() inside it — a font beside it, say — resolves as written. The class names safe to select on are listed in canopy's theming contract. See Branding.

Dark mode gets your colours

A dark value written in a @media (prefers-color-scheme: dark) block used to lose to the built-in dark palette, so dark mode always showed the default accent. It now applies. State dark values for both ways dark mode happens — the system preference and the theme toggle — the way this site's own brand.css does:

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: #4ecfa2; }
}
:root[data-theme="dark"] { --accent: #4ecfa2; }

A missing stylesheet is caught by check

A styles path that is missing, or that exclude leaves unpublished, is now an error from check, before a build ever needs it.

The search box makes room for its shortcut

On a wide screen, typed text no longer runs under the Ctrl+K badge at the end of the search box.

Upgraded to canopy 0.19.0