Changing colours in Rails Admin

How to change up the 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!


Recent posts View all

Web Dev

Tips For Effectively Managing Part Time Software Developers

Tips that will help you to build a productive software development team and manage it effectively

Ruby

Use to_sql without slashes

Do you hate slashes in your to_sql output? Then this post is for you!