Strapi.js: How to Customize the Theme Color

2 min readSep 8, 2022

How to config

This customization can be done in the file configuration in your Strapi project

// src/admin/app.jsconst config = {
  locales: [],
  theme: {
    colors: {
      // Only 5 shade for tone
      // Navy Blue
      secondary100: '#ccd5e0',
      secondary200: '#99abc1',
      secondary500: '#335782',
...

Why there is no change?

For this kind of config you MUST run the Strapi in development watching admin mode

yarn develop --watch-admin

How much can you config? Strapi Theme

There are plenty of color here but the main one are:

Primary color primary
Secondary color secondary

and it has ONLY 5 TONES on the accent colors 100,200,500,600,700

Then what you config is just concat ‘tone’ and ‘accent’ i.e.

primary100
primary200
…
secondary100
secondary200
…

For more colors you can visit https://design-system.strapi.io/colors

But most of the time you do not want to change the success or error color, don’t you?

What to do if you don’t have that color

Try out some random online generator as below

Tint and Shade Generator

Easily make tints and shades that match the output of Chrome DevTools, Sass, Less, and PostCSS.

maketintsandshades.com

then generate and pick such tones

Gotchas on Button Color

You might wonder why the color of the button doesn’t change when you changing primary color.

I don’t know too. But adding buttonPrimaryXXX property does the trick !

// src/admin/app.js
...
// Button
buttonPrimary500: '#3373f3',
buttonPrimary600: '#0050f0',
...

Hope this help and see you next time !