--rd-bg
Background of the picker panel, including the fade at the top and bottom of the time columns.
Customization
CSS variables
Every theme color in RollDate Core is a custom property on .RollDate__container. Change one variable — or the whole palette — without forking the stylesheet.
Pick a built-in theme with theme: 'main' | 'dark' | 'light', then override the color tokens on this page. A visual style constructor is planned later; this page is the color reference.
Replace colors
.RollDate__container {
--rd-accent: #10b981;
--rd-accent-strong: #059669;
--rd-accent-dark: #047857;
--rd-accent-muted: rgba(16, 185, 129, 0.18);
--rd-on-accent: #042f2e;
}
Scope
Set variables on .RollDate__container, or on a parent and use a more specific selector (for example .my-brand .RollDate__container) so one page can host several palettes. Theme class tokens are the defaults; your CSS wins when it comes later or is more specific.
Built-in palettes
Live swatches from the compiled theme classes. Hover a chip to see the variable name.
main
dark
light
Token table
Defaults compiled into rolldate.min.css. Override any cell by setting the same variable in your CSS.
| Variable | Role | main | dark | light |
|---|---|---|---|---|
--rd-bg |
Picker panel background | #232830 | #323232 | #ffffff |
--rd-border |
Panel and control borders | #343b48 | #626262 | #d8dde6 |
--rd-text-primary |
Strong text, active labels | #f1f5f9 | #e6e6e6 | #1f2937 |
--rd-text-secondary |
Day numbers, secondary copy | #94a3b8 | #848685 | #5f6b7a |
--rd-text-disabled |
Unavailable dates | #4b5563 | #515252 | #a1aab8 |
--rd-text-disabled-contrast |
Disabled today / current month on a muted fill | #64748b | #a2a2a2 | #8c97a8 |
--rd-header-muted |
Header in year view | #94a3b8 | #848685 | #9aa3b2 |
--rd-weekday |
Weekday column headers | #cbd5e1 | #f7f7f7 | #334155 |
--rd-hover-bg |
Hover surfaces, secondary buttons | #2d3544 | #3e3e3e | #f3f6fb |
--rd-hover-border |
Hover and focus rings | #475569 | #686868 | #ccd5e3 |
--rd-accent |
Today, highlight dots, accent hover | #60a5fa | #609ef1 | #4f8ff7 |
--rd-accent-strong |
Primary buttons, time selection, main today | #2563eb | #368cfd | #2d7cff |
--rd-accent-dark |
Selected-day border | #1d4ed8 | #1e5093 | #1f5dc1 |
--rd-accent-muted |
Soft accent fills, time track | rgba(37, 99, 235, 0.18) | #375985 | #d9e8ff |
--rd-range |
Range endpoint hover | #a78bfa | #a78bfa | #8b5cf6 |
--rd-range-strong |
Range start and end fill | #7c3aed | #7c3aed | #6d28d9 |
--rd-range-muted |
Days inside a selected range | #3d3558 | #3d3558 | #ede9fe |
--rd-button-icon |
Header arrow icons | #cbd5e1 | #fff | #334155 |
--rd-on-accent |
Text and icons on filled accent / range / primary | #fff | #fff | #fff |
--rd-highlight-dot |
Default highlight-dot color; per-date overrides win | defaults to --rd-accent |
||
Surface
--rd-border
Outer panel border and default borders on secondary footer buttons.
--rd-hover-bg
Hover surfaces and the fill of secondary buttons. Dark and light themes also use it for the time viewport and AM/PM track.
--rd-hover-border
Hover ring on days, months, and years. Dark and light themes also use it for time-panel chrome.
Text
--rd-text-primary
Strong labels: active month/year cells, in-range day text, secondary-button labels.
--rd-text-secondary
Default day numbers, month/year cells, time separator, and “+N” extra highlight dots.
--rd-text-disabled
Dates, months, and years that cannot be selected (min/max, allowlist, denylist).
--rd-text-disabled-contrast
Readable text when “today” or the current month/year is disabled and sits on a muted accent fill.
--rd-header-muted
Header month/year controls in year view, when those labels are not interactive.
--rd-weekday
Two-letter weekday headers above the day grid.
--rd-button-icon
Previous/next month chevrons in the header.
--rd-on-accent
Foreground on filled accents: today, current month/year, range start/end, primary footer buttons, and the active AM/PM segment. Change this when your accent is light so the label stays readable.
Accent
--rd-accent
Today’s fill (dark/light), default highlight dots, and several hover fills. Also the default for --rd-highlight-dot.
--rd-accent-strong
Primary footer buttons, the time-column selection ring, active AM/PM, and today’s fill in the main theme.
--rd-accent-dark
Border on a selected day (single or multi). Pair it with --rd-accent-strong so selected and hover states stay in the same family.
--rd-accent-muted
Soft fill behind disabled today/current cells and the time picker track. Use a translucent color on dark themes so the panel background still shows through.
--rd-highlight-dot
Default color for highlight dots. highlightDates / highlightDate() can set a per-dot value inline; that override wins for that day.
Range
--rd-range
Hover fill on the first and last day of a range.
--rd-range-strong
Solid fill for the range start and end. Text on these cells uses --rd-on-accent.
--rd-range-muted
Days between the start and end of a range. Text stays --rd-text-primary.
Example
Same picker, brand greens instead of the default blue. Only CSS variables changed.
--rd-accent override
CSS
.my-brand .RollDate__container {
--rd-accent: #34d399;
--rd-accent-strong: #10b981;
--rd-accent-dark: #047857;
--rd-accent-muted: rgba(16, 185, 129, 0.22);
--rd-on-accent: #042f2e;
--rd-range: #2dd4bf;
--rd-range-strong: #0d9488;
--rd-range-muted: #134e4a;
}