M3 Theming Mirador - ProjectMirador/mirador GitHub Wiki
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.
- Under
themes
, add a key that you would like to use as your theme name. - Choose whether the theme will use light or dark defaults.
- Add palette and other theme adjustments similar to the example above.
- 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