1. Executive Summary

Cubic is a premium interface theme for Dolibarr ERP/CRM. It is delivered as a standard Dolibarr module: it installs from the module manager, requires no change whatsoever to the Dolibarr core, and can be enabled or disabled at any time without affecting business data.

Where a conventional Dolibarr theme can only recolour the existing markup, Cubic replaces the whole application shell. It ships its own left sidebar, its own top bar, its own dashboard, and its own sign-in page, while continuing to drive every menu, permission and hook through Dolibarr's native menu system — so every third-party module you have installed keeps working exactly as before.

The theme includes four complete, switchable demos. Each one has its own dashboard composition, its own KPI family, its own sign-in layout and its own accent palette. Switching between them is a single dropdown in the configuration screen and takes effect on the next page load — there is nothing to reinstall.

·       Four demos — Cubic Analytics, Cubic Sales, Cubic Reports and Cubic Orders.

·       Real data — every figure on every dashboard is read live from Dolibarr; nothing is mocked.

·       True dark mode — a separate set of dark surfaces, toggled from the top bar and remembered per browser.

·       Deep configuration — palette, font, radius, spacing, shadows, borders, sidebar mode, header mode, layout, animations and RTL.

·       Five languages — English, French, Spanish, Italian and German (Dutch and Portuguese included as a bonus).

·       No core modification — installed entirely under custom/cubic.

2. Theme Overview

Property	Value
Commercial name	Cubic
Technical name	theme_cubic
Folder	custom/cubic
Module class	modCubic
Module id (numero)	10000360
Version	1.0
Package	module_cubic-1.0.zip
Editor	DoliResources — https://www.doliresources.com
Licence	GPL-3.0-or-later
Dolibarr	16.0 and above (validated on 17.0.3; compatible with 20 and 21)
PHP	7.0 and above, PHP 8 compatible

 

3. UI/UX Philosophy

Cubic follows the visual language of the Cubic Admin design system: a blue-to-cyan gradient top bar, a calm white sidebar headed by a large circular avatar, a very light canvas, and flat cards with a small corner radius and a soft shadow. Colour is used sparingly and always to carry meaning — never as decoration.

·       Density with air — generous 24 px gutters and a 4 px radius keep dense ERP tables readable.

·       Meaningful colour — blue for volume, green for success, red for what needs attention, amber for pending.

·       Honest figures — a ratio whose population is empty renders as “n/a”, never as a misleading 0 pct.

·       Motion as feedback — short, purposeful transitions on hover, fold and expand; fully disableable.

·       One system — the same tokens drive the dashboard, the standard Dolibarr pages and the sign-in screen.

 

4. The Four Demos

All four demos share the Cubic chrome and read the same underlying data. They differ in how that data is composed on the dashboard, which KPI family they use, and how the sign-in page is laid out.

4.1 Cubic Analytics

The analytical dashboard. A single segmented KPI strip spans the width of the page: each segment carries a teardrop icon badge, a large figure, an uppercase caption, then a rule and a footer line with a coloured pill. The fourth segment is a compact report legend. Below it, a wide twin-curve statistics panel is paired with a task-progress widget (bar sparkline, split counters, account avatars), and the page closes on three full-colour summary tiles in blue, green and red.

Sign-in layout: Centred card with a gradient rule across the top of the page.

 

4.2 Cubic Sales

The commercial dashboard. Four saturated full-bleed KPI cards in blue, green, red and amber carry the headline figures, each with an outline icon and a translucent chip in its footer. Three chart panels follow — sales difference (filled twin curves), a paired bar chart, and item earnings — above the customer data table with its role pills and row actions.

Sign-in layout: Split screen: a full-height gradient panel on the left, the sign-in card on the right.

 

4.3 Cubic Reports

The reporting dashboard. Four horizontal widget cards pair a round solid icon with an inline mini chart or a progress bar, next to a concentric three-ring gauge with a trophy at its centre. A full-width sales report curve follows, then a row of pipeline cards, each with its own share bar.

Sign-in layout: Full-page gradient with the card floating on top.

 

4.4 Cubic Orders

The order-management dashboard. Three minimal white cards show a large tinted figure, a trend arrow and a teardrop badge pushed to the right edge. A sales statistics curve sits beside an order-status donut whose centre carries the total, and the page closes on the orders table with product thumbnails and status pills.

Sign-in layout: Minimal: flat canvas, borderless card, a single coloured rule on top.

 

5. Dashboard Features

Every figure on the Cubic dashboard is a live Dolibarr query. Nothing is hard-coded, and a panel whose underlying module is disabled is omitted rather than shown empty.

Indicator	Source
Turnover for the period	llx_facture, validated and paid invoices, amount base configurable (incl. or excl. tax)
Outstanding amount	llx_facture, validated and unpaid
New customers	llx_societe, created within the period
Orders	llx_commande, within the period
Collection rate	paid over invoiced, both sides drawn from the same population
Win rate	proposals won over proposals decided; “n/a” while nothing is decided
Annual target	configurable; otherwise the higher of last year +10 pct and the current run-rate
Order status split	llx_commande grouped by status, feeding the donut
Top accounts	customers ranked by invoiced turnover

 

·       Elapsed window only — months that have not happened yet are never plotted as zero — both series are cut to the same elapsed window, which is also the only honest year-on-year comparison.

·       Square-root bar scale — with real ERP data one month is routinely a hundred times another; a linear scale flattens every other bar to a hairline.

·       Native widgets preserved — Dolibarr's own boxes are rendered underneath, restyled as Cubic cards, and keep their add / hide / drag-to-reorder behaviour per user.

6. Sidebar Features

·       Profile block — large circular avatar with a status chevron, the user's real photo when set, initials otherwise, name in the primary colour and role underneath.

·       Live counters — coloured badges count unpaid invoices, open proposals, prospects, today's events and open projects; a module that is disabled simply has no badge.

·       Native menu tree — built from Dolibarr's own menu system, so every module and permission is honoured.

·       Accordion sub-menus — the active section expands in place; chevrons fold without navigating.

·       Bookmarks — the user's real Dolibarr bookmarks, with an add-this-page shortcut.

·       Recently opened — per-session history with a colour-coded type tag.

·       Module filter — type to filter the navigation live.

·       Collapsible rail — folds to a 78 px icon rail; the state is remembered per browser and applied before first paint, so there is no fold flash on reload.

·       Off-canvas on mobile — below 760 px the rail becomes a drawer with a backdrop.

·       Call to action — a green button pinned at the bottom, opening the theme settings for an administrator and the user's own account otherwise.

7. Topbar Features

·       Gradient bar — blue to cyan, with the brand block rendered as its solid left segment.

·       Global search — searches third parties, invoices, orders, proposals and products from one field.

·       Action icons with counters — open actions assigned to the user, and today's events; the counts are rendered server-side per request rather than baked into the cached JavaScript, so they are never stale.

·       Theme toggle — switches light and dark instantly and remembers the choice.

·       Settings shortcut — opens the theme configuration (administrators only).

·       Native block preserved — company selector, print, help and the user menu are kept and restyled, and stay reachable on a phone through their own horizontal scroll.

 

8. Login Pages

The sign-in screen is pre-session: there is no stored preference and no pre-paint script yet, so the demo is resolved server-side. Each demo therefore has its own sign-in identity, and Dolibarr's own diagonal two-tone background is neutralised so the card never sits on a half-painted canvas.

Demo	Layout
Cubic Analytics	Centred card, tinted halo, gradient rule across the top
Cubic Sales	Split screen, full-height gradient panel on the left
Cubic Reports	Full-page gradient, card floating on top
Cubic Orders	Minimal flat canvas, borderless card with a coloured top rule

 

9. Widgets, KPI Cards, Charts, Tables and Forms

9.1 KPI families

Family	Used by	Description
Segmented strip	Analytics	One card split into equal segments with teardrop badges
Solid cards	Sales	Saturated full-bleed colour, white type, footer chip
Horizontal widgets	Reports	Round solid icon, inline mini chart or progress bar
Minimal cards	Orders	Tinted figure, trend arrow, teardrop badge on the right

 

The family is normally chosen by the demo, but it can be forced independently from the configuration screen.

9.2 Charts

All charts are inline SVG generated in PHP: no JavaScript charting library is loaded, nothing is fetched from a CDN, and they render identically in light and dark mode.

·       Smoothed twin curves, with or without a filled area

·       Paired bar charts with a square-root scale

·       Bar sparklines

·       Donut gauges with a centred figure

·       Concentric ring gauges

·       Progress bars

9.3 Tables and forms

Dolibarr's own lists, cards and forms are restyled through the theme tokens rather than rebuilt: rows, filters, column selectors, status badges, tabs, buttons and inputs all follow the active palette and adapt to dark mode. Hard-coded core colours that would break in dark mode — row separators, calendar cells, info boxes, tab underlines — are retinted to theme tokens.

 

10. Theme Configuration

A single configuration screen drives everything. It opens with a gallery showing the four demos, each painted in its own colours, with a preview link. The preview applies the demo to the whole interface for that session without changing the stored configuration.

Section	Settings
Demo	Active demo, colour palette, KPI card style, start in dark mode
Appearance	Primary and accent colour, success / danger / warning colours, font family, corner radius, base font size, web font loading
Layout	Layout mode (fluid, boxed, compact, full), sidebar mode (demo, light, dark, coloured, floating, mini, large), header mode (demo, gradient, light, dark, transparent, coloured), shadow depth, card borders, gutter, animations, right-to-left
Menu	Sidebar width, hide profile block, hide counters, hide call to action, hide bookmarks, hide recently opened, history length, hide top-bar icons
Dashboard	Disable the custom dashboard, hide the native widgets, annual turnover target, turnover base (incl./excl. tax), include abandoned invoices

 

·       Nine palettes — demo colours, blue, green, cyan, turquoise, orange, red, violet, grey, plus a fully custom pair.

·       Indivergeable defaults — the stylesheet and the configuration screen read their defaults from the same preset array, so Reset can never restore a palette the theme does not actually ship.

·       Instant application — saving bumps Dolibarr's asset revision, so a change is visible on the next reload instead of waiting out the one-hour asset cache.

11. Responsive Design

Cubic is built mobile-first around fluid grids and relative units. There is no fixed-width layout and no horizontal page scroll at any breakpoint.

Breakpoint	Behaviour
Above 1400 px	Full grids: 4-segment KPI strip, 4 solid cards, 3 summary tiles
1200 – 1400 px	KPI grids fold to two columns
760 – 1200 px	Panels stack to a single column; charts keep their aspect
Below 760 px	Sidebar becomes an off-canvas drawer with a backdrop; the top bar spans the full width; the inline search is hidden; the native block scrolls horizontally so the user menu and sign-out stay reachable

 

 

12. Dark Mode

Dark mode is a genuine second surface set, not the light palette tinted. Every demo defines its own dark canvas, card, border and text tokens, because a saturated orange or red at low opacity turns brown on a navy background and reads as dirty.

·       Toggled from the top bar, applied instantly, remembered per browser

·       Applied before first paint, so there is no white flash on reload

·       A per-demo default can be set by the administrator; the user's own choice always wins afterwards

·       Covers the custom dashboard, every standard Dolibarr page, the native widgets and the sign-in screen

·       Hard-coded core colours are retinted so lists, calendars and info boxes stay legible

13. Technical Architecture

Cubic is a theme-module. A plain CSS theme cannot rebuild the application structure, so Cubic registers four things through the standard Dolibarr module descriptor:

·       Assets — module_parts injects the dynamic stylesheet and script on every page.

·       Menu manager — MAIN_MENU_*_FORCED points at cubic_menu.php, which fills its tree from Dolibarr's own print_eldy_menu, so all modules and permissions keep working.

·       Hooks — main redirects the home page to the Cubic dashboard; addHtmlHeader stamps the pre-paint state; toprightmenu renders the top-bar action icons with live counters.

·       Configuration page — admin/setup.php, registered through config_page_url.

The heart of the theme is core/cubic_presets.php — a single source of truth returning the four presets. The stylesheet, the script, the dashboard, the sidebar and the configuration screen all read that one array, which is why a demo switch is total and instantaneous and why no setting can silently become a no-op.

The preview override is remembered in the session rather than read only from the query string. Dolibarr emits the module stylesheet as a plain link element with its own fixed parameters, and there is no supported way to append a custom one; storing the choice in the session is what makes the very next stylesheet request resolve to the same demo, so the preview covers the palette and the sign-in page and not just the markup.

14. Folder Structure

Path	Contents
cubic/core/cubic_presets.php	The four demos and the design-token engine
cubic/core/modules/modCubic.class.php	Module descriptor, install and uninstall
cubic/core/menus/standard/	Sidebar renderer and menu manager
cubic/css/cubic.css.php	Dynamic stylesheet (tokens, core overrides, components, login)
cubic/js/cubic.js.php	Theme toggle, rail fold, mobile drawer, menu filter
cubic/class/actions_cubic.class.php	Hooks
cubic/index.php	The four dashboards
cubic/search.php	Global search results
cubic/admin/setup.php	Configuration screen
cubic/langs/	en_US, fr_FR, es_ES, it_IT, de_DE, nl_NL, pt_BR

 

15. Compatibility

15.1 Browsers

Chrome, Edge, Firefox, Safari and Opera, current and previous major versions, on desktop and mobile. Retina and high-DPI displays are supported: the interface is built from CSS and inline SVG, so it stays sharp at any pixel ratio.

15.2 Dolibarr

Dolibarr 16 and above, validated on 17.0.3, and compatible with versions 20 and 21 and the versions that follow. No file of the Dolibarr core is modified, added to or patched: the theme lives entirely under custom/cubic and is removed by deleting that folder.

 

16. Installation Guide

1.     Sign in to Dolibarr as an administrator.

2.     Open Home, then Setup, then Modules/Applications.

3.     Click “Deploy/install external app/module”.

4.     Upload module_cubic-1.0.zip and confirm.

5.     Find “Cubic” in the Interfaces family and enable it.

6.     The interface switches to Cubic immediately; click the cog to open the theme settings.

7.     Choose your demo, palette and layout, then save.

Manual installation: unzip into custom/ so the files sit at custom/cubic/, then enable the module from the same screen.

To uninstall, disable the module. The forced menu constants are removed and Dolibarr returns to its previous theme; no business data is touched.

17. Customization Guide

·       Change the palette — Configuration, Demo section, Colour palette. Pick one of the nine palettes or choose Custom and set the primary and accent colours.

·       Change the font — Appearance section. Five web fonts plus a system stack; turn the web font off to load no external font at all.

·       Change the shape — Corner radius, base font size, gutter, shadow depth and card borders are each independent.

·       Change the chrome — Sidebar mode and header mode override the demo's own choice; layout mode switches between fluid, boxed, compact and full width.

·       Go further — the presets array in core/cubic_presets.php is plain PHP and documented; adding a fifth demo is a matter of adding one entry.

18. Performance Optimization

·       Two assets — one stylesheet and one script, both generated in PHP and served with a one-hour browser cache; the URLs carry Dolibarr's asset revision, which the theme bumps on save so a change is never hidden behind the cache.

·       No external libraries — no charting library, no icon font beyond the Font Awesome Dolibarr already ships, no CDN request other than the optional Google font, which can be disabled.

·       SVG, not images — every chart, badge and gauge is inline SVG — a few hundred bytes, resolution independent, and themeable through CSS variables.

·       Bounded queries — the dashboard runs a fixed, small set of aggregate queries; lists are capped and card pages are fetched by primary key.

·       Cheap toggles — light/dark and rail fold are a single attribute on the root element, applied before first paint — no reflow, no flash, no round trip.

19. Screenshots

The Screenshots folder contains 80 captures at 3200 x 1980 (16:10, 2x device pixel ratio), 20 per demo, organised as Cubic-Analytics, Cubic-Sales, Cubic-Reports and Cubic-Orders. Each set covers the sign-in page, the dashboard, the theme settings, global search, third parties, a customer card, products, orders, proposals, invoices, an invoice card, payments, the agenda, projects, users, the module manager, dark mode, the collapsed rail, and the tablet and mobile layouts.

The captures were taken against a real Dolibarr instance holding roughly 4 200 third parties, 2 000 invoices, 1 300 proposals and 240 orders, so every figure shown is a genuine aggregate rather than a placeholder.

20. Advantages

·       Four production-ready interfaces in one purchase, switchable in one click

·       A premium look comparable to commercial admin templates, applied to the whole of Dolibarr

·       No core modification: upgrades of Dolibarr remain straightforward

·       Every module you already run keeps its menus, permissions and hooks

·       Genuine dark mode across the entire application, not only the dashboard

·       Live business indicators on the home page instead of an empty landing screen

·       Five languages included

·       Deep configuration without touching a line of code

21. Future Enhancements

·       A drag-and-drop dashboard composer on top of the existing widget zones

·       Per-user demo selection in addition to the instance-wide default

·       Additional demo presets shipped as free updates

·       Import and export of the theme configuration as a single file

·       An extended right-to-left pass covering the native Dolibarr forms

 

Cubic 1.0 — Copyright (C) 2026 DoliResources — https://www.doliresources.com