Dark Theme

• A-Logo

  

• Dashboard

  

• Performances

  

• Softwares

  

• Tag Manager

  

• Tag Manager tags

  

• Visitor Map

  

• Visits Log

  

Dark Theme transforms your Matomo Analytics interface into a modern dark experience. This documentation covers the theme architecture and customization options.

Theme Architecture

The theme uses LESS preprocessing and is organized into modular components for maintainability:

stylesheets/
├── theme.less          # Main entry point
├── _variables.less     # CSS custom properties
└── components/
    ├── _alert.less     # Alerts and notifications
    ├── _button.less    # Buttons and actions
    ├── _calendar.less  # Date picker
    ├── _canvas.less    # Charts (jqPlot)
    ├── _card.less      # Cards and widgets
    ├── _dropdown.less  # Dropdown menus
    ├── _form.less      # Form inputs
    ├── _map.less       # RealTimeMap & UserCountryMap
    ├── _modal.less     # Modal dialogs
    ├── _nav.less       # Navigation
    ├── _table.less     # Data tables
    ├── _visits_log.less # Visitor log
    └── ...

CSS Variables

The theme defines a comprehensive set of CSS custom properties in _variables.less:

Color Scales

Light Scale (for text and highlights): - --light - Pure white (#ffffff) - --light-muted - Slightly transparent white (85%) - --light-transparent - Semi-transparent (70%) - --light-subtle - Subtle text (50%) - --light-dimmed - Dimmed elements (30%)

Primary Scale (brand/accent colors): - --primary - Main accent (#3450a3) - --primary-light - Hover states - --primary-lighter - Active states - --primary-dark - Pressed states - --primary-subtle - Backgrounds with accent

Dark Scale (backgrounds): - --dark-elevated - Elevated surfaces - --dark - Card/widget backgrounds (#2b3138) - --darker - Page background (#202329) - --darkest - Deepest shadows

Semantic Variables

• Borders: --border-light, --border-medium, --border-strong
• Surfaces: --surface-base, --surface-raised, --surface-overlay
• Text: --text-primary, --text-secondary, --text-tertiary
• Status: --success, --warning, --danger, --info

Customizing Colors

Override any CSS variable in your own stylesheet:

:root {
  --primary: #your-brand-color;
  --dark: #your-background-color;
}

Chart Theming

Charts use Matomo's color namespace system. The theme defines colors for:

• .sparkline-colors - Sparkline graphs
• .bar-graph-colors - Bar charts
• .pie-graph-colors - Pie charts
• .evolution-graph-colors - Line/evolution charts

Each namespace defines background, series colors, grid lines, and labels.

Map Theming

Maps use dedicated color namespaces:

• .realtime-map-colors - Real-time visitor map
• .visitor-map-colors - User country/region maps

These define country fills, boundaries, choropleth ranges, and tooltips.

Contributing

To contribute:

1. Fork the GitHub repository
2. Follow the component-based structure
3. Test across different Matomo screens
4. Submit a pull request

Credits

• Theme by Openmost
• Sparkline implementation inspired by lw1.at

Installation

How do I install this theme?

1. Go to your Matomo Administration panel
2. Navigate to Marketplace > Themes
3. Search for "Dark Theme"
4. Click Install and then Activate

Alternatively, download from GitHub and extract to your plugins/ directory.

Is the theme active for all users?

Yes. When activated, the Dark Theme applies to all users on your Matomo instance. Individual users cannot switch between themes.

Which Matomo versions are supported?

Dark Theme 5.x supports Matomo 5.0 and later. For Matomo 4.x, use Dark Theme version 1.x.

Compatibility

Does it work with Matomo plugins?

Yes. The theme is designed to work with official Matomo plugins including: - Tag Manager - Funnels - Heatmaps & Session Recording - AI Chats (ChatGPT, MistralAI) - Custom Reports - And more

Will it conflict with other themes?

No. Only one theme can be active at a time. The Dark Theme completely replaces the default styling without modifying any HTML structure.

Does it affect tracking or data collection?

No. This is a purely visual theme. It does not modify tracking code, data collection, or any Matomo functionality.

Customization

Can I customize the colors?

Yes. The theme uses CSS custom properties. Create a custom stylesheet and override variables like:

:root {
  --primary: #your-color;
  --dark: #your-background;
}

Where are the style files located?

All styles are in the stylesheets/ folder within the plugin directory. The main entry point is theme.less.

Can I modify specific components?

Yes. Components are organized in stylesheets/components/. Each file handles a specific UI element (buttons, modals, tables, etc.).

Troubleshooting

Charts or maps don't look right

Clear your Matomo cache: 1. Go to Administration > System > General Settings 2. Click "Clear all caches"

Or delete files in tmp/assets/ directory.

Some elements still appear light

This might be a caching issue. Clear both Matomo cache and your browser cache. If the issue persists, please report it on GitHub.

The theme stopped working after a Matomo update

We update the theme regularly to support new Matomo versions. Check for theme updates in the Marketplace. If no update is available yet, please open a GitHub issue.

Support & Contributing

How can I report a bug?

Open an issue on our GitHub repository with: - Matomo version - Dark Theme version - Browser and version - Screenshot of the issue

How can I contribute?

We welcome contributions! Fork the repository, make your changes following the component-based structure, and submit a pull request.

How long will this theme be maintained?

We actively use this theme on multiple production Matomo instances. We're committed to maintaining compatibility with new Matomo releases.

Can you create a custom theme for my company?

Yes! We offer custom theme development. Contact us at ronan@openmost.io or visit openmost.io.