Custom colors for AdminLTE

There is some information about using different colors for the AdminLTE dashboard, but this is either too old (still uses Grunt and LESS files) or there's not enough information for someone who is not experienced in running the NPM scripts. So below are the steps to build the AdminLTE CSS with custom colors for the primary, seconday etc. classes.

First generate your color palette. I use https://coolors.co/ for this by uploading an image with the company colors and let the app generate a palette for me.

Then go to the root of your AdminLTE directory and install the NPM packages. Note: when doing this for AdminLTE 3.2.0 I got an error about a wrong version of bootstrap-switch. To solve this error, I had to update the version of bootstrap-switch to the most recent version 3.4.0 in the package.json file.

npm install

Now open the build/scss/_bootstrap-variables.scss file and edit the colors to your need.

At last build the new AdminLTE CSS file:

npm run css

Now the new AdminLTE CSS file will be in the dist directory.

Tag: , | Category: