Skip to main content

Theme skins: changing colours in Concrete CMS 9

Concrete CMS 9 · Updated 2026-09-03

Concrete 9 replaced the old per-theme colour settings with skins. Once you know what a skin is, the feature explains itself.

A skin is a compiled stylesheet

Look inside any Concrete 9 theme and you will find css/skins/. Every .css file in that directory is a skin. The filename is the skin's identifier (default.css is the one the site uses unless told otherwise), and by default the core turns the filename into the name you see in the Dashboard. A theme can give its skins better names in getPresetSkins(), which is how Cast's light skin is called Form rather than Default.

A theme with two skins is a theme that compiled its stylesheet twice from two sets of variables.

Switch skins

Pick a skin under Pages & ThemesThemesCustomize. Cast, for example, ships a light skin and a dark skin that are the same stylesheet compiled against two palettes.

From the command line:

./vendor/bin/concrete concrete:theme:activate-skin cured

Custom skins from the customizer

If a theme ships a css/styles.xml, the customizer exposes the variables listed in it as colour pickers and size fields, and lets you save the result as a custom skin. The core compiles your values against the theme's SCSS and stores the output, so you get a new skin without editing a file.

You can change whatever the theme author chose to expose. A theme that exposes four well-chosen variables is more useful than one that exposes forty, because the four will have been checked to work together.

Check contrast when you change colours

A colour picker will let you set body text that fails accessibility guidelines. Hold yourself to 4.5:1 between text and its background for normal text, and 3:1 for large text and for meaningful non-text elements like focus rings. Brand accent colours are the usual casualty: plenty of oranges and yellows that look right on a dark background do not clear 4.5:1 on a light one.

Beyond colours

If you need structural changes rather than colour changes, override the theme's files from your application folder instead of editing the package. Concrete resolves theme files from application/themes/<theme>/ before the package's own copies, so you can replace one template without forking the whole theme.