Skip to content
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

Open
pokerbeing opened this issue Dec 16, 2023 · 3 comments
Open

Dark mode theme for calendar #109

pokerbeing opened this issue Dec 16, 2023 · 3 comments

Comments

@pokerbeing
Copy link

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)

Datepicker
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
Copy link

sanchimenea commented Dec 18, 2023

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
Copy link
Author

pokerbeing commented Dec 19, 2023 via email

@pokerbeing
Copy link
Author

datepicker_dark

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants