Skip to content

Instantly share code, notes, and snippets.

@seanlinsley
Last active April 18, 2018 19:33
Show Gist options
  • Save seanlinsley/11101640 to your computer and use it in GitHub Desktop.
Save seanlinsley/11101640 to your computer and use it in GitHub Desktop.
Make Active Admin's primary color change between dev/staging/production
// SASS variable overrides must be declared before loading up Active Admin's styles.
//
// To view the variables that Active Admin provides, take a look at
// `app/assets/stylesheets/active_admin/mixins/_variables.css.scss` in the
// Active Admin source.
//
// For example, to change the sidebar width:
// $sidebar-width: 242px;
$primary-color: dynamic_active_admin_color();
// Active Admin's got SASS!
@import "active_admin/mixins";
@import "active_admin/base";
// Overriding any non-variable SASS must be done after the fact.
// For example, to change the default status-tag color:
//
// .status_tag { background: #6090DB; }
module Sass::Script::Functions
def dynamic_active_admin_color
color = case Rails.env
when 'production' then [0x5e, 0x64, 0x69] # grey (default AA)
when 'staging' then [0x45, 0x77, 0x4b] # green
when 'development' then [0x84, 0x4c, 0x62] # red
end
Sass::Script::Color.new color
end
end
@swedishpotato
Copy link

If it is not clear where you put the sass_ext.rb file mentioned above (and it wasn't to me! :), it should go in config/initializers

The other line you add in to the existing file of the same name before the @imports statements.

This is great and HIGHLY recommended - too easy to be working in prod by accident otherwise! :(

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment