Dark color scheme

Ask the Community Customization
1

Our website is capable of detecting the ligth or dark colors, but the the Event calendar will always show with the same color regardless of the scheme.

3

Hi there, @user35165 :waving_hand:

You can manually adjust the widget’s appearance on the Style tab (from background to detailed customization of the event popup elements):

image
image329×453 6.65 KB


Does it cover your needs, or did you want the widget’s theme to automatically change based on your website’s theme?

4

I would like the Widget’s theme to automatically change.

5

Got it, thanks!

Could you please send me a link to the page, where your widget is installed? I’ll be happy to check if it’s feasible :slightly_smiling_face:

6

Events — Trinity Episcopal Church

7

Hi there, @user35165 :waving_hand:

Thanks for sharing the link! Just to confirm, are you referring to the internal theme control rather than the option that lets website visitors switch themes?

8

@Max, I’m running into the same issue!

To clarify, with my AI Chatbot I have implemented light-dark CSS on the Elfsight side of things which is picked up by the color scheme setting of my website automatically:

[class*=ButtonBase__ButtonContainer-sc] {
  color: light-dark(#132c71, #ffffff) !important;
}

But when I try a similar thing with the Event Calendar it is not being picked up by my website. For instance:

[class*="EventCalendar__Title-sc"] {
  color: light-dark(#132c71, #ffffff) !important;
}

The code above doesn’t toggle colors in light and dark mode. As you can see on the backend I’ve added the light-dark in several places in my Event Calendar and it doesn’t switch anywhere.

It doesn’t make sense to me as it does work for the AI Chatbot.

Check out my Event Calendar at fcweesp.nl and try switching light and dark mode. Let me know what your findings are!

9

Not sure if it was you or me but it is working now! I haven’t made any changes to the CSS since my post so either you guys changed something on your end or it just took a while to get through?

Interesting.

10

Hi there, @fcweesp.nl :waving_hand:

Yep, our devs fixed the issue with this code added to the Custom CSS field:

.eapp-events-calendar-events-calendar-title,
.eapp-events-calendar-date-element-item,
.eapp-events-calendar-filters-container .es-filter-button-button {
  color: light-dark(#132c71, #fff) !important;
}

.eapp-events-calendar-filters-container .es-filter-button-button {
  border-color: light-dark(#132c71, #fff) !important;
}

If you have any questions left or any assistance is needed, I’ll be happy to help :slightly_smiling_face:

11

Thanks! What a great feature!

The only thing they’ve left out is also changing the color of the svg down arrow. See images below. Any change those can be added too?

image
image230×127 1.77 KB

image
image232×125 1.4 KB

Thanks so much!

12

Sorry for the oversight!

I’ve added one more CSS snippet and it’s working fine now :slightly_smiling_face:

.es-filter-button-slot {
  fill: light-dark(#132c71, #fff) !important;
}
13

Perfect! Hope this helps others too. Example can be soon on fcweesp.nl

14

Yes, Let say the iPhone is i dark mode because is in the Dark Theme, or when PC changes to Dark mode after sunset.

15

Hi there, @user35165 :waving_hand:

I’ve just tried to use the dark and light themes on desktop and iPhone (both device and browser setting) and don’t see ane difference in the website theme. Could you please describe it in more details:

  • share a screenshot of the setting where you switch themes

  • share a screenshot of the website theme changes after switching dark/light modes