What is the difference between SuiteCRM 7 and SuiteCRM 8 theming?
SuiteCRM 7 draws every screen with one theme, SuiteP, whose colour variants are sub-themes compiled from SCSS and installed through Module Loader. SuiteCRM 8 uses two: an Angular theme for the shell and converted modules, and a renamed SuiteP for classic views. The Angular half needs an extension in extensions/, which Module Loader cannot install.
SuiteCRM 7 and 8 theming side by side
| SuiteCRM 7 | SuiteCRM 8 | |
|---|---|---|
| Themes that draw the screens | SuiteP | The Angular suite8 theme (top bar, side panel, converted modules) and the legacy suite8 theme, which is SuiteP renamed (classic views, Admin, Studio) |
| Stock sub-themes | Dawn, Day, Dusk and Night, plus a Noon folder from 7.12 | Dawn and Noon (legacy theme) |
| Where a custom sub-theme goes | themes/SuiteP/css/<Name>/, registered in custom/themes/SuiteP/themedef.php | public/legacy/custom/themes/suite8/css/<Name>/, registered in public/legacy/custom/themes/suite8/themedef.php |
| Colour setting in Admin | None: colours are compiled from SCSS | None: both themes are compiled from SCSS |
| CSS variables at runtime | No | No: the Angular theme has no :root variables in any release from 8.0.0 to 8.10.2 |
| How a theme installs | Module Loader | Module Loader for the classic views, plus an extension folder in extensions/ and php bin/console cache:clear for the Angular screens |
| What an upgrade replaces | The stock theme files, including the stock sub-theme folders | public/legacy/themes/ and public/dist/, mirrored with delete; public/legacy/custom/ and extensions/ are kept |
| Version check in a package manifest | acceptable_suitecrm_versions from 7.12; 7.10 and 7.11 predate the key | acceptable_suitecrm_versions, matched against the 8.x.y version |
Why SuiteCRM 8 needs two themes
SuiteCRM 8 is a new Angular front end wrapped around the SuiteCRM 7 code, which still runs underneath in public/legacy/. Converted modules are drawn by Angular; everything not yet converted, including Admin and Studio, is drawn by the legacy theme. Brand only one and the other half of the interface stays stock.
Module Loader can only write inside public/legacy/, so it can install the legacy half but never the Angular one. That is why every complete SuiteCRM 8 theme needs one manual step on the server. The SuiteCRM 8 colours guide walks through both halves.
Moving a theme from SuiteCRM 7 to 8
- A SuiteCRM 7 sub-theme does not carry over by itself: SuiteCRM 8's legacy theme has a different name (
suite8) and lives underpublic/legacy/. - The legacy half can reuse most of the same SCSS variables. The Angular half has its own variables and must be compiled separately.
- Plan for the extension step: it needs someone with server access to copy a folder and run one command.
Brandtint builds both versions from the same logo and colours: the SuiteCRM 7 theme and the SuiteCRM 8 theme are separate downloads because they are separate builds.
Questions
Can a SuiteCRM 7 theme be used on SuiteCRM 8?
Not as it is. SuiteCRM 8's legacy theme is SuiteP renamed to suite8 and installed under public/legacy/, and the Angular screens need a separately compiled stylesheet loaded from an extension. A SuiteCRM 7 package covers neither.
Do I need to theme both halves of SuiteCRM 8?
Yes, for a consistent result. The Angular theme draws the top bar, side panel and converted modules, and the legacy theme draws classic record views, Admin and Studio. Theming only one leaves the other in stock colours.
Which is harder to theme, SuiteCRM 7 or 8?
SuiteCRM 8. A SuiteCRM 7 theme is one sub-theme installed through Module Loader. SuiteCRM 8 needs two compiled themes and a server step for the Angular half, because Module Loader cannot write to extensions/.
About the author
Muhammad Ilyas builds Brandtint at Techholds, including the SuiteCRM 7 and SuiteCRM 8 theme packages these guides are written from. Muhammad Ilyas on LinkedIn