Theming
Light / dark / auto themes and full CSS-variable control.
Pick a theme and an accent, or override any CSS variable. One accent color drives the selection, range band, today-ring, primary button, and focus glow.
Select…
Select…
Select…
Select…
<DateTimePicker theme="dark" accentColor="#10b981" radius="16px" />
<DateTimePicker theme="auto" /> {/* follows prefers-color-scheme */}CSS variables
Scope these to .rdt-root or set them globally:
.rdt-root {
--rdt-accent: #2563eb;
--rdt-bg-elevated: #0b1220;
--rdt-fg: #e6edf6;
--rdt-radius: 14px;
--rdt-cell-size: 40px;
}Full list: --rdt-accent, --rdt-accent-contrast, --rdt-bg, --rdt-bg-elevated,
--rdt-fg, --rdt-fg-muted, --rdt-fg-subtle, --rdt-border, --rdt-hover,
--rdt-shadow, --rdt-radius, --rdt-radius-sm, --rdt-cell-size, --rdt-font.
Using a class-based dark mode (like this docs site)? Pass theme="light" | "dark" derived
from your theme provider instead of theme="auto", since auto follows the OS
prefers-color-scheme.