Task calendar selector adapting to your theme (CSS snipet)

[William-A-A]

Hello Guys,
I've been bugged for a bit by the calendar picker, it's SO good and I use it a lot, but it was a bit hugly in white on my dark theme obsidian. :

So I did a Css snipet that anybody can reuse if needed, now the calendar adapts to the theme colors (works on my side with minimal, theme, dark or white) .

Hoping that it helps some of you ^^.

Here is it snippet :

/* Flatpickr calendar adapts to current Obsidian theme */

.flatpickr-calendar {
  background-color: var(--background-primary) !important;
  color: var(--text-normal) !important;
  border: 1px solid var(--background-modifier-border) !important;
  box-shadow: 0 2px 8px var(--background-modifier-box-shadow) !important;
}

/* Day cells */
.flatpickr-day {
  background-color: var(--background-secondary) !important;
  color: var(--text-normal) !important;
}

/* Today highlight */
.flatpickr-day.today {
  background-color: var(--background-modifier-accent) !important;
  color: var(--text-on-accent) !important;
}

/* Hover + focus */
.flatpickr-day:hover,
.flatpickr-day:focus {
  background-color: var(--interactive-accent-hover) !important;
  color: var(--text-on-accent) !important;
}

/* Weekday headers + month bar */
.flatpickr-month,
.flatpickr-weekday {
  background-color: var(--background-primary) !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--background-modifier-border) !important;
}

/* Year input */
.flatpickr-current-month input.cur-year {
  background-color: transparent !important;
  color: var(--text-normal) !important;
  border: none !important;
}

/* Navigation arrows (left/right) */
.flatpickr-prev-month,
.flatpickr-next-month {
  color: var(--text-normal) !important;
  fill: var(--text-normal) !important;
  stroke: var(--text-normal) !important;
  opacity: 1 !important;
}

/* Fix arrow visibility inside SVG */
.flatpickr-prev-month svg,
.flatpickr-next-month svg {
  stroke: var(--text-normal) !important;
  fill: none !important;
}

/* Dropdowns (months list on click) */
.flatpickr-monthDropdown-months,
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: var(--background-secondary) !important;
  color: var(--text-normal) !important;
  border: 1px solid var(--background-modifier-border) !important;
}

[claremacrae]

Thank you.