Hi… there are a couple of options available to you. The more specific would be to just change the CSS for that exact element, on mobile only. That looks like this:
@media screen and (max-width: 782px) {
.ics-calendar-month-grid .day {
background: yellow;
}
}
(If you don’t want the named “yellow” color you can change it to hex or rgb or whatever you like.)
Another option would be to update the values for the ICS Calendar CSS color variables. That would change everything that is using “whitesmoke” throughout ICS Calendar to whatever color you want. (The code below applies for all breakpoints, but you could also put this in the media query, to limit it to mobile.)
This is the exact code in ICS Calendar’s CSS file. You can add this code (or just the variables you want to change) to your theme and it will override the values:
.ics-calendar, .r34ics_lightbox {
--r34ics--color--ics-red: #dc143c;
--r34ics--color--ics-purple: #312a85;
--r34ics--color--white: #ffffff;
--r34ics--color--whitesmoke: #f0f3f6;
--r34ics--color--gainsboro: #d9dcdf;
--r34ics--color--darkgray: #a3a8ac;
--r34ics--color--gray: #70787f;
--r34ics--color--dimgray: #60686f;
--r34ics--color--black: #10181f;
--r34ics--color--dodgerblue: dodgerblue;
--r34ics--color--gold: gold;
--r34ics--color--lemonchiffon: lemonchiffon;
--r34ics--color--limegreen: limegreen;
--r34ics--color--orangered: orangered;
--r34ics--color--trans10: rgba(105,105,105,0.1);
--r34ics--color--trans20: rgba(105,105,105,0.2);
--r34ics--color--trans30: rgba(105,105,105,0.3);
--r34ics--color--trans40: rgba(105,105,105,0.4);
--r34ics--color--trans50: rgba(105,105,105,0.5);
--r34ics--color--trans60: rgba(105,105,105,0.6);
--r34ics--color--trans70: rgba(105,105,105,0.7);
--r34ics--color--trans80: rgba(105,105,105,0.8);
--r34ics--color--trans90: rgba(105,105,105,0.9);
}
