Loading...
 
Skip to main content

Datepicker colors aren't affected by theme or color mode

  • Tracker item actions
Trackers
Items
Status
Closed
Subject
Datepicker colors aren't affected by theme or color mode
Category
  • Regression
Resolution status
New
Submitted by
Gary Cunningham-Lee
Lastmod by
Gary Cunningham-Lee
Rating
(0)
Description

The datepicker modal in master has its own CSS and doesn't respect the properties of themes or color modes. I tried

Copy to clipboard
[data-bs-theme=dark] {
    .dp__theme_light {
        --dp-background-color: var(--bs-body-bg) !important;
        --dp-text-color: var(--bs-body-color) !important;
     }
}


for example in a theme's _css-variables.scss file had it had no effect. The datepicker's CSS always was used instead.

Similarly, because the datepicker uses different classes, the theme's Bootstrap class properties have no effect. Is there a way to systematically map the datepicker styles to the themes' styles? It seems to be harder to override the datepicker's CSS rules with Tiki CSS rules simply by making the Tiki rules stronger (giving the selector more specificity) the way that jquery-ui rules could be overridden.

Solution
The problem was fixed by adding dp-background-color: var(bs-body-bg) to .dp__theme_light { } in src/js/vue-widgets/datetime-picker/src/custom.scss. Thanks to Merci Jacob for pointing me to this file.
Workaround
Importance
7
Easy to solve?
3
Priority
21
Demonstrate Bug on Tiki 19+
Demonstrate Bug (older Tiki versions)
Ticket ID
8698
Created
Wednesday 02 October, 2024 09:51:12 UTC
by Gary Cunningham-Lee
LastModif
Wednesday 02 October, 2024 13:42:12 UTC


Show PHP error messages