Calendar events unreadable in dark mode if the category has a dark color

Dear calendar team,

it’s me again :see_no_evil_monkey: :hatching_chick: I would like to report a behavior that our dark mode users have reported. We use a category calendar and we have 2 subcategories which have a number of events. Now the colors of the subcategory are #470194 (dark purple) and #231F20 (almost black) and they define the background color of the events in the calendar.

The issue is that in dark modes (dracula, solarized dark and WCAG dark) the font color becomes black and that is hard to read on our category colors.

My temporary fix

I created a temporary fix for this issue:

#category-events-calendar .fc-event-container .fc-day-grid-event {
    color: #{dark-light-choose(white, white)};
}

Nevertheless, I was wondering if this is something that could be fixed on your end as well? I understand that in this specific case it is not trivial because the color of the category could also be light (e.g. yellow) and then a black font color would be suitable.

I guess that would be needed is a “smart color adaption”. E.g. depending on the color of the category the font color is either black or white.

It would be lovely if you could let me know if this is something you would consider or if I should go with my temporary fix. :front_facing_baby_chick:

1 Like