universal-datetime-picker

Theming

Visual styling comes from universal-datetime-picker/style.css and CSS custom properties prefixed with --ctp-. Light is the default. Dark is available via attribute or prop.

theme prop

Pass theme="light" or theme="dark" on DateTime / DateTimeInput. Use the prop for portaled popovers so they stay dark even when the input sits outside a dark wrapper. DateTimeRange has no theme prop. Wrap it or set variables with CSS instead. 

<DateTimeInput theme="dark" mode="date" onChange={setValue} />

data-ctp-theme

Set data-ctp-theme="dark" on a parent (or the picker root) to apply the dark token set: 

<div data-ctp-theme="dark">
  <DateTime inline mode="time" onChange={setValue} />
</div>

CSS variables

Override on :root, a wrapper, or [data-ctp-theme="dark"]. Light defaults: 

:root {
  --ctp-primary: #7cb342;
  --ctp-surface: #ffffff;
  --ctp-fg: #1f2937;
  --ctp-border: #e5e7eb;
  --ctp-selected-bg: #558b2f;
  --ctp-overlay: rgba(15, 23, 42, 0.45);
  --ctp-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
  --ctp-border-radius: 12px;
  --ctp-width: 320px;
  --ctp-z-index: 1000;
}
Variable Controls
--ctp-primary Brand / accent color
--ctp-surface Panel and input background
--ctp-fg Primary text color
--ctp-border Borders and dividers
--ctp-selected-bg Selected day background
--ctp-overlay Modal backdrop color
--ctp-shadow Popover / panel shadow
--ctp-border-radius Panel corner radius
--ctp-width Calendar panel width
--ctp-z-index Overlay stacking baseline

Related tokens

The stylesheet also defines helpers such as --ctp-primary-dark, --ctp-focus, --ctp-hover-bg, --ctp-range-bg, --ctp-selected-fg, and --ctp-danger. Override those when you need finer control.

Dark via CSS only

[data-ctp-theme="dark"] {
  --ctp-primary: #9ccc65;
  --ctp-surface: #1f2937;
  --ctp-fg: #f3f4f6;
  --ctp-border: #374151;
  --ctp-selected-bg: #8bc34a;
  --ctp-overlay: rgba(0, 0, 0, 0.6);
  --ctp-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

Accessibility notes

  • Focusable controls use :focus-visible rings via --ctp-focus.
  • Open animation respects prefers-reduced-motion.
  • Keep contrast high when replacing --ctp-fg and --ctp-selected-bg.

Props · Examples · Troubleshooting