Dark color scheme for ActiveAdmin

Installation

Add this line to your application's Gemfile:

gem "activeadmin_dark_color_scheme"

Import our Sass file “activeadmin-dark-color-scheme” in your CSS entrypoint that compiles ActiveAdmin CSS files:

// app/assets/stylesheets/active_admin.sass

// Your regular ActiveAdmin files
@import "active_admin/mixins"
@import "active_admin/base"

// Dark scheme
@import "activeadmin-dark-color-scheme"

Customization

All Sass variables we use have !default:

$link-color-1: hsl(210, 70%, 73%) !default

which means you can override them just by declaring your own Sass variable somewhere before.

You could technically do it right in your entrypoint:

// app/assets/stylesheets/active_admin.sass

// Your regular ActiveAdmin files
@import "active_admin/mixins"
@import "active_admin/base"

// Dark scheme
$link-color-1: crimson
@import "activeadmin-dark-color-scheme"

Or you could put your variables in a separate file and @import it.

How it works

You import additional CSS, all of which is scoped under @media (prefers-color-scheme: dark) media declaration that matches your system (or browser) color scheme setting.

Here is an example from _table-index.sass:

@media (prefers-color-scheme: dark)

  table.index_table
    th
      background-color: $panel-bg-color-solid
      background-image: $panel-head-gradient
      border-top-color:    $th-border-color-top
      border-right-color:  $th-border-color-right !important
      border-bottom-color: $th-border-color-bottom
      border-left-color:   $th-border-color-left
      box-shadow: none
      color: hsl(0, 0%, 95%)
      text-shadow: none

ActiveAdmin version compatibility

The current version of ActiveAdmin is 2.13.1. Our styles are and will be targeted on the latest version.

How to disable

Switch to light color scheme in you system preferences or your browser developer tools.