The project is in a healthy, maintained state
A dark color scheme for ActiveAdmin Ruby CMS. This gem provides Sass files that you can include via Sprockets. The dark theme automatically switches on / off with your system’s dark / light mode. You can override that on the browser level if you wish.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Development

~> 13
~> 3
~> 2, >= 2.0.0

Runtime

 Project Readme

Dark color scheme for ActiveAdmin

Gem Version

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.