Timepicker-UI

Themes

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

Available Themes

basic

Default Material Design theme with clean aesthetics

crane-straight

Google Crane theme with straight edges and sharp corners

crane-radius

Google Crane theme with rounded edges

m3

Material Design 3 (Material You) with dynamic colors

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

Using Themes

Apply a theme by setting the theme option:

const picker = new TimepickerUI(input, {
  theme: 'cyberpunk'
});
picker.create();

Import Theme Styles

Import only the theme you need to reduce bundle size:

Option 1: All themes (largest)

import 'timepicker-ui/index.css';

Option 2: Base + specific theme (recommended)

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

Option 3: Only base (basic theme only)

import 'timepicker-ui/main.css';

Dynamic Theme Switching

Change themes at runtime using the update method:

// Initialize with basic theme
const picker = new TimepickerUI(input, {
  theme: 'basic'
});
picker.create();


// Switch to dark theme
picker.update({
  options: { theme: 'dark' },
  create: true
});


// Switch to cyberpunk theme
picker.update({
  options: { theme: 'cyberpunk' },
  create: true
});

Theme Examples

Material Design 3

import 'timepicker-ui/main.css';
import 'timepicker-ui/theme-m3.css';


const picker = new TimepickerUI(input, {
  theme: 'm3',
  clockType: '12h',
  animation: true
});

Glassmorphic

import 'timepicker-ui/main.css';
import 'timepicker-ui/theme-glassmorphic.css';


const picker = new TimepickerUI(input, {
  theme: 'glassmorphic',
  backdrop: true,
  animation: true
});

Cyberpunk

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


const picker = new TimepickerUI(input, {
  theme: 'cyberpunk',
  clockType: '24h',
  animation: true,
  backdrop: true
});

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