Styling and theming

Every visual decision in the picker can be changed, at whichever level suits your project:

1. CSS variables. Colours, sizes, radii and weights, a few lines per brand.
2. classNames. Your own classes on every part and state, for Tailwind, Bootstrap or utility CSS.
3. Plain CSS. Stable dxd-* classes, is-* state classes and ARIA attributes.
4. decorate and icons. Per-day badges, classes and labels; replacement SVGs.
5. Your own UI. @devix-labs/date-picker/core gives you month grids, rules, parsing and presets without any markup.

The Theming demo shows five brands built from variables alone.

Stylesheets#

@import 'tailwindcss';
@import '@devix-labs/date-picker/styles.layer.css';

Variables#

Set them on .dxd (the field wrapper) and .dxd-panel (the calendar). The calendar renders in the browser's top layer, so target it directly rather than relying on inheritance.

.dxd,
.dxd-panel {
  --dxd-accent: #0d6efd;
  --dxd-cell-radius: 6px;
  --dxd-panel-radius: 8px;
}

Size, shape and type

Colour (light defaults, then dark)

Dark mode#

theme: 'auto' is the default, and the picker looks at your page:

1. The nearest theme marker on an ancestor: .dark / .light, data-theme, data-bs-theme, data-mode or data-color-scheme.
2. Otherwise, the actual background colour behind the field, including oklch() values from Tailwind v4.

It re-checks when those attributes change on <html> or <body>, when the OS setting changes, and each time the calendar opens. Force it with theme: 'light' | 'dark', and style dark mode with:

.dxd-panel[data-theme='dark'] {
  --dxd-panel-bg: #0f172a;
  --dxd-border: #1e293b;
  --dxd-hover: #1e293b;
}

Matching popular design systems#

shadcn/ui:

.dxd, .dxd-panel {
  --dxd-panel-bg: var(--popover);
  --dxd-text: var(--popover-foreground);
  --dxd-muted: var(--muted-foreground);
  --dxd-border: var(--border);
  --dxd-hover: var(--accent);
  --dxd-accent: var(--primary);
  --dxd-accent-text: var(--primary-foreground);
  --dxd-band: var(--accent);
  --dxd-cell-radius: calc(var(--radius) - 2px);
  --dxd-panel-radius: var(--radius);
}

Bootstrap 5.3:

.dxd, .dxd-panel {
  --dxd-panel-bg: var(--bs-body-bg);
  --dxd-text: var(--bs-body-color);
  --dxd-muted: var(--bs-secondary-color);
  --dxd-border: var(--bs-border-color);
  --dxd-accent: var(--bs-primary);
  --dxd-band: rgba(var(--bs-primary-rgb), 0.12);
  --dxd-cell-radius: var(--bs-border-radius);
  --dxd-panel-radius: var(--bs-border-radius-lg);
}

Give the input Bootstrap's own form-control class too. The picker's dxd-input class only sets its width, height and the space the toggle button needs.

Stripe-like:

.dxd, .dxd-panel { --dxd-accent: #635bff; --dxd-band: #efeeff; --dxd-panel-radius: 8px; --dxd-cell: 34px; }

Tailwind classes on every part#

createDateRangePicker(input, {
  classNames: {
    panel: 'rounded-xl shadow-xl ring-1 ring-black/5',
    title: 'font-semibold',
    daySelected: 'font-semibold',
    dayInRange: 'text-indigo-900 dark:text-indigo-100',
    preset: 'rounded-md',
    presetActive: 'bg-indigo-50 text-indigo-700',
    actionPrimary: 'bg-indigo-600',
  },
});

Parts:

• Field: root, input, toggle, panel
• Header: header, title, nav
• Grid: months, month, monthTitle, grid, weekday, day
• Day states: daySelected, dayToday, dayDisabled, dayInRange, dayRangeStart, dayRangeEnd
• Footer and presets: footer, summary, action, actionPrimary, presets, preset, presetActive
• Month and year views: pick

State classes stay in sync while the pointer previews a range.

Classes and states#

For anything else — holidays, weekends in your business's calendar, booked days — add a class with decorate:

.dxd-day.is-holiday .dxd-num { color: #dc2626; }

createDatePicker(input, { decorate: (iso) => holidays.has(iso) && { className: 'is-holiday', label: 'Public holiday' } });

Icons#

createDatePicker(input, {
  icons: {
    calendar: '<svg viewBox="0 0 24 24">…</svg>', // the button in the field
    previous: '<svg viewBox="0 0 24 24">…</svg>',
    next: '<svg viewBox="0 0 24 24">…</svg>',
  },
});

In right-to-left pages the previous and next icons swap sides automatically.

Density#

The defaults are compact. For a roomier layout:

.dxd, .dxd-panel {
  --dxd-height: 44px;
  --dxd-font-size: 16px;
  --dxd-cell: 40px;
  --dxd-day-font-size: 14px;
  --dxd-panel-padding: 12px;
}

Layout#

• Side-by-side months: months: 2 or 3. When the window is too narrow the picker shows fewer, and presets move above the grid before that happens.
• Phones: a bottom sheet with thumb-sized days on touch screens. Use sheet: false or true to force either way.
• Position: the calendar opens below the field, or above when there's more room there, and never leaves the screen.

Your own UI (headless)#

import { monthGrid, getCalendar, compileRules, parseDate, PRESETS } from '@devix-labs/date-picker/core';

const grid = monthGrid(getCalendar('gregory'), 2026, 9, 1); // six weeks of { day, label, outside }

Everything the widget knows — calendars, week starts, rules, typed dates, presets, comparison periods — works without its markup, so you can render the calendar with your own components.