Example · Advanced

Custom Styling

Customize the timepicker appearance using CSS custom properties and your own styles

CSS Custom Properties

Timepicker-UI uses CSS custom properties (CSS variables) that you can override to match your brand colors and design system. Version 3.2.0 added Material Design 3 ripple effects and expanded the color system with container colors.

Custom CSS Class

Add your own CSS class via cssClass option and define custom CSS variables:

Live

Select time

index.tstypescript

1import { TimepickerUI } from 'timepicker-ui';
2
3const input = document.querySelector('#timepicker');
4const picker = new TimepickerUI(input, {
5  ui: { cssClass: 'my-custom-picker' }
6});
7picker.create();
8
9// CSS:
10.tp-ui-wrapper.my-custom-picker {
11  --tp-bg: #fce4ec;
12  --tp-primary: #e91e63;
13  --tp-surface-hover: #f8bbd0;
14  --tp-input-bg: #f48fb1;
15  --tp-primary-container: #f8bbd0;
16}

Dark Theme Example

Create a custom dark theme with purple accents:

Live

Select time

index.tstypescript

1import { TimepickerUI } from 'timepicker-ui';
2
3const input = document.querySelector('#timepicker');
4const picker = new TimepickerUI(input, {
5  ui: { cssClass: 'purple-dark-theme' }
6});
7picker.create();
8
9// CSS:
10.tp-ui-wrapper.purple-dark-theme {
11  --tp-bg: #0f172a;
12  --tp-surface: #1e293b;
13  --tp-surface-hover: #334155;
14  --tp-text: #f1f5f9;
15  --tp-text-secondary: #94a3b8;
16  --tp-primary: #a855f7;
17  --tp-on-primary: #ffffff;
18  --tp-border: rgba(168, 85, 247, 0.3);
19  --tp-shadow: 0 20px 25px -5px rgba(168, 85, 247, 0.2);
20  --tp-border-radius: 16px;
21}

Custom Font & Border Radius

Customize typography and rounded corners:

Live

Select time

index.tstypescript

1import { TimepickerUI } from 'timepicker-ui';
2
3const input = document.querySelector('#timepicker');
4const picker = new TimepickerUI(input, {
5  ui: { cssClass: 'custom-rounded-picker' }
6});
7picker.create();
8
9// CSS:
10.tp-ui-wrapper.custom-rounded-picker {
11  --tp-font-family: 'Inter', -apple-system, sans-serif;
12  --tp-border-radius: 24px;
13  --tp-primary: #10b981;
14  --tp-surface-hover: #d1fae5;
15}

Material Design 3 Features (v3.2.0+)

Version 3.2.0 introduced full Material Design 3 support with ripple effects and container colors:

Live

Select time

index.tstypescript

1import { TimepickerUI } from 'timepicker-ui';
2
3const input = document.querySelector('#timepicker');
4const picker = new TimepickerUI(input, {
5  ui: { theme: 'm3-green' } // or 'm2' for Material Design 2
6});
7picker.create();
8
9// CSS variables for MD3 customization:
10.tp-ui-wrapper.custom {
11  /* Material Design 3 container colors */
12  --tp-primary-container: #eaddff;
13  --tp-on-primary-container: #21005d;
14  --tp-tertiary-container: #ffd8e4;
15  --tp-on-tertiary-container: #633b48;
16  
17  /* AM/PM specific colors */
18  --tp-am-pm-text-selected: #633b48;
19  --tp-am-pm-text-unselected: #49454f;
20  --tp-am-pm-active: #ece0fd;
21}
22
23// Ripple effect is automatically applied to:
24// - AM/PM buttons
25// - Hour and minute inputs

Ripple Effect

Material Design 3 ripple effects are automatically applied to AM/PM buttons and time input fields. Customize the ripple color using --timepicker-on-primary-container variable or override the [data-md3-ripple]::before pseudo-element styles.