基于ENV变量动态修改ActiveAdmin导航栏颜色的实现问询

步骤1：配置环境变量 #

在你的环境配置文件（比如.env、config/environments/development.rb等）里设置环境变量，示例：

RAILS_ENV_COLOR=blue

可选值设为gray、blue、purple、green，对应你需要的四种颜色。

步骤2：给页面注入环境颜色标识 #

打开config/initializers/active_admin.rb，在ActiveAdmin.setup do |config|代码块中，添加前置动作传递环境变量：

config.before_action do
  @env_color = ENV['RAILS_ENV_COLOR'] || 'gray' # 默认 fallback 到灰色
end

如果是ActiveAdmin 2.0.0版本，直接修改布局模板更稳妥：创建或修改app/views/layouts/active_admin.html.erb，把body标签改成：

<body class="<%= @env_color || 'gray' %>">
  <%= yield %>
</body>

步骤3：编写SCSS样式覆盖默认颜色 #

打开app/assets/stylesheets/active_admin.scss，添加对应颜色的样式：

// 灰色导航栏（默认）
body.gray .active_admin-header {
  background-color: #6c757d;
}

// 蓝色导航栏
body.blue .active_admin-header {
  background-color: #0d6efd;
}

// 紫色导航栏
body.purple .active_admin-header {
  background-color: #6f42c1;
}

// 绿色导航栏
body.green .active_admin-header {
  background-color: #198754;
}

注：ActiveAdmin 2.0.0版本的导航栏类名可能是.navbar，如果上面的选择器不生效，替换成.navbar即可，可通过浏览器开发者工具确认类名。

验证效果 #

重启Rails服务器，切换RAILS_ENV_COLOR的取值，刷新ActiveAdmin页面就能看到导航栏颜色随环境变量变化，全程无需JavaScript。

内容的提问来源于stack exchange，提问作者kmfsousa