Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/whitespace-se/matomo-modern-theme

Modern gives the Matomo user interface a minimalist look and feel.
https://github.com/whitespace-se/matomo-modern-theme

matomo matomo-theme matomo-ui modern ux

Last synced: 2 months ago
JSON representation

Modern gives the Matomo user interface a minimalist look and feel.

Host: GitHub
URL: https://github.com/whitespace-se/matomo-modern-theme
Owner: whitespace-se
License: gpl-3.0
Created: 2021-01-07T08:43:12.000Z (about 4 years ago)
Default Branch: main
Last Pushed: 2024-02-19T05:38:31.000Z (12 months ago)
Last Synced: 2024-05-11T14:47:10.439Z (9 months ago)
Topics: matomo, matomo-theme, matomo-ui, modern, ux
Language: Less
Homepage:
Size: 3.38 MB
Stars: 16
Watchers: 12
Forks: 5
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

# Modern

## Description

Modern gives the Matomo interface a minimalist design with an updated colour scheme.

Modern makes it easier than ever to stay on brand. The white header means that you can simply upload your organisation’s logo – without clashing with the original Matomo header colour.

Now also with optional dark mode and the option to change the background of the page header.

The design is focused on usability and accessibility. Colours are selected to maintain a good contrast ratio. The navigation design is updated to improve focus on the main content. Support for keyboard navigation is enhanced, compared to the default Matomo interface.

Modern is maintained by usability and accessibility specialists at the [Whitespace agency](https://whitespace.se).

## Dark mode

![Dark mode](https://github.com/whitespace-se/matomo-modern-theme/blob/main/screenshots/2_dark_mode.png?raw=true)

We added dark mode as an option from version 1.1.0.

You can select the **Dark** or **Light** appearance as a default option, or make it change **automatically** with sunset (Light ⇢ Dark) and sunrise (Dark ⇢ Light).

## Custom header background colour

![Custom background colour](https://github.com/whitespace-se/matomo-modern-theme/blob/main/screenshots/3_custom_background_color.png?raw=true)

We added this configuraton as an option from version 1.1.0.

Fill in a colour code. HEX, rgb, rgba, hsl and hsla colours are allowed.

This can be particularly useful for dev/staging environments where you want to clearly signal that it's not the production environment.

## Options

![Modern options](https://github.com/whitespace-se/matomo-modern-theme/blob/main/screenshots/4_options.png?raw=true)

Edit the options from Administration > System > General Settings

## Config

Configuration can be overriden in `config.ini.php`

```php
[Modern]
modernDarkMode = 0
modernHeaderBackgroundColor = "#ff5100"
```

### Options for dark mode

- `modernDarkMode = 0` - Make it change *automatically* with sunset (Light ⇢ Dark) and sunrise (Dark ⇢ Light)
- `modernDarkMode = 1` - Only **Dark** mode
- `modernDarkMode = 2` - Only **Light** mode

### Header background color

Fill in a colour code as a string. HEX, rgb, rgba, hsl and hsla colours are allowed.

```php
modernHeaderBackgroundColor = "#ff5100"
```

## Whitespace & Matomo

We offer support for configuration, operation and web analysis with Matomo. The customer list includes 30+ organizations in the public sector - e.g. [The Swedish Tax Agency](https://skatteverket.se/), [The Swedish National Archives](https://riksarkivet.se/), [Uppsala municipality](https://www.uppsala.se/), [Trelleborg Municipality](https://www.trelleborg.se/), [Eslöv municipality](https://eslov.se/), the [Swedish Social Insurance Agency](https://www.forsakringskassan.se/), [Statistics Sweden](https://scb.se/) & [Umeå University](https://www.umu.se).

Read about [Whitespace & Matomo](https://whitespace.se/matomo/)