Help Docs
Contact supportSign in

Enable Dark Mode

AddEvent's embeddable calendar now supports dark mode! This means that it's now easier than ever to customize your embeddable calendar and match your website theme.

There are several options available for setting the dark/light mode on your embeddable calendar:

  1. Light Mode (default theme)
  2. Dark Mode
  3. Auto Dark/Light Mode

📘

The auto dark/light mode automatically switches between dark and light mode based on the browser's theme

How to change the theme of your calendar?

By default, the embeddable calendar uses our existing "Always Light Mode" theme. If you want to update your embeddable calendar to use the "Always Dark Mode" theme or the "Auto Dark/Light Mode" theme, follow the steps below:

  1. On the dashboard, click the three dots next to the calendar name that you want to apply the alternative theme too, and then click the Calendar page option.
  2. On the calendar page, scroll down to the Embeddable calendar section. Click Custom template on the right-hand side, underneath the Custom embeddable calendar heading.
  3. On the embeddable calendar templates page, click +New Template.
  4. In the custom template code, search for the theme stylesheet file. If you have not made edits to the template previously, it is probably located around line 16 in the file and looks something like this https://cdn.addevent.com/libs/cal/css/cal.embed.theme.v20220801.css". (Use Cmd + F on a Mac, or Ctrl + F on a Windows computer to search for the file if you can't spot it).
  5. Replace that link to that stylesheet with one of the stylesheets included at the end of this help doc, based on which theme you want to use for your embeddable calendar.
  6. Give your new custom template a name, and click Create at the bottom of the page.
  7. The last thing to do is to apply your new template to your embeddable calendar. Go back to the calendar page, and scroll down to the Embeddable calendar section again. Click the dropdown that says Standard template, choose the template you just created, and click Set.
  8. To preview your theme, click Quick Customize on the embeddable calendar tile.

📘

Always Light theme (same as the default):

https://cdn.addevent.com/libs/cal/css/cal.embed.theme.v20220801.light.css

📘

Always Dark theme

https://cdn.addevent.com/libs/cal/css/cal.embed.theme.v20220801.dark.css

📘

Automatic Dark/Light theme

https://cdn.addevent.com/libs/cal/css/cal.embed.theme.v20220801.lightdark.css

Updated about 1 year ago