From 71a39aa003b7e473e8c088d5dafcc266a869cb3d Mon Sep 17 00:00:00 2001 From: Igor Fedoronchuk Date: Wed, 7 Oct 2026 14:09:10 +0200 Subject: [PATCH] Add configurable accent color and dark-mode support The vendored XDSoft stylesheet hardcodes a bright blue (#33aaff) on the selected/current day, the current time slot and 'today', with no variable to override it, forcing host apps into !important overrides. Add a gem-owned override (not touching the vendored upstream CSS): - Expose $aa-datetimepicker-accent-color (!default, defaults to the original #33aaff so existing apps are unaffected) applied to the current/selected backgrounds, the 'today' text color and the disabled-current hover variant. - Follow the host dark theme using the same triggers as active_admin_theme (prefers-color-scheme: dark and html[data-theme=dark], with a [data-theme=light] escape) by re-scoping XDSoft's built-in .xdsoft_dark skin onto .xdsoft_datetimepicker. Document both in the README. --- README.md | 28 +++++ .../active_admin_datetimepicker.scss | 119 ++++++++++++++++++ 2 files changed, 147 insertions(+) diff --git a/README.md b/README.md index 8f14043..9cfad58 100644 --- a/README.md +++ b/README.md @@ -118,6 +118,34 @@ ActiveAdminDatetimepicker::Base.format = "%d/%m/%Y %H:%M" # Ruby format See [the datetimepicker documentation for more details](http://xdsoft.net/jqplugins/datetimepicker/). +## Theming + +### Accent color + +The upstream XDSoft stylesheet hardcodes a bright blue (`#33aaff`) on the +selected/current day, the current time slot and "today". This gem exposes that +color as a single SCSS variable so you can recolor the whole picker without +`!important` overrides. Set it **before** importing the gem; the default keeps +the original blue, so existing apps are unaffected: + +```scss +$aa-datetimepicker-accent-color: #38678b; // your brand color +@import "active_admin_datetimepicker"; +``` + +### Dark mode + +The picker follows the host's dark theme using the same triggers as +[`active_admin_theme`](https://github.com/activeadmin-plugins/active_admin_theme): +the OS `prefers-color-scheme: dark` preference and an explicit +`html[data-theme="dark"]`. Under either, the picker adopts XDSoft's built-in +`.xdsoft_dark` skin (its orange current/today, dark surfaces). A page pinned +with `html[data-theme="light"]` always stays light. No configuration is needed; +it works out of the box once the gem's stylesheet is imported. + +Note: in dark mode the current/today cells use XDSoft's built-in dark skin +colors, not `$aa-datetimepicker-accent-color`. + ## Contributing diff --git a/app/assets/stylesheets/active_admin_datetimepicker.scss b/app/assets/stylesheets/active_admin_datetimepicker.scss index b20d7ae..f737414 100644 --- a/app/assets/stylesheets/active_admin_datetimepicker.scss +++ b/app/assets/stylesheets/active_admin_datetimepicker.scss @@ -45,3 +45,122 @@ div.xdsoft_datetimepicker { } } + +// --- Configurable accent color --------------------------------------------- +// Upstream xdsoft hardcodes a bright blue (#33aaff) on the selected/current day, +// the current time slot and "today". There is no vendor variable for it, so host +// apps used to resort to !important overrides. Expose it as a single SCSS +// variable instead: set it before importing this gem to recolor the whole +// picker. The default reproduces the original blue, so existing apps see no +// change unless they opt in. +$aa-datetimepicker-accent-color: #33aaff !default; + +div.xdsoft_datetimepicker { + .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current, + .xdsoft_calendar td.xdsoft_current, + .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current { + background: $aa-datetimepicker-accent-color; + } + + // "today" is a text color, not a fill + .xdsoft_calendar td.xdsoft_today { + color: $aa-datetimepicker-accent-color; + } + + .xdsoft_calendar td.xdsoft_current.xdsoft_disabled:hover, + .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current.xdsoft_disabled:hover { + background: $aa-datetimepicker-accent-color !important; + } +} + + +// --- Dark mode ------------------------------------------------------------- +// Follow the host's dark theme using the same triggers active_admin_theme uses: +// the OS `prefers-color-scheme` preference (unless the page is pinned light) and +// an explicit `html[data-theme="dark"]`. Rather than invent new dark colors we +// reuse xdsoft's own built-in `.xdsoft_dark` skin, re-scoped onto +// `.xdsoft_datetimepicker` directly (the picker is appended to , so it can +// never carry the `.xdsoft_dark` class on its own). A `[data-theme="light"]` +// page always stays light. +@mixin aa-datetimepicker-dark { + .xdsoft_datetimepicker { + box-shadow: 0 5px 15px -5px rgba(255, 255, 255, 0.506); + background: #000; + border-bottom: 1px solid #444; + border-left: 1px solid #333; + border-right: 1px solid #333; + border-top: 1px solid #333; + color: #ccc; + + .xdsoft_timepicker .xdsoft_time_box { + border: 1px solid #333; + border-bottom: 1px solid #222; + } + .xdsoft_timepicker .xdsoft_time_box > div > div { + background: #0a0a0a; + border-top: 1px solid #222; + color: #999; + } + + .xdsoft_label { + background-color: #000; + } + .xdsoft_label > .xdsoft_select { + border: 1px solid #333; + background: #000; + } + .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover { + color: #000; + background: #007fff; + } + .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current { + background: #cc5500; + box-shadow: #b03e00 0 1px 3px 0 inset; + color: #000; + } + + .xdsoft_calendar td, + .xdsoft_calendar th { + background: #0a0a0a; + border: 1px solid #222; + color: #999; + } + .xdsoft_calendar th { + background: #0e0e0e; + color: #666; + } + .xdsoft_calendar td.xdsoft_today { + color: #cc5500; + } + .xdsoft_calendar td.xdsoft_default, + .xdsoft_calendar td.xdsoft_current, + .xdsoft_timepicker .xdsoft_time_box > div > div.xdsoft_current { + background: #cc5500; + box-shadow: #b03e00 0 1px 3px 0 inset; + color: #000; + } + .xdsoft_calendar td:hover, + .xdsoft_timepicker .xdsoft_time_box > div > div:hover { + color: #000 !important; + background: #007fff !important; + } + + .xdsoft_scrollbar > .xdsoft_scroller { + background: #333 !important; + } + + .xdsoft_copyright { + color: #333 !important; + a { color: #111 !important; } + a:hover { color: #555 !important; } + } + } +} + +// OS preference, unless the user explicitly chose light +@media (prefers-color-scheme: dark) { + html:not([data-theme="light"]) { @include aa-datetimepicker-dark; } +} +// Explicit user choice always wins +html[data-theme="dark"] { @include aa-datetimepicker-dark; } +