Guide

Custom Styling

Customize the timepicker appearance to match your brand

CSS Variables

Timepicker-UI uses CSS custom properties (variables) for easy customization. Override these variables to change colors and styles:

Available CSS Variables

index.csscss

1:root {
2  /* Background colors */
3  --tp-bg: #ffffff;
4  --tp-surface: #e0e0e0;
5  --tp-surface-hover: #ece0fd;
6  --tp-input-bg: #e4e4e4;
7
8  /* Text colors */
9  --tp-text: #000000;
10  --tp-text-secondary: #a9a9a9;
11  --tp-text-disabled: rgba(156, 155, 155, 0.6);
12  --tp-text-type-time: #787878;
13  --tp-text-icon: #4e545a;
14
15  /* Primary colors */
16  --tp-primary: #6200ee;
17  --tp-on-primary: #ffffff;
18
19  /* Material Design 3 colors */
20  --tp-primary-container: #eaddff;
21  --tp-on-primary-container: #21005d;
22  --tp-tertiary-container: #ffd8e4;
23  --tp-on-tertiary-container: #633b48;
24  --tp-am-pm-text-selected: #633b48;
25  --tp-am-pm-text-unselected: #49454f;
26  --tp-am-pm-active: #ece0fd;
27
28  /* Borders and shadows */
29  --tp-border: #d6d6d6;
30  --tp-hover-bg: #d6d6d6;
31  --tp-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 
32               0px 5px 8px 0px rgba(0, 0, 0, 0.14),
33               0px 1px 14px 0px rgba(0, 0, 0, 0.12);
34
35  /* Typography and spacing */
36  --tp-font-family: 'Roboto', sans-serif;
37  --tp-border-radius: 4px;
38}

Creating Custom Themes

Timepicker-UI comes with several built-in themes:

Available Themes

index.tstypescript

1import { TimepickerUI } from 'timepicker-ui';
2
3// Material Design 2 theme (purple/magenta)
4const picker1 = new TimepickerUI(input1, { ui: { theme: 'm2' } });
5
6// Material Design 3 theme (green)
7const picker2 = new TimepickerUI(input2, { ui: { theme: 'm3-green' } });
8
9// Dark theme
10const picker3 = new TimepickerUI(input3, { ui: { theme: 'dark' } });
11
12// Crane theme with rounded corners
13const picker4 = new TimepickerUI(input4, { ui: { theme: 'crane' } });
14
15// Crane-straight theme (sharp edges)
16const picker5 = new TimepickerUI(input5, { ui: { theme: 'crane-straight' } });

Note: Version 3.2.0 introduced the Material Design 2 theme ('m2') and renamed the previous default Material Design 3 theme from 'm3' to 'm3-green' for clarity.

Create your own theme using the custom theme class and CSS variables:

Custom Theme Example

index.csscss

1/* Override CSS variables in the custom theme wrapper */
2.tp-ui-wrapper.custom {
3  --tp-bg: #ffffff;
4  --tp-text: #000000;
5  --tp-primary: #6200ee;
6  --tp-on-primary: #ffffff;
7  --tp-surface: #e0e0e0;
8  --tp-surface-hover: #ece0fd;
9  --tp-input-bg: #e4e4e4;
10  --tp-border: #d6d6d6;
11  --tp-hover-bg: #d6d6d6;
12  --tp-text-secondary: #a9a9a9;
13  --tp-text-type-time: #787878;
14  --tp-text-icon: #4e545a;
15  --tp-text-disabled: rgba(156, 155, 155, 0.6);
16  --tp-shadow: 0 10px 35px 0 rgba(0, 0, 0, 0.25);
17  --tp-border-radius: 4px;
18  --tp-font-family: 'Roboto', sans-serif;
19}

Using Your Custom Theme

index.tstypescript

1import { TimepickerUI } from 'timepicker-ui';
2
3const picker = new TimepickerUI('#timepicker', {
4  ui: { theme: 'custom' }
5});
6
7picker.create();

Runtime Theme Customization

You can also change theme colors dynamically using the setTheme() method:

index.tstypescript

1const picker = new TimepickerUI('#timepicker', {
2  ui: { theme: 'custom' }
3});
4
5picker.create();
6picker.open();
7
8// Customize theme colors at runtime
9picker.setTheme({
10  primaryColor: '#ff0000',
11  backgroundColor: '#ffffff',
12  surfaceColor: '#f0f0f0',
13  textColor: '#000000',
14  borderRadius: '12px',
15  fontFamily: 'Arial, sans-serif'
16});

Material Design 3 Ripple Effect

Version 3.2.0 added Material Design 3 ripple effects for enhanced touch feedback on interactive elements. The ripple effect is automatically applied to AM/PM buttons and time input fields.

Ripple Effect Features

Material Design 3 compliant ripple animation
Automatic application to AM/PM toggle buttons
Applied to hour and minute input fields
Smooth circular ripple expansion from touch/click point
Customizable via CSS variables

Customizing Ripple Effect

You can customize the ripple effect appearance using CSS variables:

index.csscss

1/* Customize ripple in your custom theme */
2.tp-ui-wrapper.custom {
3  /* Ripple color (uses --tp-on-primary-container by default) */
4  --tp-on-primary-container: #21005d;
5  
6  /* Or override ripple directly */
7  [data-md3-ripple]::before {
8    background: radial-gradient(
9      circle,
10      rgba(98, 0, 238, 0.3) 0%,
11      rgba(98, 0, 238, 0) 70%
12    );
13  }
14}
15
16/* Adjust ripple animation duration */
17.tp-ui-wrapper.custom [data-md3-ripple].is-rippling::before {
18  animation: ripple-animation 0.4s ease-out;
19}
20
21/* Disable ripple effect if needed */
22.tp-ui-wrapper.no-ripple [data-md3-ripple]::before {
23  display: none;
24}

Technical Implementation

The ripple effect uses the data-md3-ripple attribute and CSS pseudo-elements. Elements with this attribute automatically receive ripple animations on pointer events.

index.csscss

1/* Elements with ripple effect */
2- AM/PM toggle buttons: .tp-ui-am, .tp-ui-pm
3- Hour input wrapper: .tp-ui-input-wrapper (hour)
4- Minute input wrapper: .tp-ui-input-wrapper (minute)/* CSS pseudo-element approach */
5[data-md3-ripple] {
6  position: relative;
7  overflow: hidden;
8}
9
10[data-md3-ripple]::before {
11  content: '';
12  position: absolute;
13  border-radius: 50%;
14  background: radial-gradient(circle, var(--ripple-color) 0%, transparent 70%);
15  transform: translate(-50%, -50%) scale(0);
16  pointer-events: none;
17}

Complete Custom Theme Example

Here's a complete example of a custom purple theme:

index.csscss

1/* theme-purple.css */
2.tp-ui-wrapper.custom {
3  --tp-bg: #faf5ff;
4  --tp-text: #1e1b4b;
5  --tp-primary: #8b5cf6;
6  --tp-on-primary: #ffffff;
7  --tp-surface: #ede9fe;
8  --tp-surface-hover: #ddd6fe;
9  --tp-input-bg: #f3e8ff;
10  --tp-border: #c4b5fd;
11  --tp-hover-bg: #ddd6fe;
12  --tp-text-secondary: #7c3aed;
13  --tp-text-type-time: #6d28d9;
14  --tp-text-icon: #7c3aed;
15  --tp-text-disabled: #a78bfa;
16  --tp-shadow: 0 10px 35px 0 rgba(139, 92, 246, 0.3);
17  --tp-border-radius: 16px;
18  --tp-font-family: 'Inter', system-ui, sans-serif;
19}
20
21/* Usage in JavaScript */
22import { TimepickerUI } from 'timepicker-ui';
23import './theme-purple.css';
24
25const picker = new TimepickerUI('#timepicker', {
26  ui: { theme: 'custom' }
27});
28
29picker.create();

Browser Compatibility

CSS custom properties are supported in all modern browsers. For older browsers, provide fallback values or use a PostCSS plugin to generate static CSS. Test your custom themes across different browsers to ensure consistent appearance.

View built-in themes