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. You can also use the runtime setTheme() API for dynamic theming.

Custom CSS Class

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

Select Time

Dark Theme Example

Create a custom dark theme with purple accents:

Select Time

Custom Font & Border Radius

Customize typography and rounded corners:

Select Time

Runtime Theme API

Use setTheme() method to change colors dynamically at runtime:

Select Time

💡

Runtime API

The setTheme() method allows you to change the timepicker appearance dynamically without recreating the instance. Perfect for implementing theme switchers!