Dark mode theme for calendar

[pokerbeing]

Is your feature request related to a problem? Please describe. Bootstrap 5.3 now has a global data-bs-theme="dark" attribute. However, if the user invokes this dark-theme, the datepicker calendar is not very legible against the Bootstrap5 standard dark theme color scheme. The gray Year and Month choices don't contrast enough with dark background. (See screenshot)

It would be awesome if the datepicker calendar had a new corresponding dark mode color scheme that was more legible against the Bootstrap5 dark-theme background. Then this style calendar could be triggered by the value of this attribute as either data-bs-theme="dark" or data-bs-theme="light"

Describe the solution you'd like Based upon the attribute value in the tag, the datepicker calendar will:

- no effect - change to a new dark-mode color scheme **Describe alternatives you've considered** None. **Additional context** See attached screenshot with Bootstrap5 in new dark mode.

[sanchimenea]

Adding the following css will make dark mode work.

/* Bootstrap Datepicker Dark mode */

[data-bs-theme=dark] .bootstrap-datetimepicker-widget.dropdown-menu {
    background-color: var(--bs-dropdown-bg)
}

[data-bs-theme=dark] .bootstrap-datetimepicker-widget table td.day:hover,
[data-bs-theme=dark] .bootstrap-datetimepicker-widget table td.hour:hover,
[data-bs-theme=dark] .bootstrap-datetimepicker-widget table td.minute:hover,
[data-bs-theme=dark] .bootstrap-datetimepicker-widget table td.second:hover {
    background: var(--bs-tertiary-bg);
    cursor: pointer
}

[data-bs-theme=dark] .bootstrap-datetimepicker-widget table td span:hover,
[data-bs-theme=dark] .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {
    background: var(--bs-tertiary-bg)
}

[pokerbeing]

Thank you for the quick reply. This is exactly the information I needed!  I made the additional tweak below and I’m very happy with the result. (See pic).  Thanks again.

data-bs-theme=dark] .bootstrap-datetimepicker-widget table tbody{     background-color: #454141;    color: white }

[data-bs-theme=dark] .bootstrap-datetimepicker-widget table thead {    background-color: #777373;    color: white }

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you authored the thread.Message ID: @.***>

[pokerbeing]

Sorry this image didn't come through on my email.