1. Executive Summary

Modernize is a premium interface theme for Dolibarr ERP/CRM. It replaces the standard back-office chrome with a contemporary SaaS interface: a structured sidebar, a clean top bar with global search, a data-driven dashboard, and a branded login page — without modifying a single line of the Dolibarr core.

The product ships two complete and independent demos — Modernize Light and Modernize Dark. Each has its own palette, dashboard composition, sidebar, top bar and login screen. An administrator switches between them from a single drop-down; the change is applied immediately, with no reinstallation and no cache clearing.

Modernize is delivered as a Dolibarr module. It installs by copying one folder and enabling the module, it is removed just as cleanly, and it is compatible with Dolibarr 16 through 23 and PHP 7.0 through 8.3.

Key figures

Item	Value
Demos included	2 (Modernize Light, Modernize Dark)
Colour palettes	9 presets + fully custom
Layout variants	4 page layouts, 6 sidebar styles, 4 header styles
Configurable settings	26
Interface languages	7 (FR, EN, ES, DE, IT, PT-BR, NL)
Dolibarr compatibility	16.0 → 23.x
Core files modified	None

 

 

2. Theme Overview

Modernize is built as a theme-module rather than a classic CSS theme. This is a deliberate architectural decision. A CSS-only Dolibarr theme can recolour existing markup, but it cannot create structure that does not exist: it cannot add an accordion sidebar, an injected top bar or a KPI dashboard. A module can, because it may register its own menu manager, inject assets on every page, and hook into the page lifecycle.

Modernize therefore does four things at once:

·       It injects its stylesheet and script on every page through module_parts.

·       It registers its own menu manager, which becomes the forced sidebar across the application.

·       It redirects the home page to its own dashboard through the main hook.

·       It writes a pre-paint script into the page head so the correct demo, theme and layout are applied before the first paint — the interface never flashes the wrong colours.

Everything else in Dolibarr keeps working exactly as before: third-party modules, permissions, multi-company, the agenda, the POS, PDF generation. Modernize changes how Dolibarr looks, never what it does.

 

3. UI/UX Philosophy

The design follows five principles applied consistently across every screen.

One visible surface at a time

Cards are the only elevated surface. Containers inside a card are transparent — no borders, no shadows, no nested panels. This avoids the boxed-in look that makes dense ERP screens tiring.

Colour carries meaning, not decoration

Each accent colour has one job: blue for primary actions and navigation, cyan for information, green for success and paid amounts, amber for warnings and pending items, coral for overdue and errors. A user learns the code once and reads every screen faster.

Generous, predictable spacing

A single spacing token drives the dashboard grid, and it is configurable. Cards breathe; numbers are given room; dense tables keep their rhythm.

Motion that explains, never entertains

Transitions are short (0.15–0.26 s) and only used to explain a change of state: a card lifting on hover, a menu section folding, a chart drawing itself once. Animations can be switched off entirely for users who prefer reduced motion.

Readable typography

Plus Jakarta Sans is used for interface text and JetBrains Mono for figures. Monospaced numerals keep amounts vertically aligned in tables and KPI tiles, which matters more in an ERP than in a marketing site.

 

4. Light Demo Presentation

Modernize Light is the default demo. It targets daily back-office work in bright environments: white surfaces, hairline borders, very soft shadows, and a row of pastel KPI tiles that gives an immediate read on the business.

Element	Treatment
Page background	#FFFFFF
Cards	White, 1 px #EBF1F6 border, soft shadow, 9 px radius
Primary	#5D87FF on #ECF2FF tint
Secondary / info	#49BEFF on #E8F7FF tint
Success	#13DEB9 on #E6FFFA tint
Warning	#FFAE1F on #FEF5E5 tint
Danger	#FA896B on #FDEDE8 tint
Text	#2A3547 primary, #5A6A85 secondary

 

 

5. Dark Demo Presentation

Modernize Dark is a full dark interface rather than an inverted light one. It uses a single navy surface (#2A3447) for the page, the sidebar, the top bar and the cards; cards are separated by a subtle light border instead of a different fill. The result is calm and uniform, and it matches the reference design exactly.

The dashboard opens with a welcome banner carrying the period turnover and its year-on-year variation. KPI tiles keep the card surface and move the colour into the icon chip and the figure — a coloured pastel fill would turn muddy brown or maroon over navy.

Element	Treatment
Page / sidebar / top bar / cards	#2A3447 (single surface)
Card separation	1 px rgba(255,255,255,0.10) border
Welcome banner	#253662
Text	#EAEFF4 primary, #AEB9CC secondary
Accent tints	15 % transparent tints of the accent colours

 

 

6. Dashboard Features

The dashboard replaces Dolibarr's standard home page and is built entirely from live data. Every figure is a real SQL aggregate over the user's entity — there is no sample data and no placeholder.

Composition

·       Pastel statistics strip — employees, clients, projects, events, payments, proposals.

·       KPI cards — turnover, unpaid invoices, new clients, orders, each with a period-over-period variation and an eight-month sparkline.

·       Revenue Updates — twelve-month turnover curve against the previous year, with a summary column (total earned, earnings for the period, outstanding invoices) and a report link.

·       Yearly Breakup — current year versus previous year as a ring chart.

·       Monthly Earnings — period figure, variation and an eight-month area chart.

·       Commercial pipeline — proposals by status, as a donut with a clickable legend.

·       Recent activity, today's agenda and the latest invoices.

·       Native Dolibarr widgets (boxes), preserved and restyled, with their add/remove selector.

Period selector

A week / month / year switch recomputes every period-sensitive figure. Tiles link through to the matching list, pre-filtered to the same period and the same status, so the number on the tile always matches the number of rows in the destination list.

Empty states

A panel with no data renders an explicit empty state — icon, title and a one-line explanation — never a blank card.

 

7. Sidebar Features

The sidebar is generated from Dolibarr's own menu tree, so every enabled module — core or third-party — appears automatically with the correct permissions applied. Nothing is hard-coded.

·       Accordion sections that fold in place, without reloading the page.

·       Module search field at the top of the column.

·       Favourites (bookmarks) and a Recently opened section with a configurable cap.

·       Level-encoded active state, so the highlighted entry stays correct across pages and browser tabs.

·       Collapsible icon rail on desktop, off-canvas drawer on mobile.

·       Six styles: light, dark, coloured, floating, mini and large.

Top-level module entries are real links, not toggles: clicking a module both navigates to it and sets the menu context, which keeps the sidebar's active state accurate.

 

8. Topbar Features

The top bar hosts navigation and account controls without competing with the page content: it has no border, no shadow, and circular borderless icon buttons.

·       Global search across third parties, invoices, orders, proposals and products.

·       Sidebar toggle — collapses the rail on desktop, opens the drawer on mobile.

·       Light/dark switch, remembered per browser and overriding the demo default.

·       Native Dolibarr controls preserved: company selector, print view, help, notifications, user menu.

·       Four styles: light, dark, transparent and coloured.

 

9. Login Pages

Each demo has its own login screen, styled from the same tokens as the application. The card is centred on a tinted background, fields are full-width with a primary focus ring, and the sign-in button is a full-width primary action. Dolibarr's native diagonal background is neutralised, and the logo is automatically inverted in dark mode so it stays legible.

Multi-company entity selection, password recovery and help links are all preserved.

 

10. Widgets

Modernize renders Dolibarr's native widget system (boxes) inside its own card styling, including the selector that lets each user add or remove widgets. Drag-and-drop ordering keeps working because the theme preserves the container identifiers the core JavaScript expects.

Widget family	Examples
Business overview	Global status board, pending items
Finance	Bank balances, unpaid customer and supplier invoices
Sales	Latest proposals, orders, contracts
Stock	Products below stock alert
Charts	Monthly invoices, proposals and orders
Activity	Latest actions, upcoming events, logged-in users

 

 

11. KPI Cards

Two families of tile are used, deliberately.

Pastel statistics tiles

Six flat tiles in the accent colours, each with an icon chip, a label and a figure. They answer 'how big is my business' at a glance. A tile whose module is disabled is simply not rendered — no empty tile, no dead link.

KPI cards with variation

Four cards showing an amount, a period-over-period variation as a coloured chip, and an eight-month sparkline. Divisions are guarded, so a period with no history shows a neutral variation rather than an error.

 

12. Charts

All charts are inline SVG generated server-side. There is no charting library, no external request and no client-side rendering cost.

·       Area and line chart — twelve-month turnover, current year against previous year, with an interactive tooltip following the cursor.

·       Ring charts — yearly breakup and commercial pipeline. Zero-value segments are skipped entirely, so a rounded stroke cannot paint a phantom dot on the ring.

·       Sparklines — compact eight-month trends inside KPI and earnings cards.

Chart colours come from the same tokens as the rest of the interface, so they follow the palette and the light/dark mode automatically.

 

13. Tables

Dolibarr list screens are the most used part of the application, so they receive specific attention rather than a generic recolour.

·       The list container is the card; the table inside is transparent and border-free, so the rounded corners stay clean.

·       Row separators are re-tinted to the theme token — the core uses hard-coded near-white values that would show as harsh lines in dark mode.

·       The filter bar is given its own card and spacing.

·       Hover and selected rows use the soft primary tint.

·       Tables in narrow containers use a fixed layout with ellipsis, so columns cannot be cut off.

 

14. Forms

Inputs, selects, textareas and date pickers inherit the theme through Dolibarr's own CSS variables: consistent height, radius, border and a primary focus ring. Required-field markers, disabled states and validation colours all map to the theme tokens.

The select2 dropdowns used across Dolibarr get explicit treatment: without it, the highlighted option renders white-on-white and becomes invisible on hover.

 

15. Theme Configuration

All settings live on one page, grouped into five sections. Every label and hint is translated; nothing is hard-coded.

Section	Settings
Demo	Active demo (Light / Dark); colour palette (9 presets + Custom)
Appearance	Primary, secondary, accent, success, danger, warning and info colours; corner radius; font size; web font on/off
Layout	Page layout; sidebar style; header style; card shadows; card spacing; animations
Menu	Sidebar width; hide favourites; hide recently opened; recent items cap
Dashboard	Disable custom dashboard; hide native widgets; turnover basis (incl./excl. tax); include abandoned invoices

 

Saving bumps Dolibarr's asset revision, so the regenerated CSS and JS are fetched on the next page load: a change of demo or palette is visible immediately, without a hard refresh.

A Reset action restores the shipped defaults behind a confirmation dialog. On demo platforms the page is readable by non-administrators while every write remains blocked server-side.

 

16. Responsive Design

Breakpoint	Behaviour
Desktop (> 1400 px)	Full sidebar, six-column statistics strip, two-column dashboard
Laptop (1200–1400 px)	Three-column statistics strip, stacked chart column
Tablet (760–1200 px)	Single-column dashboard, full-width cards
Mobile (< 760 px)	Off-canvas sidebar drawer, two-column tiles, compacted top bar

 

Absence of horizontal overflow is verified at 390 px on every release. The native account block in the top bar scrolls horizontally on small screens, so the user menu — and therefore sign-out — always remains reachable.

 

17. Dark Mode

Dark mode is a first-class mode, not a filter. Two token sets are defined — one on :root, one on [data-modernize-theme="dark"] — and every colour in the interface, including the ones used by native Dolibarr pages, resolves through them.

Users reach it two ways: by running the Modernize Dark demo, or by pressing the switch in the top bar from either demo. A user's explicit choice is stored in the browser and always wins over the demo default.

The state is applied by a server-rendered script in the page head, before the first paint, so a reload never flashes the wrong theme. That script is the single source of truth: the cached JavaScript reads the state from it rather than carrying a baked-in default, which means a stale cached file can never override the configured demo.

 

18. Technical Architecture

Layer	Implementation
Module descriptor	modModernize.class.php — module id 10000320, version 1.0
Asset injection	module_parts['css'] and ['js'], served as dynamic PHP
Sidebar	Custom menu manager registered through module_parts['menus']
Hooks	main (home redirect), addHtmlHeader (pre-paint state, print CSS)
Dashboard	index.php rendered through llxHeader / llxFooter
Configuration	26 constants, read at request time

 

The :root override

The single most important technical mechanism is the redefinition of Dolibarr's own CSS variables. The module stylesheet loads after the core theme and re-points every core variable at a Modernize token. Because those tokens are themselves redefined in dark mode, thousands of native screens follow the palette — and the light/dark switch — without being individually styled.

Performance

The theme adds one stylesheet and one script, both cached for one hour and versioned by Dolibarr's asset revision. Charts are inline SVG, icons are inline SVG or the FontAwesome build Dolibarr already loads, and expensive counts are cached in the session. There is no charting library, no icon font download and no external JavaScript.

 

19. Folder Structure

Path	Contents
core/modules/modModernize.class.php	Module descriptor, activation and removal
core/menus/standard/	Menu manager and sidebar rendering library
class/actions_modernize.class.php	Hook handlers
class/modernize_demo.class.php	Optional demo data seeder
css/modernize.css.php	Design tokens, core override, all styling
js/modernize.js.php	Theme switch, collapse, drawer, top bar injection
index.php	Custom dashboard
search.php	Global search results
admin/setup.php	Configuration page
langs/<lang>/modernize.lang	Translations (7 languages, 190 keys each)

 

 

20. Browser Compatibility

Browser	Support
Google Chrome / Chromium	Latest 2 versions — fully supported
Microsoft Edge	Latest 2 versions — fully supported
Mozilla Firefox	Latest 2 versions — fully supported
Safari (macOS / iOS)	15+ — fully supported
Internet Explorer	Not supported (no CSS custom properties)

 

 

21. Dolibarr Compatibility

Modernize declares a Dolibarr 16.0 floor and a PHP 7.0 floor, and every core API it relies on has been checked for an unchanged signature across that range: getDolGlobalString, isModEnabled, hasRight, print_eldy_menu, print_left_eldy_menu, FormOther::getBoxesArea and InfoBox.

·       Dolibarr 16.x, 17.x, 18.x, 19.x, 20.x, 21.x, 22.x, 23.x — supported.

·       PHP 7.0 through 8.3 — supported.

·       No core file is modified, so Dolibarr upgrades are unaffected.

·       Compatible with multi-company and with third-party modules; unknown modules appear in the sidebar automatically because it is generated from the native menu tree.

One caveat applies to every Dolibarr theme-module: only one may be active at a time, because they all set the same forced-menu constants.

 

22. Installation Guide

Standard installation

1. Copy the modernize folder into htdocs/custom/.
2. Open Home → Setup → Modules.
3. Find Modernize in the Interfaces family and enable it.
4. Reload the page — the new interface is active.

Installation from the ZIP archive

If the module deployment feature is enabled, upload module_modernize-1.0.zip through Home → Setup → Modules → Deploy an external module, then enable Modernize.

If the sidebar does not appear

Disable and re-enable the module once. This re-runs the activation routine, which writes the forced-menu constants and registers the menu directory.

Uninstalling

Disabling the module removes its constants and restores the standard Dolibarr interface immediately. No data is deleted.

 

23. Customization Guide

Without touching any code

The configuration page covers demo, palette, all accent colours, corner radius, font size, sidebar and header styles, page layout, shadow depth, card spacing and animations. For most brands, selecting Custom and setting the primary colour is enough — every derived tint, hover state and chart colour follows automatically.

For integrators

All styling flows from the token block at the top of css/modernize.css.php. Overriding those tokens is the supported extension point; individual rules should not need to be touched. Because the same tokens are re-exported into Dolibarr's core variables, a change there also propagates to every native screen.

Adding a language

Copy langs/en_US/modernize.lang to the target locale and translate the values. All files must keep identical keys.

 

24. Performance Optimization

Area	Approach
HTTP requests	One stylesheet, one script — no library, no icon font download
Caching	One-hour browser cache, invalidated by Dolibarr's asset revision
Charts	Inline SVG generated server-side; no client-side rendering
Images	Inline SVG only; no bitmap assets shipped
Database	Aggregated queries; expensive counts cached in session; guarded divisions
First paint	Theme and layout applied in the head, before paint — no flash, no reflow

 

 

25. Screenshots Description

The delivery contains 42 full-resolution screenshots (3200 × 1980 px, 2× density), organised in two folders — Screenshots/Modernize-Light and Screenshots/Modernize-Dark — with identical numbering so the two demos can be compared screen by screen.

File	Screen
01_connexion	Login page
02–03_tableau_de_bord	Main dashboard, upper and lower sections
04–07_dashboard_*	Sales, invoicing, projects and products dashboards
08–09	Third-party list and customer record
10–14	Products, orders, proposals, invoices and an invoice record
15–16	Agenda and users
17_recherche_globale	Global search results
18_configuration_theme	Theme configuration page
19_liste_modules	Module list
20–21_responsive	Tablet (834 px) and mobile (390 px) rendering

 

 

26. Advantages

·       Two production-ready demos in a single purchase, switchable in one click.

·       Covers the whole application — lists, records, forms, agenda, configuration and login — not just a dashboard.

·       Native pages follow the palette automatically through the core-variable override, so third-party modules look consistent without extra work.

·       No core modification: Dolibarr upgrades remain straightforward.

·       Genuinely responsive, verified down to 390 px with no horizontal overflow.

·       Real dark mode with no flash on load.

·       Seven languages at full key parity.

·       Live data everywhere — the dashboard reflects the actual business, not sample figures.

 

27. Future Enhancements

Version	Planned
1.1	Additional demos (Corporate, Minimal); per-user demo preference
1.2	Dashboard widget designer — reorder and resize the custom panels
1.3	Role-based dashboards (management, sales, accounting, HR)
1.4	Saved theme presets, exportable and importable between instances
1.5	Optional RTL support and a high-contrast accessibility profile

 

 

Modernize 1.0 — Functional Description
Editor: DoliResources — https://www.doliresources.com
© 2026 DoliResources. All rights reserved.