How to create a custom theme in Matomo – Introducing the Matomo Platform

This is the start of a new blog series where we introduce the capabilities of the Matomo (Piwik) platform. You’ll learn how to write custom plugins & themes, how to use our HTTP APIs and more.

We have been greatly simplifying our APIs over the last year focusing primarily on one design principle:

The complexity of our API should never exceed the complexity of your use case.

In other words, if you have a simple use for our API, we want it to be simple for you to accomplish it. If you have a complex, big, hairy, change-the-world idea, then maybe we can’t make it simple for you to accomplish it, but we want it to be possible.

Over the next weeks and months you will learn what exactly we mean by this and how we accomplished it.

FYI, don’t worry if you’re currently using our APIs, we keep them backwards compatible and we announce breaking changes in our platform changelog.

Getting started

In this series of posts, we assume that you have already set up your development environment. If not, visit the Matomo Developer Zone where you’ll find the tutorial Setting up Matomo.

To summarize the things you have to do to get setup:

• Install Matomo (for instance via git).
• Activate the developer mode: ./console development:enable --full.
• And if you want, generate some test data: ./console visitorgenerator:generate-visits --idsite=1 --limit-fake-visits=600. This can take a while and requires the VisitorGenerator plugin from the Marketplace.

Let’s start creating our own theme

We start by using the Matomo Console to create a blank theme:

./console generate:theme

The command will ask you to enter a name, description and version number for your theme. I will simply use “CustomTheme” as the name of the theme. There should now be a folder plugins/CustomTheme which contains some files to get you started easily.

Before we modify our theme, we have to activate it by visiting the Settings => Themes admin page in our Matomo installation, or alternatively by running the command ./console core:plugin activate YourCustomTheme. If the theme is not activated, we won’t see any changes.

Theme Contents

The most important files in our theme are plugins/CustomTheme/stylesheets/theme.less, plugins/CustomTheme/stylesheets/_colors.less and plugins/CustomTheme/stylesheets/_variables.less:

• theme.less is the file that will be included when your theme is activated. In this file you would include other stylesheet files and overwrite CSS styles.
• _colors.less contains many less variables allowing you to easily change the colors Matomo uses.
• _variables.less contains currently only one variable to change the font family. More variables will be added in the future. Note: This is a new feature and the file will be only there in case you have installed Matomo using Git or at least Matomo 2.6.0.

Changing the font family

To change the font family simply overwrite the variable @theme-fontFamily-base: Verdana, sans-serif; in _variables.less. That’s it.

Changing colors

To change a color, uncomment the less variables of the colors you want to change in _colors.less. I will shortly explain some of them. Usually changing only these colors will be enough to adjust Matomo’s look to your corporate design or to create a look that pleases you:

@theme-color-brand:                    #d4291f; // The Matomo red which is for instance used in the menu, it also defines the color of buttons, the little arrows and more
@theme-color-brand-contrast:           #ffffff; // Contrast color to the Matomo red. Usually you need to change it only in case you define a light brand color. For instance to change the text color of buttons
@theme-color-link:                     #1e93d1; // The link color which is usually a light blue

@theme-color-widget-title-text:        #0d0d0d; // The text and background color of the header of a widget (Dashboard)
@theme-color-widget-title-background:  #f2f2f2;

@theme-color-menu-contrast-text:       #666666; // The text color of a menu item in the reporting sub menu and the admin menu
@theme-color-menu-contrast-textActive: #0d0d0d; // The text color of an active menu item
@theme-color-menu-contrast-background: #f2f2f2; // The background color of a menu item

@graph-colors-data-series[1-8]:        #000000; // The different colors used in graphs

Making the change visible

To make a color or font change actually visible when you reload a page in Matomo you will have to delete the compiled CSS file after each change like this:

rm tmp/assets/asset_manager_global_css.css

Publishing your Theme on the Marketplace

In case you want to share your theme with other Matomo users you can do this by pushing your theme to GitHub and creating a tag. Easy as that. Read more about how to distribute a theme.

Advanced features

Isn’t it easy to create a custom theme? All we had to do is to change some less variables. We never even created a file! Of course, based on our API design principle, you can accomplish more if you want. For instance, you can change icons, CSS stylesheets, templates and more.

For further customising your Matomo, you can even change the logo and favicon in the Settings => General settings page.

Would you like to know more about theming? Go to our Theme guide in the Matomo Developer Zone.

If you have any feedback regarding our APIs or our guides in the Developer Zone feel free to send it to us.

PS: see also this related FAQ: How do I White Label Matomo? and the White Label Analytics platform