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

Productivity

5 Optimization Tools Every Business Should Be Using in 2023

Here are five different types performance optimization tools you should consider using

Web Dev

Using CSV files with Postgres on Heroku

How we can use CSV files to import and export data to Postgres databases hosted on Heroku.