-
-
Notifications
You must be signed in to change notification settings - Fork 63
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Dark mode theme for calendar #109
Comments
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: ***@***.***>
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
The text was updated successfully, but these errors were encountered: