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

ATTENTION:

All the other answers here are for versions of Strapi BELOW 4.x.

The Strapi 4.x documentation is still being worked on, but Strapi 4.x makes customizing anything in the admin tool super easy! Check it out...

Just rename src/admin/app.example.js to src/admin/app.js, or just use my example below. I tried to fill in things you may find useful. Note you can change colors for the dark theme by using the same pattern, just swap out "light" with "dark".

Note: You can replace the favicon and logo as well, just place the files in src/admin/extensions.

Note: Remember to run strapi build to rebuild the strapi admin panel for your changes to take effect! These changes will not auto-reload.

For a complete list of colors you can change, see https://github.com/strapi/design-system/blob/main/packages/strapi-design-system/src/themes/lightTheme/light-colors.ts

import favicon from './extensions/favicon.png'
import logo from './extensions/logo.png'

const config = {
  locales: [
    // 'ar',
    // 'fr',
    // 'cs',
    // 'de',
    // 'dk',
    // 'es',
    // 'he',
    // 'id',
    // 'it',
    // 'ja',
    // 'ko',
    // 'ms',
    // 'nl',
    // 'no',
    // 'pl',
    // 'pt-BR',
    // 'pt',
    // 'ru',
    // 'sk',
    // 'sv',
    // 'th',
    // 'tr',
    // 'uk',
    // 'vi',
    // 'zh-Hans',
    // 'zh',
  ],
  translations: {
    en: {
      'app.components.LeftMenu.navbrand.title': 'What Strapi calls itself (to the right of the logo_'
    }
  },
  menu: {
    logo
  },
  head: {
    favicon
  },
  theme: {
    light: {
      colors: {
        primary100: '#c9ffeb',
        primary200: '#5effc3',
        primary500: '#00f298',
        buttonPrimary500: '#fff298',
        primary600: '#00bd77',
        buttonPrimary600: '#ffbd77',
        primary700: '#008755',
      }
    }
  }
}

const bootstrap = (app) => {
  console.log(app)
}

export default {
  config,
  bootstrap
}

Answer 2

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

Answer 3

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.

Answer 4

@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;
}