Strapi.js: How to Customize the Theme Color

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:

  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

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 !

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store