From e77899f43e97b8e5ce868bbdb3e4ca33aa830127 Mon Sep 17 00:00:00 2001 From: Igor Fedoronchuk Date: Tue, 13 Oct 2026 13:34:52 +0200 Subject: [PATCH] Theme the companion datetimepicker via --aa-datetimepicker-* bridge vars Feed active_admin_datetimepicker's --aa-datetimepicker-* inputs from the theme palette on :root, so when both plugins are used the xdsoft picker is themed in light and dark with no per-app overrides. The bridge points at the --aa-* vars (redefined per mode), so one set covers both; it is an inert no-op when the datetimepicker plugin is absent. --- .../stylesheets/wigu/active_admin_theme.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/app/assets/stylesheets/wigu/active_admin_theme.scss b/app/assets/stylesheets/wigu/active_admin_theme.scss index d6194dc..d7e09d0 100644 --- a/app/assets/stylesheets/wigu/active_admin_theme.scss +++ b/app/assets/stylesheets/wigu/active_admin_theme.scss @@ -214,6 +214,20 @@ $skinStatusTagErrorColor: #ce483b!default; // error / errored / red --aa-active-tab-text: #{$skinActiveTabTextColor}; --aa-inactive-tab-text: #{$skinInactiveTabTextColor}; --aa-delete-link: #{$skinDeleteLinkColor}; + + // Bridge for the companion active_admin_datetimepicker plugin: feed its + // --aa-datetimepicker-* inputs from this theme's palette, so the xdsoft picker + // is themed (light + dark) automatically with no per-app override. These point + // at the --aa-* vars, which are themselves redefined per mode, so a single set + // here covers both. Harmless no-op when the plugin isn't installed (nothing + // reads these). A host can still override any of them downstream. + --aa-datetimepicker-accent: var(--aa-accent); + --aa-datetimepicker-surface: var(--aa-surface); + --aa-datetimepicker-surface-2: var(--aa-surface-2); + --aa-datetimepicker-text: var(--aa-text); + --aa-datetimepicker-text-muted: var(--aa-text-muted); + --aa-datetimepicker-border: var(--aa-border); + --aa-datetimepicker-hover: var(--aa-surface-hover); } // OS preference, unless the user explicitly chose light @media (prefers-color-scheme: dark) {