How to change the colours in SuiteCRM 8 without editing core files

How do you change the colours in SuiteCRM 8?

SuiteCRM 8 has two themes to change: the Angular theme for the top bar, side panel and converted modules, and the legacy suite8 theme for classic views, Admin and Studio. Neither has a colour setting in Admin, so you recompile their SCSS, install the legacy sub-theme under public/legacy/custom/ and load the Angular stylesheet from an extension.

Steps at a glance

1. Find out which layer draws the screen you want to change. The top navigation, side panel and converted list and record views come from the Angular theme. Classic record views, Admin, Studio and Module Builder come from the legacy suite8 theme. Most installs need both changed.
2. Create a legacy sub-theme under public/legacy/custom/. Copy the stock Dawn files from public/legacy/themes/suite8/css/Dawn/ into public/legacy/custom/themes/suite8/css/<YourName>/ and set your colours in its SCSS.
3. Compile the SCSS on a workstation, not on the server. Run npx sass --style=compressed style.scss style.css locally with the stock bootstrap and suitep-base folders beside it, then upload only the compiled style.css.
4. Register the sub-theme and run Quick Repair and Rebuild. Add it to public/legacy/custom/themes/suite8/themedef.php, then run Admin > Repair > Quick Repair and Rebuild.
5. Recompile the Angular theme with your colours. Override the variables in abstracts/_variables.scss after that file is imported and compile the stock Angular theme SCSS to a single stylesheet.
6. Load the Angular stylesheet from an extension. Ship the stylesheet in an extension folder under extensions/ that adds a link tag to the page, then run php bin/console cache:clear from the SuiteCRM root.
7. Hard-refresh and check contrast. Reload with Ctrl-F5 or Cmd-Shift-R and check every text and background pair reaches 4.5:1.

Why SuiteCRM 8 has two sets of colours

SuiteCRM 8 replaced the front end with an Angular application, but it did not convert every screen. As of 8.10 the Angular shell and 21 converted modules are drawn by the new theme, while the record view of 48 of the 69 modules, plus all of Admin, Studio and Module Builder, still run as classic views inside public/legacy/ and are drawn by a renamed copy of SuiteCRM 7's SuiteP theme.

Change one and not the other and the CRM looks half-finished: a branded top bar above a stock-coloured record, or the other way round. A complete SuiteCRM 8 theme changes both.

The folders an upgrade will overwrite

The quickest change, editing a stock stylesheet in place, is the one that disappears. SuiteCRM 8's upgrader keeps custom/ but mirrors public/legacy/themes/ and public/dist/ with delete, so anything you change or add in those folders is gone after the next upgrade.

Changing the legacy views (Admin, Studio, classic records)

The legacy layer is SuiteP under another name, so it themes the way SuiteCRM 7 does: a sub-theme is a folder of SCSS compiled to one style.css. The difference is where it goes. SuiteCRM 8's public/legacy/themes/suite8/css/ holds only two stock sub-themes, Dawn and Noon, and is replaced on upgrade, so your sub-theme belongs in public/legacy/custom/themes/suite8/css/<YourName>/. SuiteCRM serves a sub-theme from custom/ exactly as it would from the core folder.

Start from Dawn's files and override variables in the right place. Bootstrap variables in variables.scss are declared !default and must be set before it is imported; SuiteP's own variables, such as $navbar-bg and $primary-btn-bg, are plain assignments and must be set after it. A variable on the wrong side compiles without an error and changes nothing. The SuiteP sub-theme guide walks through the file layout in detail.

npx sass --style=compressed style.scss style.css

Register the sub-theme in public/legacy/custom/themes/suite8/themedef.php. A custom themedef replaces the core one wholesale, so it must start by requiring the core definition and then add your entry to its sub-theme options. Finish with Admin > Repair > Quick Repair and Rebuild, which clears the compiled theme cache.

Changing the Angular shell (top bar, side panel, converted modules)

This is the harder half. The Angular theme has no runtime theming surface: across every release from 8.0.0 to 8.10.2 it declares no :root custom properties and reads no var(--...), so there is nothing to override with a few lines of CSS. The only lever is recompiling its SCSS with different values.

Its variables live in abstracts/_variables.scss, and almost none are declared !default (only the nine $gray-* entries, and only from 8.10). Overrides therefore have to come after that file is imported. Variable overrides reach roughly nine in ten of the theme's colour declarations; the rest are stock palette values written directly into component partials, including button focus rings written as rgba() triples, and have to be replaced by value.

Do not edit the compiled bundle in public/dist/ or its index.html: both are replaced on every upgrade. SuiteCRM 8 also has no supported hook for adding a stylesheet. The upgrade-safe route is an extension folder under extensions/ that registers a Symfony kernel.response subscriber and adds a <link rel="stylesheet"> for your compiled CSS to the page. The subscriber has to implement EventSubscriberInterface; a kernel.event_listener tag in the extension's own YAML is silently dropped.

A stylesheet-only extension should declare no remoteEntry, so there is no Angular bundle to rebuild. After copying it in, clear Symfony's cache from the SuiteCRM root. This step is not optional: it is what registers the extension and publishes its files.

php bin/console cache:clear

Check the result

• Hard-refresh the browser (Ctrl-F5, or Cmd-Shift-R on a Mac). Browsers cache the old stylesheet aggressively.
• Open a converted module and a classic one (a list view, then a record from a module still on the legacy views, then Admin) and confirm both layers changed.
• Check contrast. Every pair of text and background colour should reach 4.5:1, the WCAG AA level for normal text. Stock themes do not always manage it; see the colour pairs to check.

The shortcut

Everything above is what Brandtint's SuiteCRM 8 theme does for you from a logo: it builds the legacy sub-theme as a Module Loader package that installs under public/legacy/custom/, and the Angular stylesheet as an extension folder for extensions/, with every colour pair already checked for contrast. You can preview it on six SuiteCRM screens for free before you buy anything.