Skip to content
timepicker-ui
Feature

Themes

Choose from 12 beautiful built-in themes or create your own

Available Themes

basic

Default Material Design theme with clean aesthetics

crane

Google Crane theme with rounded corners

crane-straight

Google Crane theme with straight edges and sharp corners

m3-green

Material Design 3 with green color scheme

m2

Material Design 2 classic theme

dark

Dark mode theme with high contrast

glassmorphic

Modern glass effect with blur and transparency

pastel

Soft pastel colors for gentle aesthetics

ai

Futuristic AI-inspired theme with gradients

cyberpunk

Neon cyberpunk aesthetic with vibrant colors

blueprintNew in v4.4.0

Light precision-instrument look - vivid cobalt accent, white surfaces and hairline borders

blueprint-darkNew in v4.4.0

Dark sibling of Blueprint - brighter cobalt on near-black surfaces with hairline borders

Using Themes

Apply a theme by setting the theme option:

index.tstypescript
1const picker = new TimepickerUI(input, {
2  ui: {
3    theme: 'cyberpunk'
4  }
5});
6picker.create();

Import Theme Styles

Import only the theme you need to reduce bundle size:

Option 1: All themes (largest)

index.tstypescript
import 'timepicker-ui/index.css';

Option 2: Base + specific theme (recommended)

index.tstypescript
1import 'timepicker-ui/main.css';
2import 'timepicker-ui/theme-cyberpunk.css';

Option 3: Only base (basic theme only)

index.tstypescript
import 'timepicker-ui/main.css';

Dynamic Theme Switching

Change themes at runtime using the update method:

index.tstypescript
1// Initialize with basic theme
2const picker = new TimepickerUI(input, {
3  ui: {
4    theme: 'basic'
5  }
6});
7picker.create();
8

9// Switch to dark theme
10picker.update({
11  options: { ui: { theme: 'dark' } },
12  create: true
13});
14

15// Switch to cyberpunk theme
16picker.update({
17  options: { ui: { theme: 'cyberpunk' } },
18  create: true
19});

Theme Examples

Material Design 3

index.tstypescript
1import 'timepicker-ui/main.css';
2import 'timepicker-ui/theme-m3-green.css';
3

4const picker = new TimepickerUI(input, {
5  ui: {
6    theme: 'm3-green',
7    animation: true
8  },
9  clock: {
10    type: '12h'
11  }
12});

Glassmorphic

index.tstypescript
1import 'timepicker-ui/main.css';
2import 'timepicker-ui/theme-glassmorphic.css';
3

4const picker = new TimepickerUI(input, {
5  ui: {
6    theme: 'glassmorphic',
7    backdrop: true,
8    animation: true
9  }
10});

Cyberpunk

index.tstypescript
1import 'timepicker-ui/main.css';
2import 'timepicker-ui/theme-cyberpunk.css';
3

4const picker = new TimepickerUI(input, {
5  ui: {
6    theme: 'cyberpunk',
7    animation: true,
8    backdrop: true
9  },
10  clock: {
11    type: '24h'
12  }
13});

BlueprintNew in v4.4.0

A precision-instrument look with a vivid cobalt accent and hairline borders. Use blueprint for light surfaces or blueprint-dark for the near-black dark sibling.

index.tstypescript
1import 'timepicker-ui/main.css';
2import 'timepicker-ui/theme-blueprint.css';
3

4const picker = new TimepickerUI(input, {
5  ui: {
6    theme: 'blueprint',
7    animation: true
8  }
9});
10

11// Dark sibling
12// import 'timepicker-ui/theme-blueprint-dark.css';
13// ui: { theme: 'blueprint-dark' }

Custom Themes

You can create custom themes by overriding CSS variables or creating your own theme file. Check the documentation for detailed instructions on custom styling.

Learn about custom styling