Repository navigation
Configurable accent color + dark-mode support for the picker - #92
Merged
Merged
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The vendored XDSoft stylesheet (
app/assets/stylesheets/vendor/jquery.datetimepicker.css) hardcodes a bright blue#33aaffon:.xdsoft_option.xdsoft_current)td.xdsoft_current,.xdsoft_time_box ... .xdsoft_current)td.xdsoft_today, a text color)!important)There is no SCSS variable for it, so consuming apps have had to
!important-override the xdsoft classes just to recolor the picker, and there was no way to make the picker follow a dark theme.Changes
All changes live in the gem's own stylesheet (
app/assets/stylesheets/active_admin_datetimepicker.scss) — the vendored upstream CSS is untouched.1. Configurable accent color
The variable defaults to the original
#33aaff, so existing users see no change. Set it before importing the gem to recolor the selected/current backgrounds, the "today" text color and the disabled-current hover variant in one place.2. Dark mode
The picker now follows the host's dark theme using the same triggers as the sibling
active_admin_themegem: the OSprefers-color-scheme: darkpreference and an explicithtml[data-theme="dark"], with ahtml[data-theme="light"]escape so a pinned-light page stays light.Rather than invent new dark styles, it reuses XDSoft's built-in
.xdsoft_darkskin, re-scoped onto.xdsoft_datetimepickerdirectly (the picker is appended to<body>, so it can never carry the.xdsoft_darkclass on its own).3. README
Documents the new variable and the dark-mode behavior.
Verification
Compiled the stylesheet with
sassc(same compiler the asset pipeline uses), stubbing the two ActiveAdmin variables the file expects — compiles with no error, and the output contains the default blue, the dark-skin colors, and both dark triggers.