Change Primary Color in Strapi?

user_12668573 0
Viewed 2643

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.

strapi css
3 Answers

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

I managed to complete this... however the result is a little hacky.

Override app.js by copying nodemodules/strapu-admin/admin/src/app.js into admin/src

Update the copied app.js to include a custom override CSS file, mine looks like so:

// Third party css library needed
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.min.css";
import "@fortawesome/fontawesome-free/css/all.css";
import "@fortawesome/fontawesome-free/js/all.min.js";

// Custom CSS overrides (this is the new override file)
import "../../admin/src/themes/bootstrap-overrides.css";

Then simply create a new css file in the location above and override the html attributes as required. E.g.

button[color="primary"] {
  background-color: #FC345C !important;
  border-color: #FC345C !important;
}

This solution will obviously require you to keep an eye on app.js when upgrading Strapi, however it was the only solution I could find.

user_71879500

@JJ Setsta 's advice is great. As he himself says however, you need to watch out for the changes of the app.js file. By adjusting his approach and importing the overrides.css and putting it in a file that strapi itself expects to be overwritten by the shadow folder structure (https://strapi.io/documentation/developer-docs/latest/development/admin-customization.html#tutorial-videos) ie. admin/src/config.js we get the desired outcome without a need to worry about updates.

Example:

admin/src/config.js

export const LOGIN_LOGO = null;
export const SHOW_TUTORIALS = true;
export const SETTINGS_BASE_URL = '/settings';
export const STRAPI_UPDATE_NOTIF = true;

import "./themes/override.css";

admin/src/themes/override.css

button[color="primary"] {
  background-color: #FC345C !important;
  border-color: #FC345C !important;
}
user_42820470
Related