Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sergeypedan/activeadmin-dark-color-scheme
A dark color scheme for ActiveAdmin
https://github.com/sergeypedan/activeadmin-dark-color-scheme
activeadmin color-scheme css dark-mode dark-theme gem rails
Last synced: about 1 month ago
JSON representation
A dark color scheme for ActiveAdmin
- Host: GitHub
- URL: https://github.com/sergeypedan/activeadmin-dark-color-scheme
- Owner: sergeypedan
- License: mit
- Created: 2022-06-09T22:58:43.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-01-23T01:50:00.000Z (11 months ago)
- Last Synced: 2024-04-24T04:29:53.908Z (8 months ago)
- Topics: activeadmin, color-scheme, css, dark-mode, dark-theme, gem, rails
- Language: Sass
- Homepage: https://sergeypedan.ru/open_source_projects/activeadmin-dark-color-scheme
- Size: 59.6 KB
- Stars: 2
- Watchers: 2
- Forks: 2
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Dark color scheme for ActiveAdmin
[](https://badge.fury.io/rb/activeadmin_dark_color_scheme)
## Installation
Add this line to your application's Gemfile:
```ruby
gem "activeadmin_dark_color_scheme"
```
Import our Sass file “activeadmin-dark-color-scheme” in your CSS entrypoint that compiles ActiveAdmin CSS files:
```sass
// 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](https://github.com/sergeypedan/activeadmin-dark-color-scheme/blob/master/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_all.sass) have `!default`:
```sass
$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:
```sass
// 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](https://github.com/sergeypedan/activeadmin-dark-color-scheme/blob/master/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_table-index.sass):
```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.