Change Primary Color in Strapi?

Question

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: https://strapi.io/documentation/developer-docs/latest/guides/custom-admin.html#introduction

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.

Answer 1

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.

EDIT

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',
  },