Theme

Implementers may choose to modify the colors and visuals in theme property of their Canopy IIIF project.

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

Radix UI Themes

As of v0.12.0, Canopy now utilizes Radix UI Themes (opens in a new tab), allowing implementers to customize Colors, Scaling, and Radius styling. Users may also set the default "mode" as defaultTheme, options include light, dark, or system. The Toggle Theme button can also be enabled or disabled.

Note: Theme settings are stored in the users local browser storage. Setting the theme will only affect new users to your site. It will not change the default theme for users who have already visited.

Properties

The theme property can be customized in the config/canopy.json file.

Property	Type	Description
`accentColor`	see Accent Colors	Sets accent color
`grayColor`	see Gray Colors	Sets gray color
`panelBackground`	`solid`, `translucent`	Sets panel component behavior
`radius`	see Radius	Sets component border radius
`scaling`	see Scaling	Scales component size
`defaultTheme`	`enum`	Sets the default theme for users.
`toggleEnabled`	`boolean`	Enables or disables the Toggle Theme button in the footer.

defaultTheme

Sets the default theme for users. The default value is light.

"defaultTheme": "light" // "light" | "dark" | "system"

toggleEnabled

Boolean value that enables or disables the Toggle Theme button in the footer. The default value is true.

"toggleEnabled": true

Example Theme Configuration

Example of the theme configuration in config/canopy.json file with a defaultTheme of light and the toggleEnabled set to false.

config/canopy.json

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

Map Content