Change text color of days of week, dates, and "search"

Ask the Community Customization
1

Hello!

To meet accessibility guidelines, I need to make the days of the week, “search,” and the current month’s dates black. I also need to set the dates outside the month (for instance, the 28, 29, and 30 in the screenshot below) to #6A6A6A.

image
image2196×484 26.2 KB

3

There is no accessibility requirement for a specific color text, only that there be a minimum contrast ratio between text color and background color of 4.5:1. That said, the widget elements you note in your screenshot do fail that requirement. Dark red (#006600), dark green (#00660), dark blue (#000066), or even charcoal (#666666) meet the requirement however, as does black. Would one of those colors better match your site palette, or is there a reason you need pure black (#000000) and gray (#6a6a6a)?

The reason I ask is because it looks like you are using the ‘Outline’ theme, which already uses accessible colors except for the non-current month (28, 29, and 30 in your example).

4

Hi there, @lilykgamble :waving_hand:

Sure, here is the CSS code to change the color of the Search field:

.es-search-container {
  border-color: black!important;
}

.es-search-slot {
  opacity: 1!important;
}

[class*="TextControlBase__TextControlBasePlaceholder"] {
 color: black!important;
}

This code will help you change the color of the days of the week:

.eapp-events-calendar-week-header-week {
  color: black;
}

As for the past dates, I’ve passed your request to the devs and will let you know once the solution is ready :slightly_smiling_face:

5

Hi @lilykgamble :waving_hand:

To customize the days from the previous month, please use the CSS code below:

.fc-day-other {
  background: lightcyan;
}

.fc-day-other .fc-daygrid-day-number {
  color: #6A6A6A !important;
}

.fc-day-other .fc-daygrid-day-top {
  opacity: 1 !important;
}