Changing colours in Rails Admin

How to change up the colours in Rails Admin

Let’s face is the default colour scheme in Rails Admin 3 is a horrible shade of blue. If you also don’t like it or would like to add your clients brand colours to their admin panel here’s how to go about it.

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!


Recent posts View all

Mac Productivity

What I use SetApp for

A rundown of the applications I use SetApp for, and why I'm happy to continue using it

Ruby

Changing colours in Rails Admin

How to change up the colours in Rails Admin