Change Primary Color in Strapi?


I would like to change the primary color of Strapi.
I have already tried a few things, for example I was already in the Node_Modules under strapi-admin and looked at all the files there. Unfortunately without success.

I also looked at the following documentation of Strapi:

But somehow nothing helps, maybe someone of you knows better there.

My Strapi runs on a Docker container and I use the "v3.5.1 Community Edtion" of Strapi.


The colors can be found in node_modules\strapi-admin\admin\src\themes\colors.js.

Copy them to admin\src\themes\colors.js to make your changes. Note that Strapi uses variables for setting the colors so you’ll have to find the specific files and update accordingly.

For example: Changing the menu link color would be done in admin\src\components\LeftMenu\LeftMenuLink\A.js

 &.linkActive {
  color: white !important;
  border-left: 0.3rem solid ${props => props.theme.main.colors.mediumBlue};

Note the prop. That’s how Strapi typical set the colors.


The primary color can be updated via the Strapi object found in this same file.

  strapi: {
   'gray-light': '#eff3f6',
   gray: '#535f76',
   'blue-darker': '#18202e',
   'blue-dark': '#151c2e',
    blue: '#0097f7',

Answered By – carlhandy

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published