How to enable dark mode on the embeddable calendar

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:

• light mode (default theme)
• dark mode
• 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 to, and then click the "Calendar page" option.
2. On the calendar page, scroll down to the "Embeddable calendar" section. Click the white "Custom template" button on the right-hand side, underneath the "Custom embeddable calendar" heading.
3. On the embeddable calendar templates page, click the blue "New template" button.
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 that you want to use for your embeddable calendar.
6. Give your new custom template a name, and click the blue "Create" page 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 the blue "Set" button.
8. To preview your theme, click the "Quick customize" button on the embeddable calendar tile.

Always light theme

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

• Note: The "always light mode" theme is the same as the current default theme.

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