Zaptime Theme

interface ZaptimeTheme {
  mode?: "light" | "dark";
  preset?: "basic" | "elegant" | "playful";
  borderRadius?: string; // CSS length or "full"
  colors?: {
    white?: string;
    black?: string;
    "25"?: string;
    "50"?: string;
    "100"?: string;
    "200"?: string;
    "300"?: string;
    "400"?: string;
    "500"?: string;
    "600"?: string;
    "700"?: string;
    "800"?: string;
    "900"?: string;
    accentLight?: string;
    accentBase?: string;
    accentDark?: string;
  };
}

Key	Description
mode	"light" or "dark". Anything but "light" renders dark in the Vue component. In the script-tag modal, an unset mode follows the system preference.
preset	Name of the dashboard preset. Visual differences are expressed through the colors below.
borderRadius	Any CSS length, or "full" (24px in the Vue component).
colors["25"] … colors["900"]	Gray scale, 25 lightest. Dark mode uses the same scale inverted, with 900 as the background. Provide the whole scale when you change one end, otherwise contrast breaks.
colors.accentLight / accentBase / accentDark	Accent shades for selected states, buttons and focus rings.

CSS variables

The Vue component sets these on #zaptime-calendar. Override them in your own CSS when a token is not exposed through the config.

#zaptime-calendar {
  --c-zaptime-25: #f8fafc;
  --c-zaptime-50: #f8fafc;
  --c-zaptime-100: #f1f5f9;
  --c-zaptime-200: #e2e8f0;
  --c-zaptime-300: #cbd5e1;
  --c-zaptime-400: #64748b;
  --c-zaptime-500: #475569;
  --c-zaptime-600: #334155;
  --c-zaptime-700: #384250;
  --c-zaptime-800: #1e293b;
  --c-zaptime-900: #020617;

  --c-zaptime-accent-light: #2ed3b7;
  --c-zaptime-accent-base: #15b79e;
  --c-zaptime-accent-dark: #0e9384;

  --radius-zaptime: 0.375rem;
}

Values shown are the defaults. See the customization guide.