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

:root {
  /* Background colors */
  --tp-bg: #ffffff;
  --tp-surface: #e0e0e0;
  --tp-surface-hover: #ece0fd;
  --tp-input-bg: #e4e4e4;

  /* Text colors */
  --tp-text: #000000;
  --tp-text-secondary: #a9a9a9;
  --tp-text-disabled: rgba(156, 155, 155, 0.6);
  --tp-text-type-time: #787878;
  --tp-text-icon: #4e545a;

  /* Primary colors */
  --tp-primary: #6200ee;
  --tp-on-primary: #ffffff;

  /* Material Design 3 colors */
  --tp-primary-container: #eaddff;
  --tp-on-primary-container: #21005d;
  --tp-tertiary-container: #ffd8e4;
  --tp-on-tertiary-container: #633b48;
  --tp-am-pm-text-selected: #633b48;
  --tp-am-pm-text-unselected: #49454f;
  --tp-am-pm-active: #ece0fd;

  /* Borders and shadows */
  --tp-border: #d6d6d6;
  --tp-hover-bg: #d6d6d6;
  --tp-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 
               0px 5px 8px 0px rgba(0, 0, 0, 0.14),
               0px 1px 14px 0px rgba(0, 0, 0, 0.12);

  /* Typography and spacing */
  --tp-font-family: 'Roboto', sans-serif;
  --tp-border-radius: 4px;
}

Creating Custom Themes

Timepicker-UI comes with several built-in themes:

Available Themes

import { TimepickerUI } from 'timepicker-ui';

// Material Design 2 theme (purple/magenta)
const picker1 = new TimepickerUI(input1, { ui: { theme: 'm2' } });

// Material Design 3 theme (green)
const picker2 = new TimepickerUI(input2, { ui: { theme: 'm3-green' } });

// Dark theme
const picker3 = new TimepickerUI(input3, { ui: { theme: 'dark' } });

// Crane theme with rounded corners
const picker4 = new TimepickerUI(input4, { ui: { theme: 'crane' } });

// Crane-straight theme (sharp edges)
const 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

/* Override CSS variables in the custom theme wrapper */
.tp-ui-wrapper.custom {
  --tp-bg: #ffffff;
  --tp-text: #000000;
  --tp-primary: #6200ee;
  --tp-on-primary: #ffffff;
  --tp-surface: #e0e0e0;
  --tp-surface-hover: #ece0fd;
  --tp-input-bg: #e4e4e4;
  --tp-border: #d6d6d6;
  --tp-hover-bg: #d6d6d6;
  --tp-text-secondary: #a9a9a9;
  --tp-text-type-time: #787878;
  --tp-text-icon: #4e545a;
  --tp-text-disabled: rgba(156, 155, 155, 0.6);
  --tp-shadow: 0 10px 35px 0 rgba(0, 0, 0, 0.25);
  --tp-border-radius: 4px;
  --tp-font-family: 'Roboto', sans-serif;
}

Using Your Custom Theme

import { TimepickerUI } from 'timepicker-ui';

const picker = new TimepickerUI('#timepicker', {
  ui: { theme: 'custom' }
});

picker.create();

Runtime Theme Customization

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

const picker = new TimepickerUI('#timepicker', {
  ui: { theme: 'custom' }
});

picker.create();
picker.open();

// Customize theme colors at runtime
picker.setTheme({
  primaryColor: '#ff0000',
  backgroundColor: '#ffffff',
  surfaceColor: '#f0f0f0',
  textColor: '#000000',
  borderRadius: '12px',
  fontFamily: 'Arial, sans-serif'
});

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:

/* Customize ripple in your custom theme */
.tp-ui-wrapper.custom {
  /* Ripple color (uses --tp-on-primary-container by default) */
  --tp-on-primary-container: #21005d;
  
  /* Or override ripple directly */
  [data-md3-ripple]::before {
    background: radial-gradient(
      circle,
      rgba(98, 0, 238, 0.3) 0%,
      rgba(98, 0, 238, 0) 70%
    );
  }
}

/* Adjust ripple animation duration */
.tp-ui-wrapper.custom [data-md3-ripple].is-rippling::before {
  animation: ripple-animation 0.4s ease-out;
}

/* Disable ripple effect if needed */
.tp-ui-wrapper.no-ripple [data-md3-ripple]::before {
  display: none;
}

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.

/* Elements with ripple effect */
- AM/PM toggle buttons: .tp-ui-am, .tp-ui-pm
- Hour input wrapper: .tp-ui-input-wrapper (hour)
- Minute input wrapper: .tp-ui-input-wrapper (minute)/* CSS pseudo-element approach */
[data-md3-ripple] {
  position: relative;
  overflow: hidden;
}

[data-md3-ripple]::before {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--ripple-color) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
}

Complete Custom Theme Example

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

/* theme-purple.css */
.tp-ui-wrapper.custom {
  --tp-bg: #faf5ff;
  --tp-text: #1e1b4b;
  --tp-primary: #8b5cf6;
  --tp-on-primary: #ffffff;
  --tp-surface: #ede9fe;
  --tp-surface-hover: #ddd6fe;
  --tp-input-bg: #f3e8ff;
  --tp-border: #c4b5fd;
  --tp-hover-bg: #ddd6fe;
  --tp-text-secondary: #7c3aed;
  --tp-text-type-time: #6d28d9;
  --tp-text-icon: #7c3aed;
  --tp-text-disabled: #a78bfa;
  --tp-shadow: 0 10px 35px 0 rgba(139, 92, 246, 0.3);
  --tp-border-radius: 16px;
  --tp-font-family: 'Inter', system-ui, sans-serif;
}

/* Usage in JavaScript */
import { TimepickerUI } from 'timepicker-ui';
import './theme-purple.css';

const picker = new TimepickerUI('#timepicker', {
  ui: { theme: 'custom' }
});

picker.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