Theming — keen_web_daterangepicker

Overview: How CSS Variable Theming Works

set --drp-* vars on the element via class="theme-green" — CSS vars pierce Shadow DOM

✅ Shadow DOM + CSS Variables = Powerful Theming

This component uses :host to define CSS variables inside the shadow DOM. This means:

Variables are accessible to component styles
You can override them from your page CSS
Each instance can have a different theme

/* Your page CSS */
web-daterangepicker.theme-green {
  --drp-accent-color: #10b981;
  --drp-accent-color-hover: #059669;
}

🎬 Shared rich demo: Every calendar picker on this page (Tests 1–7 and the dynamic switcher) renders the same set of demo data — emoji badges for events 🎂 ☕ 🎉 🎤 🎬, disabled holidays 🎄 🥳, dynamic weekend / weekday price badges, and rich HTML tooltips on hover. Open any picker to compare how identical content renders under each theme. Time-picker examples (Test 8) intentionally show no calendar data.

✅ Test 1: Default Theme (Blue)

Uses component's default CSS variables

Select a date range:

✓ If this picker appears with blue accent color, defaults are working

✅ Test 2: Color Theme Overrides

Override --drp-accent-color to change the theme color

Green Theme:

Purple Theme:

Red Theme:

Orange Theme:

✓ If selected dates appear in different colors, CSS variable override is working!

✅ Test 3: Dark Theme (Multiple Variables)

Overrides multiple variables for complete dark mode

Select a date range:

✓ If calendar has dark background and light text, multiple variable override is working!

web-daterangepicker.theme-dark {
  --drp-dropdown-bg: #1e293b;
  --drp-text-primary: #f1f5f9;
  --drp-text-secondary: #cbd5e1;
  --drp-border-color: #334155;
  --drp-accent-color: #3b82f6;
  --drp-accent-color-hover: #2563eb;
  --drp-primary-bg: #334155;
  --drp-primary-bg-hover: #475569;
  --drp-text-color-on-accent: #ffffff;
  --drp-button-accent-text-color: #ffffff;
}

✅ Test 4: Custom Sizing & Spacing

Overrides spacing, font size, and border radius

Large with rounded corners:

Compact theme:

✓ If calendars have different sizes and spacing, sizing overrides are working!

✅ Test 5: Range Mode with Themes

Range selection works with all themes

Green theme range:

Dark theme range:

✓ If range selections appear in themed colors, CSS variables work in range mode too!

✅ Test 6: Selection Hover States

Override hover colors for selected days and range start/end independently from the generic day hover

Black selection with gray hover (range):

Black selection with gray hover (single):

Red selection with light-red hover (range):

✓ Hover over the range start/end days - they should change to the hover color, NOT the generic day hover

/* Full color inversion on hover */
web-daterangepicker.theme-selection-hover {
  /* Range start/end: black bg + white text */
  --drp-day-range-bg: #111827;
  --drp-day-range-color: #ffffff;
  /* Hover: white bg + black text (full inversion) */
  --drp-day-range-bg-hover: #ffffff;
  --drp-day-range-color-hover: #111827;

  /* Single selected: same treatment */
  --drp-day-selected-bg: #111827;
  --drp-day-selected-color: #ffffff;
  --drp-day-selected-bg-hover: #ffffff;
  --drp-day-selected-color-hover: #111827;
}

/* Available selection state variables:
   --drp-day-selected-bg            Selected day background
   --drp-day-selected-color         Selected day text color
   --drp-day-selected-bg-hover      Selected day hover background
   --drp-day-selected-color-hover   Selected day hover text color
   --drp-day-range-bg               Range start/end background
   --drp-day-range-color            Range start/end text color
   --drp-day-range-bg-hover         Range start/end hover background
   --drp-day-range-color-hover      Range start/end hover text color */

✅ Test 7: Pastel Theme (Custom Background)

Completely custom color scheme

Pastel theme:

✓ Background, borders, and accents all customized

✅ Test 8: Time Picker Theming (all four UIs)

the accent token cascades into all four time UIs — no display-specific overrides

All four time UIs — rolls, clock, wheel, compact — consume the same --drp-accent-color token used elsewhere. No display-specific overrides needed for color theming.

Rolls — default (blue)

Rolls — green theme

Rolls — purple theme

Clock — default (blue)

Clock — green theme

Clock — red theme (h24 dual ring)

Dark theme — rolls + datetime side by side

Pastel theme — clock + datetime

Wheel — default (blue)

Wheel — green theme (h12)

Wheel — red theme

Compact — default (blue)

Compact — green theme (h12)

Compact — purple theme

✓ Accent, background, border, and text-on-accent tokens cascade into all four time pickers without extra overrides.

For fine-grained control, override the time/clock-specific tokens directly — e.g., --drp-clock-hand-color, --drp-clock-face-bg, --drp-time-picker-label-color, etc. See the variable list below.

✓ Test 9: Classifier Retheming (dayClass / badgeClass conventions)

The picker ships default styling for five consumer-data class names (dayClass: 'holiday' | 'event' and badgeClass: 'badge-number' | 'badge-count' | 'badge-text'), each backed by overridable CSS variables. Override the variables on the host to recolor every day or badge using that classifier.

Default (red holidays, green events):

Corporate (slate holidays, sky-blue events):

Festival (fuchsia + amber, stronger tints):

✓ All three pickers receive the same specialDates data; only the variable overrides differ.

/* Override on the host element — every day/badge using that classifier repaints. */
web-daterangepicker.theme-classifier-corporate {
  --drp-holiday-color: #475569;          /* slate instead of red */
  --drp-event-color:   #0ea5e9;          /* sky blue instead of green */
  --drp-badge-number-bg: #0ea5e9;
  --drp-badge-count-bg:  #475569;
  --drp-badge-text-bg:   #64748b;
}

/* All twelve classifier variables you can override: */
--drp-holiday-color, --drp-holiday-bg-opacity, --drp-holiday-hover-bg-opacity
--drp-event-color,   --drp-event-bg-opacity,   --drp-event-hover-bg-opacity
--drp-badge-number-bg, --drp-badge-number-color
--drp-badge-count-bg,  --drp-badge-count-color
--drp-badge-text-bg,   --drp-badge-text-color

Custom classifier names (e.g., dayClass: 'salsa') live outside this convention — you ship the CSS via customStylesCallback instead. See the Badges & Tooltips examples for the custom-classifier demo.

Available CSS Custom Properties

All variables you can override with --drp- prefix:

Colors

--drp-dropdown-bg           /* Calendar background */
--drp-border-color          /* Border color */
--drp-primary-bg            /* Primary background (hover states) */
--drp-primary-bg-hover      /* Primary background hover */
--drp-accent-color          /* Accent color (selected, focused) */
--drp-accent-color-hover    /* Accent color hover */
--drp-text-primary          /* Primary text color */
--drp-text-secondary        /* Secondary text color */
--drp-text-color-on-accent  /* Text on accent backgrounds */

Spacing

--drp-spacing-xs            /* Extra small spacing */
--drp-spacing-sm            /* Small spacing */
--drp-spacing-md            /* Medium spacing */
--drp-spacing-lg            /* Large spacing */
--drp-spacing-xl            /* Extra large spacing */

Typography

--drp-font-size-2xs         /* Extra extra small */
--drp-font-size-xs          /* Extra small */
--drp-font-size-sm          /* Small */
--drp-font-size-base        /* Base font size */
--drp-font-size-lg          /* Large */
--drp-font-size-xl          /* Extra large */
--drp-font-size-2xl         /* Extra extra large */
--drp-font-weight-medium    /* Medium weight */
--drp-font-weight-semibold  /* Semibold weight */

Borders & Other

--drp-border-width-base     /* Base border width */
--drp-border-radius         /* Border radius */
--drp-shadow-xl             /* Extra large shadow */
--drp-transition-fast       /* Fast transition duration */

Time Picker (rolls)

--drp-time-picker-gap              /* Gap between roll columns */
--drp-time-picker-padding          /* Padding around the time picker block */
--drp-time-picker-roll-min-width   /* Minimum column width */
--drp-time-picker-roll-min-height  /* Minimum roll height (~5-6 items visible) */
--drp-time-picker-label-color      /* Section label + column headers */
--drp-time-picker-label-font-size  /* Label font size */
--drp-time-picker-main-gap         /* Gap between calendar and rolls in datetime mode */
--drp-datetime-min-width           /* Popover width floor in datetime mode (560px default) */

Clock Picker (Material face)

--drp-clock-size                       /* Dial square size (280px default) */
--drp-clock-face-bg                    /* Dial background circle */
--drp-clock-radius-outer               /* Outer hour-ring radius */
--drp-clock-radius-inner               /* Inner hour-ring radius (h24 only) */
--drp-clock-radius-minute              /* Minute-ring radius */
--drp-clock-number-size                /* Number button diameter */
--drp-clock-number-size-inner          /* Inner-ring button diameter */
--drp-clock-number-color               /* Number color */
--drp-clock-number-bg-hover            /* Number hover background */
--drp-clock-number-bg-selected         /* Selected number background (defaults to accent) */
--drp-clock-number-color-selected      /* Selected number color */
--drp-clock-hand-color                 /* Hand + center pivot color (defaults to accent) */
--drp-clock-hand-width                 /* Hand thickness */
--drp-clock-header-digit-font-size     /* HH:MM big-digit size */
--drp-clock-header-digit-color         /* Inactive digit color */
--drp-clock-header-digit-color-active  /* Active digit (current step) color */
--drp-clock-ampm-bg-selected           /* AM/PM toggle selected background */

Wheel Picker (iOS barrel)

--drp-wheel-bg                         /* Barrel background (whole row) */
--drp-wheel-band-bg                    /* Center selection band fill */
--drp-wheel-item-height                /* Per-item row height (also drives band height + fade) */
--drp-wheel-item-font-size             /* Digit font size */
--drp-wheel-item-color                 /* Off-center item color */
--drp-wheel-item-color-hover           /* Hover color */
--drp-wheel-item-color-selected        /* Centered item color (defaults to accent) */
--drp-wheel-column-gap                 /* Gap between columns */
--drp-wheel-column-min-width           /* Floor per column */
--drp-wheel-ampm-min-width             /* Narrower floor for AM/PM column */
--drp-wheel-min-height                 /* Barrel height (~180px default — 5-6 items visible) */
--drp-wheel-fade-height                /* Top/bottom gradient height */

Compact Picker (iOS pills)

--drp-compact-pill-bg                  /* Pill background (defaults to accent @ 12% alpha) */
--drp-compact-pill-bg-hover            /* Pill hover background */
--drp-compact-pill-color               /* Committed pill text (defaults to accent) */
--drp-compact-pill-color-uncommitted   /* Pill text before user has typed */
--drp-compact-pill-font-size           /* Pill digit size */
--drp-compact-pill-padding-v           /* Pill vertical padding */
--drp-compact-pill-padding-h           /* Pill horizontal padding */
--drp-compact-pill-focus-ring          /* Outline ring while editing (defaults to accent) */
--drp-compact-sep-color                /* ':' separator color */
--drp-compact-ampm-bg                  /* AM/PM button background (unselected) */
--drp-compact-ampm-bg-selected         /* AM/PM button background (selected, defaults to accent) */
--drp-compact-ampm-color               /* AM/PM unselected text */
--drp-compact-ampm-color-selected      /* AM/PM selected text */

Dynamic Theme Switching

swap the element's class at runtime (buttons wired in demos.js)

Change themes at runtime with JavaScript

Dynamic theme picker:

// Switch theme dynamically
const picker = document.getElementById('dynamic-picker');

function switchTheme(newTheme) {
  picker.className = newTheme;
}