Active Admin Theme

Active Admin theme makes Active Admin look nice.

Setup

1. Add the css file to your active admin css. Replace URL_HERE with the url from the Files tab.

   # config/initializers/active_admin.rb
   config.register_stylesheet 'URL_HERE'
   

2. Restart your server

3. If necessary, tweak the variables to your liking.

   html {
     --styled-active-admin-body-bg-color: blue;
   }
   

Code

:root {
  --styled-active-admin-body-bg-color: #f6f6f6;
  --styled-active-admin-sidebar-bg-color: #f4542c;
  --styled-active-admin-button-color: #f4542c;
  --styled-active-admin-button-hover-color: #e04923;
  --styled-active-admin-sidebar-text-color: #fff;
  --styled-active-admin-sidebar-active-link-color: #191919;
  --styled-active-admin-sidebar-active-link-bg-color: rgba(255,255,255,1);
  --styled-active-admin-sidebar-link-hover-color: rgba(255,255,255,1);
  --styled-active-admin-sidebar-link-hover-bg-color: transparent;
  --styled-active-admin-border-radius-sm: 5px;
  --styled-active-admin-border-radius-md: 10px;
  --styled-active-admin-form-input-height: 50px;
}

#footer {
  display: none;
}
body {
  background-color: var(--styled-active-admin-body-bg-color);
}
.header .site_title,
.header #tabs {
  background-color: var(--styled-active-admin-sidebar-bg-color);
  color:            var(--styled-active-admin-sidebar-text-color);
}
.header #tabs {
  border-right: none;
  padding: 0 12px;
}
.header #tabs li a,
.header #tabs li.has_nested ul a {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  display: flex;
  align-items: center;
  color: var(--styled-active-admin-sidebar-link-color);
  border-radius: var(--styled-active-admin-border-radius-sm);
}

.header #tabs li a:hover {
  background: var(--styled-active-admin-sidebar-link-hover-bg-color); 
  color:      var(--styled-active-admin-sidebar-link-hover-color); 
}
.header #tabs li.current > a,
.header #tabs li.current > a:hover,
.header #tabs li.has_nested ul a:hover {
  background-color: var(--styled-active-admin-sidebar-active-link-bg-color);
  color:            var(--styled-active-admin-sidebar-active-link-color);
}
.header #tabs li.has_nested ul {
  background-color: unset;
  border-top: unset;
  border-bottom: unset;
  padding: 5px;
}
.header #tabs li.has_nested ul li {
  margin-bottom: 3px;
}

.header #utility_nav {
  display: none;
}
body.active_admin {
  padding-top: 0px !important;
}
.header .site_title {
  text-align: left;
  padding-left: 20px;
  border-bottom: none;
}
#title_bar #titlebar_right .action_item a,
body.index .table_actions .member_link,
input[type="submit"],
body.index .scopes .scope:active a,
body.index .scopes .scope:focus a,
body.index .scopes .scope.selected a,
input[type="checkbox"]:checked {
  background-color: var(--styled-active-admin-button-color);
}
#title_bar #titlebar_right .action_item a:hover,
body.index .table_actions .member_link:hover,
input[type="submit"]:hover {
  background: var(--styled-active-admin-button-hover-color);
}
#active_admin_content {
  display: flex
}
body.index #sidebar {
  position: unset;
}
body.logged_in.edit .input select,
body.logged_in.create .input select,
body.logged_in.update .input select {
  height: var(--styled-active-admin-form-input-height) !important;
  width: 50% !important;
}
body.index #main_content {
  background-color: unset;
  padding: unset;
  box-shadow: unset;
}
.paginated_collection_contents {
  background: #fff;
  border-radius: var(--styled-active-admin-border-radius-sm);
  padding: 10px;
  thead tr,
  tbody tr {
    border: none
  }
}
thead tr {
  background-color:  var(--styled-active-admin-body-bg-color);
  th,
  th a {
    font-weight: bold;
  }
}
.paginated_collection_contents,
.sidebar_section.panel {
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
}
#sidebar .sidebar_section input[type="submit"] {
  height: unset;
}
#login {
  border-top: 0px;
  border-radius:  var(--styled-active-admin-border-radius-md);
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
}
.header #tabs li.has_nested > a:nth-child(1):after {
  color: #fff;
}
.header #tabs li.has_nested.current > a:nth-child(1):after {
  color: #000;
}
.header #tabs li.has_nested ul a {
  padding: 0 15px;
}