Can you change the design of Matomo?

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, and since then it has had more than 9000 downloads. The design was created by accessibility specialist Peter Antonius during his time at Whitespace. 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

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.