M3 Theming Mirador

Note: This applies to Mirador 3.x

Mirador uses MaterialUI under the hood for most of its UI components. This allows you as an adopter to easily update the theme without having to rebuild the software.

The Mirador theme is based on MaterialUI's default theme and merges it with any configuration that you give

While there is a lot of information within the MaterialUI docs, you may not need it all to get started. If you want, you can read more about how MaterialUI does theming here: https://material-ui.com/customization/themes/.

Easy start

Taking the default as a starting point

To get started theming Mirador, pass in a theme configuration through the config/settings.

var miradorInstance = Mirador.viewer({
  id: 'mirador',
  theme: {
    palette: {
      type: 'dark'
    }
  }
});

This will use the MaterialUI "dark" palette.

The structure of theme is defined by MaterialUI here: https://material-ui.com/customization/default-theme/

You can override any of these keys/values with your own. For example, you can override color which is used on various UI elements (buttons, selection controls, etc.) by defining a new set of secondary colors.

Plug your main color into Material Design's color tool to derive light and dark colors.

var miradorInstance = Mirador.viewer({
  id: 'mirador',
  theme: {
    palette: {
      type: 'dark',
      secondary: {
        light: '#c2493c',
        main: '#8c1515',
        dark: '#590000',
      },
    },
  },
});

Configuring dynamically

You can also dynamically configure a Mirador instance. For example, you can paste the following into the browser console and view changes lives.

var action = miradorInstance.actions.updateConfig({
  theme: {
    palette: {
      secondary: {
        light: '#c2493c',
        main: '#8c1515',
        dark: '#590000',
      },
    },
  },
});
miradorInstance.store.dispatch(action);

Mirador defaults

Default palette

Hex values for the default Mirador palette can be found under theme in config/settings.js

Palette to Component Mappings

• Application bar: primary - main
• Workspace surface: surface - dark
• Window surface: primary - dark
• Window top bar: primary - light
• Thumbnail strip surface: primary - dark
• Selection controls: secondary
• Buttons: secondary
• FABs: secondary
• Chips: secondary
• Text links: secondary