Can you change the design of Matomo?

One of the reasons we frequently recommend Matomo is due in large part to its adaptability. If you want additional features, there's more often than not a module available that can be used. But you can also change the design of the Matomo user interface, and in early 2021 we at Whitespace launched the new design theme Modern.

Matomo allows you to create a theme that controls the design of the user interface. In the theme you can alter colours, icons, typography… well, anything that can be updated with CSS.

In the early days of 2021, we at Whitespace launched the Modern theme for Matomo. The design was created by Peter Antonius, our accessibility specialist. Rather than creating something completely new, Peter chose instead to refine the existing design.

"I have changed the design to help improve usability and accessibility in a way that is consistent with the structure of the user interface. I have not touched the parts of the UI that are more complicated to update. This approach is usually more sustainable, and less prone to errors when you update the system." Peter Antonius, Head of Design at Whitespace

Modern introduces several minor design changes:

• The header colour has been changed from indigo to white. This more neutral header is good if you want to upload your own logo, an option that is available out of the box with Matomo.
• The controls – search field, website, and date – have all received an updated design.
• The left menu is more subtle, focusing the attention of the user on the main content.
• The headlines have an adjusted design to improve readability.
• Keyboard navigation is enhanced, improving accessibility compliance.

Modern introduces several improvements to the Matomo user interfaces

If you are a Whitespace hosting client, let us know and we will activate the new theme for you. If not, you can follow these steps to activate Modern yourself:

1. Log into the Matomo user interface, and go the Marketplace.
2. Choose "Theme" in the dropdown menu, and search for Modern.
3. Activate the theme after installation.

Modern has no license fee and is free for anyone to use.