How to config

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

// src/admin/app.js
const 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:

1. Primary color primary
2. 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.

Michael Edelstone

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 !