Open pokerbeing opened 8 months ago
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)
}
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: @.***>
Sorry this image didn't come through on my email.
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)
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.