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
- Component spacing: padding and gap values read from the components the theme styles
- Border styles: radius values, border colors, shadow patterns
- Border and shadow: radius, width and colour values used by theme controls
How it works
The detector parses the theme's compiled CSS, resolves variables and custom properties, and persists what it finds. Results are cached per request and refreshed on the schedule you configure. Modules then reference those values through CSS custom properties, so a button in our module can take the same border-radius, font-size and colour as the theme's own.
Used by 32 modules
Participating modules with front-end output reference the shared variables, so their UI takes its cues from the active theme rather than from hard-coded values.
The numbers
- 7,615 lines of runtime CSS parsing and detection code
- 32 modules referencing the detected tokens
- Cached and persisted: detection is not repeated on every request
- Documented themes: Classic and Hummingbird
← Back to Our Technology Stack