Define CSS variables for a calendar component

by Patrick Ludewig

HTML

<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2" async defer></script>

<add-to-calendar-button
  name="[Reminder] Test the Add to Calendar Button"
  startDate="2025-06-02"
  startTime="10:15"
  endTime="23:30"
  trigger="click"
  timeZone="America/Los_Angeles"
  location="World Wide Web"
  description="Check out the maybe easiest way to include Add to Calendar Buttons to your web projects:[br]→ [url]https://add-to-calendar-button.com/|Click here![/url]"
  options="'Apple','Google','iCal','Outlook.com','Yahoo'"
  label="Hit me to save!"
  iCalFileName="Reminder-Event"
  listStyle="dropdown"
  hideIconButton
  hideBranding
  hideBackground
  size="2"
  lightMode="dark"
  styleDark="
  --base-font-size-l: 16px;
  --base-font-size-m: 16px;
  --base-font-size-s: 16px;
  --accent-color: #00fca4;
  --wrapper-padding: 0px;
  --buttonslist-gap: 0px;
  --btn-background: transparent;
  --btn-hover-background: transparent;
  --btn-border: transparent;
  --btn-border-radius: 8px;
  --btn-padding-x: 0em;
  --btn-padding-y: 0em;
  --btn-font-weight: normal;
  --btn-text: #00fca4;
  --btn-hover-text: #00fca4;
  --btn-shadow: none;
  --btn-hover-shadow: none;
  --btn-active-shadow: none;
  --list-background: #00000042;
  --list-hover-background: #000;
  --list-text: #fff;
  --list-font-weight: 400;
  --list-hover-text: #00fca4;
  --list-close-background: #e5e5e5;
  --list-close-text: #777;
  --list-border-radius: 8px;
  --list-padding: 0em;
  --list-shadow: rgb(0 0 0 / 50%) 0 4px 13px -2px, rgb(0 0 0 / 60%) 0 2px 4px -1px;
  --list-modal-shadow: rgb(0 0 0 / 50%) 0 4px 30px -3px, rgb(0 0 0 / 30%) 0 2px 8px -2px;
  --input-border-radius: 8px;
  --input-background: #fff;
  --status-active-text: #fff;
  --form-error: #c5372c;
  --form-success: #338a36;
  --modal-text: #000;
  --modal-text-align: center;
  --modal-text-align-rtl: center;
  --modal-background: #f5f5f5;
  --modal-border-radius: 6px;
 ...

CSS

body {background: #16161644;}
#atcb-reference {display:none !important;}
add-to-calendar-button:host {

  --base-font-size-l: 16px;
  --base-font-size-m: 16px;
  --base-font-size-s: 16px;
  --font: arial, helvetica, "Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "EmojiOne Color", "Android Emoji", sans-serif;
  --accent-color: #1e90ff;
  --wrapper-padding: 1px;
  --buttonslist-gap: 5px;
  --btn-background: transparent;
  --btn-hover-background: transparent;
  --btn-border: transparent;
  --btn-border-radius: 6px;
  --btn-padding-x: 0em;
  --btn-padding-y: 0em;
  --btn-font-weight: normal;
  --btn-text: #333;
  --btn-hover-text: #000;
  --btn-shadow: none;
  --btn-hover-shadow: none;
  --btn-active-shadow: none;
  --list-background: #000;
  --list-hover-background: #000;
  --list-text: #fff;
  --list-font-weight: 400;
  --list-hover-text: #fff;
  --list-close-background: #e5e5e5;
  --list-close-text: #777;
  --list-border-radius: 6px;
  --list-padding: .8em;
  --list-shadow: rgb(0 0 0 / 20%) 0 4px 13px -2px, rgb(0 0 0 / 23%) 0 2px 4px -1px;
  --list-modal-shadow: rgb(0 0 0 / 50%) 0 4px 30px -3px, rgb(0 0 0 / 30%) 0 2px 8px -2px;
  --input-border-radius: 6px;
  --input-background: #fff;
  --status-active-text: #fff;
  --form-error: #c5372c;
  --form-success: #338a36;
  --modal-text: #000;
  --modal-text-align: center;
  --modal-text-align-rtl: center;
  --modal-background: #f5f5f5;
  --modal-border-radius: 6px;
  --modal-shadow: drop-shadow(3px 6px 25px rgb(0 0 0 / 65%));
  --modal-btn-bar: #c6c8cd;
  --modal-btn-background: #f5f5f5;
  --modal-btn-secondary-background: #e2e1e6;
  --modal-btn-hover-background: #fff;
  --modal-btn-border: #d2d2d2;
  --modal-btn-font-weight: 600;
  --modal-btn-text: #2e2e2e;
  --modal-btn-hover-text: #161616;
  --modal-btn-secondary-text: #666567;
  --modal-btn-shadow: rgb(0 0 0 / 10%) 0 4px 10px -2px, rgb(0 0 0 / 10%) 0 2px 3px -1px;
 ...