Theme Detector — Automatic Theme Adaptation
Parses active theme CSS, resolves Bootstrap variables, detects icon sets, and generates CSS custom properties so modules match any theme automatically.
Modules that match your theme
PrestaShop themes use different CSS frameworks, icon sets, color palettes, and spacing systems. A module styled for Classic looks wrong in Hummingbird. One designed for Hummingbird breaks in Warehouse.
The Theme Detector solves this by parsing the active theme's CSS at runtime, extracting its design tokens, and generating CSS custom properties that modules use for styling.
What it detects
- CSS framework — Bootstrap 4, Bootstrap 5, or custom
- Color palette — primary, secondary, accent, success, danger, warning colors extracted from the theme's CSS
- Typography — font families, sizes, weights, line heights
- Spacing system — padding and margin scales
- Border styles — radius values, border colors, shadow patterns
- Icon set — Font Awesome, Material Icons, or custom icon font
How it works
On the first page load, the detector parses the theme's compiled CSS files, resolves variables and custom properties, and caches the results. Modules then reference these cached values through CSS custom properties — so a button in our module uses the same border-radius, font-size, and color as the theme's native buttons.
Used by 19 modules
Every module with front-end output uses the Theme Detector to ensure its UI blends seamlessly with whatever theme the store is running.
The numbers
- 2,000 lines of CSS parsing and detection code
- 19 modules using automatic theme adaptation
- Cached per request — zero performance overhead after first detection
- Any theme — Classic, Hummingbird, Warehouse, and third-party themes
← Back to Our Technology Stack