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

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

Using Themes

Apply a theme by setting the theme option:

const picker = new TimepickerUI(input, {
  ui: {
    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, {
  ui: {
    theme: 'basic'
  }
});
picker.create();


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


// Switch to cyberpunk theme
picker.update({
  options: { ui: { 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, {
  ui: {
    theme: 'm3-green',
    animation: true
  },
  clock: {
    type: '12h'
  }
});

Glassmorphic

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


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

Cyberpunk

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


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

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