1. Executive Summary

Spike is a premium administration theme for Dolibarr ERP/CRM, delivered as a standard Dolibarr module. It replaces the whole back-office chrome — sidebar, top bar, dashboard, lists, forms and cards — with a modern, elegant SaaS interface comparable to the best administration templates on the market, while remaining fully compatible with Dolibarr and requiring no modification of the application core.

The distinguishing feature of Spike is that it ships TWO complete, production-ready interfaces in a single package. Spike Classic offers a wide, labelled sidebar for users who value discoverability; Spike Compact offers a slim icon rail that maximises the working area. Users switch between them instantly from the top bar, with no page reload, no reinstallation and no loss of context. Administrators choose which one is the site default.

Both interfaces support a complete light and dark mode, eight predefined colour palettes plus unlimited custom colours, seven languages, and a responsive layout validated from desktop down to a 390-pixel phone viewport.

Property	Value
Commercial name	Spike
Technical name	theme_spike
Folder name	spike
Package	module_spike-1.0.zip
Version	1.0
Module ID	10000280
Editor	DoliResources — https://www.doliresources.com
Licence	GPL-3.0-or-later
Dolibarr compatibility	16.0 and above (validated on 17.0.3; 20.x / 21.x supported)
PHP floor	7.0
Demos included	2 (Spike Classic, Spike Compact)
Languages	English, French, Spanish, German, Italian, Portuguese (BR), Dutch

 

2. Theme Overview

Spike is built as a theme-MODULE rather than a CSS-only Dolibarr theme. This is a deliberate architectural decision. A CSS-only theme can recolour the stock interface, but it cannot create new DOM: it cannot produce a custom sidebar, a global search bar, a favourites list or a bespoke dashboard. A module can, because it may register its own menu manager, inject stylesheets and scripts on every page, and add hooks — all through public, documented Dolibarr extension points.

The result is a theme that reshapes the entire application rather than repainting it, while leaving every core file untouched. Uninstalling the module returns Dolibarr to its original appearance with no residue.

2.1 Design language

The Spike visual system rests on a small number of consistent decisions:

·       Floating surfaces. The sidebar and the top bar are white rounded cards laid on a soft blue-grey canvas, separated by a gutter, rather than panels welded to the viewport edges.

·       Generous rounding. A single configurable radius token (12 px by default) governs cards, buttons, inputs and chips, so nothing looks borrowed from another system.

·       Restrained shadows. Three elevation levels only, all low-contrast, so depth reads as material rather than decoration.

·       Soft-tinted icon chips. Every icon sits in a rounded chip filled with a 10-12 % tint of its semantic colour, which keeps glyphs legible on both light and dark canvases.

·       One typeface. Plus Jakarta Sans throughout, with tabular figures enabled on numeric elements so KPI columns align.

2.2 Colour system

Role	Token	Light	Dark
Primary	--spike-primary	#0085DB	#0085DB
Secondary / accent	--spike-accent	#46CAEB	#46CAEB
Ink (text)	--spike-text	#2A3547	#E9EDF3
Muted text	--spike-text-2	#5A6A85	#9AA5B4
Canvas	--spike-bg	#EFF4FA	#0B111C
Card surface	--spike-card	#FFFFFF	#141C2A
Border	--spike-border	#DFE5EF	#26303F
Success	--spike-success	#4BD08B	#4BD08B
Warning	--spike-warning	#F8C076	#F8C076
Danger	--spike-danger	#FB977D	#FB977D

 

Every token is declared once in a light block and once in a dark block. Because the theme then maps Dolibarr's own core CSS variables onto these tokens, native pages that Spike has never explicitly styled still follow the palette in both modes automatically.

3. UI/UX Philosophy

·       A single visible surface. Inner containers are made transparent and the parent row or card carries the styling, which avoids the stacked box-in-box look that makes dense ERP screens feel cluttered.

·       Whole-row affordances. Active and hover states cover the entire clickable row — soft primary fill, left accent bar, primary text — not merely the label.

·       Never an empty box. Any dashboard panel whose query returns nothing renders an empty-state (icon, title, one-line explanation, optional call to action) instead of a blank card.

·       Scope-consistent drill-down. A KPI tile links to a list filtered to exactly the same period and status as the tile, so the destination total always matches the figure clicked.

·       Configuration over assumption. Debatable business calculations, such as whether turnover is computed excluding or including tax, are exposed as settings rather than hardcoded.

·       Motion with consent. Animations can be disabled globally, and the theme also honours the operating system's reduced-motion accessibility preference.

4. Spike Classic Demo

Spike Classic is the default interface. It presents a 258-pixel floating sidebar carrying the brand, a module filter field, section captions, labelled navigation entries with accordion sub-menus, a favourites list and a recently-opened list. It suits users who navigate a broad Dolibarr installation and benefit from seeing module names in full.

The layout keeps the working area wide despite the labelled sidebar, because the sidebar can still be folded to a rail on demand from the burger control in the top bar. The fold state is remembered per user and per device.

5. Spike Compact Demo

Spike Compact reduces the sidebar to a 78-pixel icon rail. Section captions remain, centred and reduced, so the rail keeps its structure; module names appear as tooltips on hover. The recovered horizontal space goes to the content, which makes this interface the better fit for wide data tables, production screens and secondary monitors.

Compact is not a separate build: it is the same code path with a different layout declaration, which is why switching is instantaneous and why every screen — lists, cards, forms, settings — is available in both interfaces without duplication.

5.1 Switching between demos

The active demo is resolved in three layers, in this order of precedence:

·       User choice. A click on the demo control in the top bar stores the preference on the user's device and applies it immediately, with no page reload.

·       Administrator default. The Active demo setting on the theme configuration page defines what every user sees until they express a preference of their own.

·       Built-in default. Spike Classic, if neither of the above is set.

The resolution runs in an inline script placed in the document head, before the page is painted. A reload therefore lands directly in the correct interface with no flash of the wrong layout.

6. Dashboard Features

Spike replaces the Dolibarr home page with its own dashboard, reached automatically through a redirect hook rather than by altering the core home file. The dashboard is assembled from live database queries, never from placeholder data.

·       Welcome card. Greets the user by name, names the company and states the data refresh date.

·       KPI tiles. Turnover, unpaid invoices, new customers and orders, each with a period-over-period variation chip, an embedded sparkline, and a two-value breakdown footer.

·       Period selector. Week, month or year; every tile, chart and drill-down link follows the selection.

·       Turnover chart. Twelve-month curve with the previous year overlaid as a dotted reference, and an interactive crosshair showing the value under the pointer.

·       Commercial pipeline. Donut of proposal stages with amounts, from draft through to signed, invoiced and lost.

·       Activity and latest operations panels. Recent events and the most recent documents, each row linking to its record.

·       Native Dolibarr widgets. The standard box system is embedded below the custom panels, so customers keep the widgets they already configured, including the add-widget selector.

Because the dashboard is a normal Dolibarr page rendered through the standard header and footer functions, it inherits permissions, multi-entity scoping and the language of the logged-in user without special handling.

7. Sidebar Features

The sidebar is generated from Dolibarr's native menu tree, not from a hardcoded list. Every module the customer installs — including third-party modules — appears automatically, with its own icon and permissions respected.

·       Two widths. 258-pixel labelled panel or 78-pixel icon rail, per demo and per user.

·       Accordion sub-menus. Group headers expand in place without navigating, and a section only auto-opens when it genuinely contains the active item.

·       Live filter. A search field filters modules and their children as the user types.

·       Favourites. Bookmarked screens are pinned at the top of the navigation, with a one-click add control.

·       Recently opened. The last records visited are listed with a colour-coded type tag and a recency index; the depth is configurable.

·       Unambiguous active state. Each entry carries a level-encoded identifier, so the highlighted item stays correct across pages and across browser tabs.

·       Off-canvas drawer on mobile. Below 760 pixels the sidebar becomes a drawer with a backdrop; the icon rail is deliberately never applied on phones.

8. Topbar Features

·       Global search. Searches customers, invoices, products and more from any screen, with a keyboard shortcut (Ctrl/Cmd + K) and a dedicated results page.

·       Demo switcher. Flips between Spike Classic and Spike Compact instantly.

·       Light/dark toggle. Switches the whole application theme in place.

·       Sidebar control. Folds the rail on desktop and opens the drawer on mobile, from the same button, resolved by viewport.

·       Native controls preserved. The company selector, print view, help, notifications and the user menu remain the standard Dolibarr components, restyled rather than replaced, so no existing functionality is lost.

9. Login Pages

The sign-in screen is themed for each demo and follows the same palette, typography, rounding and elevation as the application behind it. The canvas takes the Spike background, the form becomes a floating white card, inputs adopt the theme's geometry and focus ring, and the submit control becomes a full-width primary button.

Property	Spike Classic	Spike Compact
Card width	420 px	360 px
Corner radius	18 px	12 px
Elevation	Large shadow	Medium shadow
Decorative halos	Two soft tinted circles	None (flat canvas)
Input height	44 px	40 px
Canvas	#EFF4FA	#EFF4FA

 

The login screen runs before a session exists, so the pre-paint script has not yet applied the per-user demo preference and no stored choice can be read. The active demo on this screen is therefore resolved SERVER-side from the Active demo setting: it is the one place in the theme where the administrator's default applies without user arbitration. Below 760 pixels the card goes full-bleed with reduced padding. The underlying authentication flow is Dolibarr's own and is not modified in any way.

Validation note: the two login layouts were verified programmatically in a live installation (canvas colour, card width and radius, input geometry and button colour all resolved to the Spike tokens, and the two demos measurably differ). No login screenshot is included in this package: the validation environment had several competing theme-modules installed side by side, which contaminated the captured background, and shipping such an image would misrepresent the product.

10. Widgets

Spike styles the complete Dolibarr widget catalogue as Spike cards, and adds its own panels. Available widget content includes revenue, expenses, profit, customers, suppliers, products, stock alerts, payments, invoices, orders, activity, agenda, notifications, mini-charts, progress indicators and latest operations. Widgets remain user-selectable and re-orderable through the native mechanism.

11. KPI Cards

A KPI card is composed of an icon chip, a title, a large tabular figure, a period caption, a variation chip coloured by direction, an embedded sparkline and a two-value footer. The whole card is a single click target via a stretched overlay link, and that link carries the same period and status filters as the figure displayed.

12. Charts

Charts are rendered as inline SVG rather than through an external charting library. This keeps the theme free of third-party JavaScript, keeps the payload small, makes charts sharp on Retina displays, and lets them inherit the theme tokens so they follow light and dark mode automatically. Line, area, donut and sparkline forms are provided, with hover crosshairs and value tooltips.

13. Tables

Dolibarr lists are restyled as Spike cards: the responsive wrapper becomes the card, the table itself is made transparent so rounded corners stay clean, filter bars get their own surface, and row separators are re-tinted to the theme border colour — including the hardcoded core separators that the variable system alone cannot reach in dark mode. Tables use a fixed layout inside narrow columns so they shrink instead of forcing the page to scroll horizontally.

14. Forms

Inputs, selects, checkboxes, date pickers and the select2 components used throughout Dolibarr are restyled with the theme's radius, border and focus ring. Particular care is given to select2 dropdowns, whose highlighted option is invisible under a naive palette override; Spike forces a readable highlight and a solid themed surface. Required-field markers, validation colours and disabled states all map to theme tokens.

15. Theme Configuration

Configuration lives on a dedicated page grouped into cards rather than a flat table. Every label, hint and option is translated; nothing is hardcoded.

Group	Setting	Default	Purpose
Demo	Active demo	Spike Classic	Site-wide default interface
Appearance	Predefined palette	Spike (blue)	8 palettes plus Custom
Appearance	Primary colour	#0085DB	Accent, links, active states
Appearance	Accent colour	#46CAEB	Secondary series and chips
Appearance	Ink colour	#2A3547	Headings, KPI figures, labels
Appearance	Success / Danger / Warning	#4BD08B / #FB977D / #F8C076	Semantic colours
Appearance	Corner radius	12 px	Cards, buttons, inputs
Appearance	Font size	14 px	Base type scale
Appearance	Web font	Enabled	Load Plus Jakarta Sans
Appearance	Dark mode by default	Disabled	Default until the user chooses
Appearance	Layout width	Full width	Full width or fixed/boxed
Appearance	Animations	Enabled	Global motion switch
Menu	Sidebar width	258 px	Classic sidebar width
Menu	Hide favourites	Disabled	Show or hide the favourites block
Menu	Hide recently opened	Disabled	Show or hide the recents block
Menu	Recents depth	5	Number of records remembered
Dashboard	Disable custom dashboard	Disabled	Return to the native home page
Dashboard	Hide native widgets	Disabled	Suppress the core box area
Dashboard	Turnover basis	Including tax	Including or excluding tax
Dashboard	Include abandoned	Disabled	Whether abandoned invoices count

 

The reset action is protected by a confirmation dialogue. On demonstration platforms the page is visible to non-administrators so that the feature set can be evaluated, but every write is refused server-side and the save and reset controls are shown disabled.

16. Responsive Design

Device class	Width	Behaviour
Desktop	> 1200 px	Full layout; sidebar labelled or rail per demo
Laptop	992-1200 px	Same layout, tightened gutters
Tablet	760-992 px	Sidebar folds to rail; KPI grid reflows to two columns
Phone	< 760 px	Sidebar becomes an off-canvas drawer; surfaces go full-bleed; cards stack to one column

 

Absence of horizontal overflow is verified programmatically at a 390-pixel viewport in both demos, by comparing the document scroll width against the window inner width.

17. Dark Mode

Dark mode is a genuine second palette, not a filter or an inversion. Every token is redefined for dark, and because Dolibarr's core variables are mapped onto those tokens, native screens the theme has never explicitly styled follow suit. The state is applied by a pre-paint script in the document head, so a reload never flashes the light theme first.

Two classes of problem that a naive dark mode misses are handled explicitly: core rules that use hardcoded hex colours rather than variables, notably the near-white row separator that reads as a harsh line on dark; and native top-bar icons that ship white, which are invisible on a light bar and must be re-tinted.

18. Technical Architecture

Spike is wired through six extension points, all public Dolibarr APIs:

·       Forced menu manager. The module registers its own menu file and declares it as the standard, front and smartphone menu, so the Spike sidebar renders on every screen.

·       Stylesheet and script injection. Both assets are declared in the module manifest and are dynamic PHP files, so they can read configuration and translations at request time.

·       Hooks. A main hook redirects the home page to the Spike dashboard; a header hook injects the pre-paint state script and the print-mode stylesheet.

·       Sidebar rendering. The native menu tree is loaded through the standard menu functions and regrouped into accordions; no menu content is hardcoded.

·       Custom dashboard. A normal page rendered through the standard header and footer, so it receives the forced chrome like any other screen.

·       Native widget area. The standard box area is embedded with the exact container identifiers the core sorting script expects, preserving drag-and-drop ordering.

Assets are cache-busted through Dolibarr's own revision parameter, which is bumped when the module version changes, so an update reaches end users on an ordinary reload.

19. Folder Structure

custom/spike/

·       core/modules/modSpike.class.php — module descriptor: manifest, forced menus, cache-bust

·       core/menus/standard/spike_menu.php — menu manager

·       core/menus/standard/spike.lib.php — sidebar renderer and helpers

·       class/actions_spike.class.php — hooks: home redirect, pre-paint script, print mode

·       class/spike_demo.class.php — optional demonstration data helper

·       css/spike.css.php — design tokens, core variable mapping, all chrome styling

·       js/spike.js.php — demo switch, theme toggle, sidebar behaviour, top bar injection

·       index.php — Spike dashboard

·       search.php — global search results

·       admin/setup.php — configuration page

·       langs/ — seven language files, at strict key parity

20. Browser Compatibility

Browser	Supported versions
Google Chrome / Chromium	Last 3 major versions
Mozilla Firefox	Last 3 major versions
Microsoft Edge	Last 3 major versions
Apple Safari (macOS / iOS)	14 and above
Mobile Chrome / Samsung Internet	Current

 

The theme relies only on widely supported CSS features — custom properties, flexbox, grid and media queries. Retina and high-DPI displays are supported natively because icons and charts are vector rather than bitmap.

21. Dolibarr Compatibility

Spike declares a Dolibarr 16.0 floor and a PHP 7.0 floor, and every core function it calls was verified to exist with an unchanged signature across that range. It has been validated in a live installation on Dolibarr 17.0.3 and is compatible with Dolibarr 20.x, 21.x and later releases. No core file is modified, so Dolibarr upgrades are unaffected.

22. Installation Guide

1.     Sign in to Dolibarr with an administrator account.

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

3.     Choose Deploy/install external app/module and upload module_spike-1.0.zip.

4.     Locate Spike in the Interfaces family and enable it.

5.     Reload the page. The Spike sidebar, top bar and dashboard appear immediately.

6.     Open the module's configuration to choose the default demo, palette and options.

If the sidebar does not appear after the first activation, disable and re-enable the module once: this re-runs the initialisation routine that registers the menu manager. Note that only one theme-module can own the forced menu at a time; disable any other theme-module before enabling Spike.

23. Customization Guide

·       Through the configuration page. Palette, individual colours, radius, font size, sidebar width, layout width, animations and dashboard behaviour, with no coding.

·       Through design tokens. For deeper changes, edit the token block at the top of the stylesheet. Because every rule consumes tokens rather than literal colours, and because Dolibarr's own variables are mapped onto them, a single token change propagates across the custom screens and the native ones, in both light and dark mode.

·       Adding a palette. Add one entry to the palette map in the stylesheet and one option with its translated label in the configuration page and the language files.

Two conventions should be preserved when extending the theme. First, prefix every new CSS class and translation key with the module name: generic keys silently collide with core definitions and with other modules, and the wrong text then renders with no error. Second, keep the configuration defaults identical to the stylesheet defaults, otherwise the reset action restores a palette that is no longer the theme's.

24. Performance Optimization

·       No external JavaScript. No charting library, no UI framework. Charts are inline SVG.

·       Single stylesheet, single script. One request each, both cacheable for one hour and versioned so updates still propagate.

·       Vector assets only. Icons and charts are SVG or icon fonts, so there are no bitmap downloads and no Retina duplicates.

·       Cached expensive counts. Costly aggregate queries are cached in the session rather than recomputed on every page.

·       Optional web font. The web font can be disabled in one click to remove the external font request entirely.

·       Pre-paint state. Layout and theme state are applied before first paint, which removes the reflow and the flash that otherwise follow a reload.

25. Screenshots Description

The delivery includes 32 screenshots captured from a live Dolibarr installation with real data, organised in two folders, Spike-Classic and Spike-Compact, with identical contents so the two interfaces can be compared screen by screen.

File	Content
01_dashboard	Spike dashboard, light mode
02_thirdparties	Customer and prospect list
03_customer_card	Customer record
04_products	Product list
05_orders	Sales order list
06_proposals	Commercial proposal list
07_invoices	Invoice list
08_agenda	Agenda / events
09_projects	Project list
10_users	User list
11_modules	Module administration
12_theme_settings	Spike configuration page
13_global_search	Global search results
14_dashboard_dark	Dashboard in dark mode
15_tablet	Tablet viewport (900 px)
16_mobile	Phone viewport (390 px)

 

26. Advantages

·       Two interfaces, one licence. Classic and Compact ship together and switch instantly.

·       No core modification. Dolibarr upgrades remain safe and uninstalling leaves no residue.

·       Whole-application coverage. Native screens follow the palette in light and dark through the core variable mapping, not only the screens the theme styles by hand.

·       Genuine dark mode. A second palette rather than a filter, applied before first paint.

·       Seven languages at key parity. Every language file carries the same key set, so no locale falls back to raw key names.

·       Configuration without code. Palettes, colours, geometry, typography and dashboard behaviour are all administrative settings.

·       Fast by construction. No external UI or charting dependency; vector assets throughout.

·       Verified, not assumed. Delivered with a documented validation run covering both demos, both colour modes and three viewport classes.

27. Future Enhancements

·       Additional demo layouts, including a horizontal top-navigation variant.

·       Right-to-left layout support for Arabic and Hebrew deployments.

·       Per-user dashboard composition with drag-and-drop widget placement.

·       Import and export of theme settings as a portable profile.

·       Additional role-oriented dashboards (finance, human resources, stock, production).

·       Skeleton loading placeholders on data-heavy screens.

 

Spike — Premium Administration Theme for Dolibarr

Editor: DoliResources  |  https://www.doliresources.com

Copyright (C) 2026 DoliResources. All rights reserved.