Changing colours in Rails Admin

Let’s face it the default colour scheme in Rails Admin 3 is a horrible shade of blue. If you’d like to change it or add your clients brand colours here’s how.

First off you want to override the custom variable file. So in app >> assets >> stylesheets >> rails_admin >> custom you’ll want to create a file called variables.scss this is where you can start changing the CSS colours. Rails Admin uses Bootstrap 5 for styling so you need to use the Bootstrap variable names.

This is how I’ve set up my custom colouring for Rails Admin:

// app/assets/stylesheets/rails_admin/custom/variables.scss

$primary: #d61f69; // Colours nav bar, side links & primary buttons
$info: #fbb6ce; // Colours secondary buttons
$danger: #702459; // Colours part of boolean selector
$warning: #b83280;
$success: #f687b3;


// Force light color for top-nav links
$navbar-dark-color: white;

// Contrast ratio used to calculate color for text within elements (ie. buttons)
// https://getbootstrap.com/docs/5.0/customize/sass/#color-contrast
$min-contrast-ratio: 2;

All the colours selected for $primary etc. colour different bars in the dashboard graph if you have it enabled.

I was helped immensely with this with a search result in GitHub that I have now lost the link for, so to that commenter thank you so much!