Strapi.js: How to Customize the Theme Color

Strapi.js: How to Customize the Theme Color

Web development Jul 14, 2023

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.

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 !

Tags

TeamCMD

We are CODEMONDAY team and provide a variety of content about Business , technology, and Programming. Let's enjoy it with us.