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.

We have provided some simple theming examples below. For more advanced theming, you may need to dig into the Material UI docs. See the resources at the bottom of this wiki page.

Light / Dark theme

Mirador ships with a light theme and a dark theme which users can change via the UI.

To use the dark theme by default, add the following to your settings:

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

OR: Try this out in your browser by pasting the following into your console:

var action = miradorInstance.actions.updateConfig({
  selectedTheme: 'dark',
});
miradorInstance.store.dispatch(action);

Example: Changing primary / secondary colors

Primary and secondary colors are used to emphasize various interface elements in Mirador 3. You may want to update primary and/or secondary colors to match your institution's branding.

Set primary color in light theme

In this example, the primary color in the light theme has been changed to a shade of purple.

Add the following to your settings:

var miradorInstance = Mirador.viewer({
  id: 'mirador',
  themes: {
    light: {
      palette: {
        type: 'light',
        primary: {
          main: '#ba55d3',
        },
      },
    },
  },
});

OR try it out in your browser by pasting the following into your console:

var action = miradorInstance.actions.updateConfig({
  themes: {
    light: {
      palette: {
        type: 'light',
        primary: {
          main: '#ba55d3',
        },
      },
    },
  },
});
miradorInstance.store.dispatch(action);

Set primary color in light theme AND dark theme

To use the same primary color in dark mode, you will need to override the primary color like so:

Add the following to your settings:

var miradorInstance = Mirador.viewer({
  id: 'mirador',
  themes: {
    dark: {
      palette: {
        type: 'dark',
        primary: {
          main: '#ba55d3',
        },
      },
    },
    light: {
      palette: {
        type: 'light',
        primary: {
          main: '#ba55d3',
        },
      },
    },
  },
});

OR try it out in your browser by pasting the following into your console:

var action = miradorInstance.actions.updateConfig({
  themes: {
    dark: {
      palette: {
        type: 'dark',
        primary: {
          main: '#ba55d3',
        },
      },
    },
    light: {
      palette: {
        type: 'light',
        primary: {
          main: '#ba55d3',
        },
      },
    },
  },
});
miradorInstance.store.dispatch(action);

Override primary color and secondary color

In the example below, both the primary and secondary colors have been changed.

Add the following to your settings:

var miradorInstance = Mirador.viewer({
  id: 'mirador',
  themes: {
    light: {
      palette: {
        primary: {
          main: '#ba55d3',
        },
        secondary: {
          main: '#00ff7f',
        },
      },
    },
  },
});

OR try it out in your browser by pasting the following into your console:

var action = miradorInstance.actions.updateConfig({
  themes: {
    light: {
      palette: {
        primary: {
          main: '#ba55d3',
        },
        secondary: {
          main: '#00ff7f',
        },
      },
    },
  },
});
miradorInstance.store.dispatch(action);

Creating a theme

In addition to the default light and dark themes, Mirador allows you to define more themes via your settings.

1. Under themes, add a key that you would like to use as your theme name.
2. Choose whether the theme will use light or dark defaults.
3. Add palette and other theme adjustments similar to the example above.
4. In the application bar, open the workspace settings. Under Change theme you should see your new theme registered in the menu.

Play with the theming example below:

https://codepen.io/cazilla11/pen/mYBqxB

Mirador defaults

Default palette

The most up-to-date hex values for the default Mirador palette can be found under theme in config/settings.js

Palette to Component Mappings

Primary

• Workspace application bar
• Window top bar - currently focused window
• Thumbnail strip - current canvas
• Buttons
• Sidebar icons and active indicator
• FABs (e.g. Add resource button)

Secondary

• Selection controls (toggles)
• Window options icons

Shades - Main

• Window top bar - background

Shades - Light

• Hover

Shades - Dark

• Active item

Advanced Theming Resources

• Material UI: Themes
• Material UI: Interactive default theme
• Material Design's color tool