Theming

Canopy IIIF leans on a combination of Radix UI Themes and MDX (Markdown) to provide a flexible theming and design system. The default visuals are based on the Radix UI defaults. See theme configuration documentation.

config/canopy.json

{  "collection": "https://iiif.bodleian.ox.ac.uk/iiif/collection/hobhouse",  "theme": {    "defaultTheme": "light",    "accentColor": "red",    "grayColor": "sand",    "radius": "small",    "scaling": "100%"  }}

Colors & Visuals

Implementers may choose to modify the theme settings of their Canopy IIIF project to fit their project's design requirements. As of v0.12.0, Canopy now utilizes Radix UI Themes, allowing implementers to customize Colors, Scaling, and Radius styling.

Accent Colors

Gray Colors

MDX Layouts

Canopy IIIF utilizes MDX (Markdown) for creation of custom pages and content. Implementers can also customize layouts of fixed content pages by modifying a relative .mdx file in the content directory.

All Radix UI Themes components are available for use in MDX content. For example, the following layout file uses the Radix UI Themes Tabs component to display metadata and related content.

content/works/_layout.mdx