All Themes

Switch between the ten built-in themes. This page documents @pglejzer/datepicker-ui, the companion of timepicker-ui.

Theme switcher

ui.theme is one of basic, m3-green, crane, crane-straight, m2, glassmorphic, pastel, ai, cyberpunk and blueprint. Use the select in the demo to change the theme, and the Inline switch to see the calendar without opening it.

Themes

Date

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/index.css";
3
4new DatepickerUI("#date", {
5  ui: { theme: "m3-green" },
6}).create();

Note

basic and blueprint follow ui.colorScheme. The other themes have one scheme. glassmorphic blurs what is behind the picker, so it needs a coloured background.

Load only one theme

#

index.css contains the core and every theme. To ship less CSS, import main.css and the file of the theme you use. main.css alone is enough for basic.

index.ts

1import DatepickerUI from "@pglejzer/datepicker-ui";
2import "@pglejzer/datepicker-ui/main.css";
3import "@pglejzer/datepicker-ui/theme-m3-green.css";
4
5new DatepickerUI("#date", {
6  ui: { theme: "m3-green" },
7}).create();