Theming

Canopy IIIF leans on a combination of Radix UI Themes (opens in a new tab) 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.

Color & Visuals Layout

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

Gold

Bronze

Brown

Yellow

Amber

Orange

Tomato

Red

Ruby

Crimson

Pink

Plum

Purple

Violet

Iris

Indigo

Blue

Cyan

Teal

Jade

Green

Grass

Lime

Mint

Sky

Gray Colors

Gray

Mauve

Slate

Sage

Olive

Sand

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 (opens in a new tab) to display metadata and related content.

content/works/_layout.mdx

<Work.Viewer />
 
<Container>
  <Section pb="4">
    <Work.Title size="9" mb="5" />
    <Work.Summary size="4" />
  </Section>
 
  <Section size="1">
    <Tabs.Root defaultValue="details">
      <Tabs.List>
        <Tabs.Trigger value="details">Details</Tabs.Trigger>
        <Tabs.Trigger value="essays">Essays</Tabs.Trigger>
      </Tabs.List>
 
      <Box pt="3">
        <Tabs.Content value="details">
          <Work.Metadata />
          <Work.RequiredStatement />
          <Work.ManifestId />
        </Tabs.Content>
 
        <Tabs.Content value="essays">
          <Work.ReferencingContent />
        </Tabs.Content>
 
      </Box>
    </Tabs.Root>
 
  </Section>
 
  <Section size="1">
    ## Related Works
 
    <Work.Related />
 
  </Section>
 
</Container>

Metadata Color & Visuals