Themes

12 built-in themes, or your own through CSS variables

Examples: Themes

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: AI-inspired theme with light gray surfaces and a solid blue accent
cyberpunk: Neon cyan accents and a cyan glow on dark indigo surfaces
blueprint New in v4.4.0: Light precision-instrument look - vivid cobalt accent, pale blue surfaces and hairline borders
blueprint-dark New in v4.4.0: Dark sibling of Blueprint - brighter cobalt on navy surfaces with hairline borders

Crane and contrast

In crane and crane-straight the keyboard focus ring uses the theme's coral --tp-outline.

Known exception: the Crane red on plum is below the 3:1 non-text contrast of WCAG 1.4.11 for the selected clock tip circle and the selected AM/PM fill. The white text on them meets AA.

The dark theme in 4.7.0

#

The dark theme now uses the Material 3 baseline dark palette, so it matches the basic theme and the other M3 themes. Before, it was toned like Material 2. The card is lighter (surface #2b2930), the accent is #d0bcff, and the selected hour and the AM / PM button use tonal containers instead of a solid purple fill. No option, class or file name changed. The tokens that were unset now have dark values, where they used to fall back to the light ones.

Token	Before 4.7.0	4.7.0
--tp-bg	#1c1b1f	#2b2930
--tp-surface, --tp-input-bg	#2c2b30	#36343b
--tp-surface-hover, --tp-hover-bg	#3b3940	#444249
--tp-surface-container	unset (light #f3edf7)	#211f26
--tp-text, --tp-on-surface	#e5e5e5	#e6e0e9
--tp-on-surface-rgb	229, 229, 229	230, 224, 233
--tp-text-secondary, --tp-text-type-time, --tp-text-icon, --tp-am-pm-text-unselected	#a1a1a1	#cac4d0
--tp-on-surface-variant	unset (light #49454f)	#cac4d0
--tp-text-disabled	rgba(161, 161, 161, 0.6)	rgba(230, 224, 233, 0.38)
--tp-primary, --tp-outline	#bb86fc, #d8b4fe	#d0bcff
--tp-primary-rgb	unset (light 103, 80, 164)	208, 188, 255
--tp-on-primary	#000000	#381e72
--tp-primary-container	var(--tp-primary)	#4f378b
--tp-on-primary-container	#000000	#eaddff
--tp-tertiary-container, --tp-am-pm-active	var(--tp-primary)	#633b48
--tp-on-tertiary-container, --tp-am-pm-text-selected	#000000	#ffd8e4
--tp-outline-variant	unset (light #cac4d0)	#49454f
--tp-border	rgba(255, 255, 255, 0.12)	#49454f
--tp-dropdown-option-bg	#2c2b30	#2b2930
--tp-dropdown-option-text	#e5e5e5	#e6e0e9
--tp-error	#ff6b6b	#f2b8b5
--tp-wheel-highlight-bg	rgba(187, 134, 252, 0.12)	#4f378b
--tp-wheel-highlight-border	rgba(255, 255, 255, 0.12)	#49454f
--tp-wheel-text-color	#e5e5e5	#e6e0e9
--tp-wheel-selected-color	#bb86fc	#eaddff

Keep the old look

Set the old values on [data-theme='dark'] after the theme stylesheet. The four tokens that were unset in the old theme took these values from the light defaults.

index.css

1[data-theme='dark'] {
2  --tp-bg: #1c1b1f;
3  --tp-surface: #2c2b30;
4  --tp-input-bg: #2c2b30;
5  --tp-surface-hover: #3b3940;
6  --tp-hover-bg: #3b3940;
7  --tp-surface-container: #f3edf7;
8
9  --tp-text: #e5e5e5;
10  --tp-on-surface: #e5e5e5;
11  --tp-on-surface-rgb: 229, 229, 229;
12  --tp-text-secondary: #a1a1a1;
13  --tp-text-type-time: #a1a1a1;
14  --tp-text-icon: #a1a1a1;
15  --tp-am-pm-text-unselected: #a1a1a1;
16  --tp-on-surface-variant: #49454f;
17  --tp-text-disabled: rgba(161, 161, 161, 0.6);
18
19  --tp-primary: #bb86fc;
20  --tp-outline: #d8b4fe;
21  --tp-primary-rgb: 103, 80, 164;
22  --tp-on-primary: #000000;
23  --tp-primary-container: var(--tp-primary);
24  --tp-on-primary-container: #000000;
25  --tp-tertiary-container: var(--tp-primary);
26  --tp-am-pm-active: var(--tp-primary);
27  --tp-on-tertiary-container: #000000;
28  --tp-am-pm-text-selected: #000000;
29
30  --tp-outline-variant: #cac4d0;
31  --tp-border: rgba(255, 255, 255, 0.12);
32  --tp-dropdown-option-bg: #2c2b30;
33  --tp-dropdown-option-text: #e5e5e5;
34  --tp-error: #ff6b6b;
35
36  --tp-wheel-highlight-bg: rgba(187, 134, 252, 0.12);
37  --tp-wheel-highlight-border: rgba(255, 255, 255, 0.12);
38  --tp-wheel-text-color: #e5e5e5;
39  --tp-wheel-selected-color: #bb86fc;
40}

Using Themes

#

Apply a theme by setting the theme option:

index.ts

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

import 'timepicker-ui/index.css';

Option 2: Base + specific theme (recommended)

index.ts

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

Option 3: Only base (basic theme only)

index.ts

import 'timepicker-ui/main.css';

Dynamic Theme Switching

#

Change themes at runtime with setOptions():

index.ts

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.setOptions({ ui: { theme: 'dark' } });
11
12// Switch to cyberpunk theme
13picker.setOptions({ ui: { theme: 'cyberpunk' } });

Theme Examples

#

Material Design 3

index.ts

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

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

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});

Blueprint New 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 navy dark sibling.

index.ts

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