# Dark color scheme

**URL:** <https://community.elfsight.com/t/dark-color-scheme/155308>\
**Category:** Customization\
**Tags:** event-calendar\
**Created:** [April 19, 2026, 9:19pm UTC](https://community.elfsight.com/t/dark-color-scheme/155308 "2026-04-19T21:19:48Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![user35165](https://avatars.discourse-cdn.com/v4/letter/u/858c86/32.png) [@user35165](https://community.elfsight.com/u/user35165)\
**Post date:** [April 19, 2026, 9:19pm UTC](https://community.elfsight.com/t/dark-color-scheme/155308/1 "2026-04-19T21:19:48Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 20, 2026, 12:24pm UTC](https://community.elfsight.com/t/dark-color-scheme/155308/3 "2026-04-20T12:24:25Z")

</div>

Hi there, @user35165 👋

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

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/1/514dcf564fb91136b720fd82d8a705fbe6fcb45f.png)

  

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

---

<div class="post-metadata">

**Author:** ![user35165](https://avatars.discourse-cdn.com/v4/letter/u/858c86/32.png) [@user35165](https://community.elfsight.com/u/user35165)\
**Post date:** [May 3, 2026, 6:19pm UTC](https://community.elfsight.com/t/dark-color-scheme/155308/4 "2026-05-03T18:19:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [May 4, 2026, 10:39am UTC](https://community.elfsight.com/t/dark-color-scheme/155308/5 "2026-05-04T10:39:12Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![user35165](https://avatars.discourse-cdn.com/v4/letter/u/858c86/32.png) [@user35165](https://community.elfsight.com/u/user35165)\
**Post date:** [May 30, 2026, 11:57pm UTC](https://community.elfsight.com/t/dark-color-scheme/155308/6 "2026-05-30T23:57:44Z")

</div>

[Events — Trinity Episcopal Church](https://www.trinitybranford.org/events)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [June 1, 2026, 10:15am UTC](https://community.elfsight.com/t/dark-color-scheme/155308/7 "2026-06-01T10:15:37Z")

</div>

Hi there, @user35165 👋

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?

---

<div class="post-metadata">

**Author:** ![fcweesp.nl](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/fcweesp.nl/32/53570_2.png) [@fcweesp.nl](https://community.elfsight.com/u/fcweesp.nl)\
**Post date:** [June 9, 2026, 11:44am UTC](https://community.elfsight.com/t/dark-color-scheme/155308/8 "2026-06-09T11:44:54Z")

</div>

@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:

```auto
[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:

```auto
[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](https://www.fcweesp.nl/880/trainingsrooster/)** and try switching light and dark mode. Let me know what your findings are!

---

<div class="post-metadata">

**Author:** ![fcweesp.nl](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/fcweesp.nl/32/53570_2.png) [@fcweesp.nl](https://community.elfsight.com/u/fcweesp.nl)\
**Post date:** [June 9, 2026, 12:22pm UTC](https://community.elfsight.com/t/dark-color-scheme/155308/9 "2026-06-09T12:22:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [June 9, 2026, 12:27pm UTC](https://community.elfsight.com/t/dark-color-scheme/155308/10 "2026-06-09T12:27:58Z")

</div>

Hi there, @fcweesp.nl 👋

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

```auto
.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 🙂

---

<div class="post-metadata">

**Author:** ![fcweesp.nl](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/fcweesp.nl/32/53570_2.png) [@fcweesp.nl](https://community.elfsight.com/u/fcweesp.nl)\
**Post date:** [June 9, 2026, 12:40pm UTC](https://community.elfsight.com/t/dark-color-scheme/155308/11 "2026-06-09T12:40:55Z")

</div>

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](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/b/b/bb232781ffe95b60f979a5aead219e3021459091.png)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/d/f/dfa8b83b8f8ca4c6ddcdcef671aae1956f32ac36.png)

Thanks so much!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [June 9, 2026, 12:49pm UTC](https://community.elfsight.com/t/dark-color-scheme/155308/12 "2026-06-09T12:49:32Z")

</div>

Sorry for the oversight!

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

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

```

---

<div class="post-metadata">

**Author:** ![fcweesp.nl](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/fcweesp.nl/32/53570_2.png) [@fcweesp.nl](https://community.elfsight.com/u/fcweesp.nl)\
**Post date:** [June 9, 2026, 1:19pm UTC](https://community.elfsight.com/t/dark-color-scheme/155308/13 "2026-06-09T13:19:28Z")

</div>

Perfect! Hope this helps others too. Example can be soon on **[fcweesp.nl](https://www.fcweesp.nl/880/trainingsrooster/)**

---

<div class="post-metadata">

**Author:** ![user35165](https://avatars.discourse-cdn.com/v4/letter/u/858c86/32.png) [@user35165](https://community.elfsight.com/u/user35165)\
**Post date:** [June 9, 2026, 10:47pm UTC](https://community.elfsight.com/t/dark-color-scheme/155308/14 "2026-06-09T22:47:33Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [June 10, 2026, 10:37am UTC](https://community.elfsight.com/t/dark-color-scheme/155308/15 "2026-06-10T10:37:47Z")

</div>

Hi there, @user35165 👋

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