[feature] [request] Support for bootstrap's dark mode #159
Comments
|
I changed the as following, until it worked for me, you'll probably need to change a little bit more since there are still hardcoded colors in css files. For my modifications, I used bootstrap css variables to replace hardcoded colors; However, since this component does not exactly follow bootstrap css rules (like button hover, selection, focus) the colors are kind of different. I also added |
|
@BSarmady Thanks for the CSS, currently I'm using Bootstrap v.5.3 so I changed the styles a little bit. import {Datepicker} from "vanillajs-datepicker";
const {locales}: any = Datepicker;
let inputGroups: HTMLElement[] = [];
document.querySelectorAll(`input[data-component="date-picker"]`)
.forEach(input => {
new Datepicker(<HTMLElement> input, {
autohide: true,
language: locales['pt-BR'] ? 'pt-BR' : 'en',
buttonClass: 'btn btn-dark',
clearButton: true,
todayButton: true,
todayButtonMode: 1
}
)
if (input.parentElement?.classList.contains('input-group')) {
inputGroups.push(<HTMLElement>input.parentElement);
}
})
;
for (let i = inputGroups.length - 1; i >= 0; i--){
const span = inputGroups[i].querySelector('span.input-group-text') as HTMLElement;
const input: HTMLInputElement | null =
nextOrPreviousSiblingElement(span, 'input');
if (input) {
span?.addEventListener('click',
() => input.dispatchEvent(new Event('focus')));
}
inputGroups.pop();
}.datepicker {
width: min-content;
&:not(.active) {
display: none;
}
.days {
display: flex;
flex-direction: column;
flex: auto;
}
.days-of-week {
display: flex;
}
.week-numbers {
display: flex;
flex-direction: column;
flex: 0 0 9.6774193548%;
}
.weeks {
display: flex;
flex-direction: column;
align-items: stretch;
flex: auto;
}
span {
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.375rem;
cursor: default;
user-select: none;
}
.dow {
height: 1.5rem;
font-size: 0.9375rem;
font-weight: 700;
}
.week {
flex: auto;
color: #dee2e6;
font-size: 0.875rem;
}
}
.datepicker-dropdown {
position: absolute;
z-index: var(--z-index-date-picker);
padding-top: 4px;
&.datepicker-orient-top {
padding-top: 0;
padding-bottom: 4px;
}
.datepicker-picker {
box-shadow: 0 0.5rem 1rem 4px rgba(0, 0, 0, 0.15);
}
}
.datepicker-picker {
display: flex;
flex-direction: column;
border-radius: 0.375rem;
background-color: var(--bs-secondary-bg);
}
.datepicker-main {
flex: auto;
padding: 2px;
}
.datepicker-footer {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
background-color: var(--bs-secondary-bg);
.datepicker-controls {
.btn {
flex: auto;
margin: calc(0.375rem - 1px) 0.375rem;
border-radius: 0.25rem;
font-size: 0.875rem;
font-weight: bold;
}
}
}
.datepicker-title {
box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.1);
background-color: var(--bs-secondary-bg);
padding: 0.375rem 0.75rem;
text-align: center;
font-weight: 700;
}
.datepicker-controls {
display: flex;
gap: 4px;
.btn {
background-color: var(--bs-btn-bg);
&:hover {
border-color: var(--bs-btn-hover-border-color);
background-color: var(--bs-btn-hover-bg);
color: var(--bs-btn-hover-color);
}
&:focus {
border-color: var(--bs-btn-hover-border-color);
box-shadow: var(--bs-btn-focus-box-shadow);
background-color: var(--bs-btn-hover-bg);
color: var(--bs-btn-hover-color);
}
&:disabled {
border-color: var(--bs-btn-disabled-border-color);
background-color: var(--bs-btn-disabled-bg);
color: var(--bs-btn-disabled-color);
opacity: var(--bs-btn-disabled-opacity);
}
&:not(:disabled):active {
background-color: var(--bs-btn-hover-bg);
color: var(--bs-btn-color);
&:focus {
box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
}
}
}
.view-switch {
flex: auto;
}
}
.datepicker-header {
.datepicker-controls {
padding: 2px 2px 0;
.btn {
border-color: transparent;
font-weight: bold;
}
}
}
.datepicker-controls .prev-button,
.datepicker-controls .next-button {
padding-right: 0.375rem;
padding-left: 0.375rem;
flex: 0 0 14.2857142857%;
}
.datepicker-controls .prev-button.disabled,
.datepicker-controls .next-button.disabled {
visibility: hidden;
}
.datepicker-view, .datepicker-grid {
display: flex;
}
.datepicker-view {
align-items: stretch;
width: 15.75rem;
}
.datepicker-grid {
flex-wrap: wrap;
flex: auto;
}
.datepicker-cell, .datepicker .days .dow {
flex-basis: 14.2857142857%;
}
.datepicker-cell {
height: 2.25rem;
&:not(.day) {
flex-basis: 25%;
height: 4.5rem;
}
&:not(.disabled):hover {
cursor: pointer;
[data-bs-theme=auto] &,
[data-bs-theme=light] & {
background-color: #dedede;
}
[data-bs-theme=dark] & {
background: var(--bs-tertiary-bg);
}
}
&.focused {
&:not(.selected) {
background-color: var(--bs-secondary-bg);
}
}
&.disabled {
color: rgba(33, 37, 41, 0.5);
}
&.highlighted {
&:not(.selected):not(.range):not(.today) {
border-radius: 0;
background-color: var(--bs-secondary-bg);
}
&:not(.selected):not(.range):not(.today):not(.disabled):hover {
background-color: var(--bs-primary-bg-subtle);
}
&:not(.selected):not(.range):not(.today).focused {
background-color: var(--bs-secondary-bg);
}
}
&.today {
&:not(.selected) {
background-color: var(--bs-primary-bg-subtle);
}
&:not(.selected):not(.disabled) {
color: var(--bs-primary-text-emphasis);
}
&.focused {
&:not(.selected) {
background-color: var(--bs-primary-bg-subtle);
}
}
}
&.range-start {
&:not(.range-end) {
border-radius: 0.375rem 0 0 0.375rem;
}
}
&.range-end {
&:not(.range-start) {
border-radius: 0 0.375rem 0.375rem 0;
}
}
&.range {
border-radius: 0;
background-color: #e9ecef;
&:not(.disabled):not(.focused):not(.today):hover {
background-color: var(--bs-primary-bg-subtle);
}
&.disabled {
color: #ced4db;
}
&.focused {
background-color: var(--bs-secondary-color);
}
}
}
.datepicker-cell.selected,
.datepicker-cell.selected:hover {
background-color: var(--bs-primary);
color: #ffffff;
font-weight: 600;
}
.datepicker-cell.prev:not(.disabled),
.datepicker-cell.next:not(.disabled) {
color: #6c757d;
}
.datepicker-cell.prev.selected,
.datepicker-cell.next.selected {
color: #e6e6e6;
}
.datepicker-cell.range-end:not(.selected),
.datepicker-cell.range-start:not(.selected) {
background-color: #6c757d;
color: #ffffff;
}
.datepicker-cell.range-end.focused:not(.selected),
.datepicker-cell.range-start.focused:not(.selected) {
background-color: #69727a;
}
.datepicker-input {
&.in-edit {
border-color: #73acfe;
}
}
.datepicker-input.in-edit:focus,
.datepicker-input.in-edit:active {
box-shadow: 0 0 0.25em 0.25em rgba(115, 172, 254, 0.2);
} |
|
@fercomunello, your CSS looks better, however I think you have missed a few of the colors for background and box shadow. I think there is a box shadow variable in 5.3.1 too which can be replaced. For JavaScript I would go with With
|
|
@BSarmady You're right. In my case it's fine because I don't customized Bootstrap 5 a lot, I see.. 🤔
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Since v5.3 bootstrap now includes a dark color mode, this is what the datepicker looks like when active, it would be great to have support for it
The text was updated successfully, but these errors were encountered: