Date Picker Themes

The themes are basic, m3-green, crane, crane-straight, m2, glassmorphic, pastel, ai, cyberpunk and blueprint. basic is the default and follows Material Design 3 in light and dark. Use the select in the demo to switch the theme.

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

basic and blueprint follow ui.colorScheme. The other themes have one version and keep their own scheme, so ui.colorScheme has no effect on them.

The themes are named like the ones in timepicker-ui, but datepicker-ui has no dark or blueprint-dark. For a dark picker, use basic or blueprint with a dark color scheme.

The other theme files follow the same pattern: theme-crane.css, theme-crane-straight.css, theme-m2.css, theme-glassmorphic.css, theme-pastel.css, theme-ai.css, theme-cyberpunk.css and theme-blueprint.css. To load a single theme, import main.css first:

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

ui.colorScheme is "light", "dark" or "auto" (the default). With "auto" the scheme is detected when the picker opens, in this order:

1. The first mostly opaque background-color found on the input or one of its ancestors decides, and dark means low luminance.
2. Without one, the page color-scheme decides. dark is dark, light dark follows the OS setting and anything else is light.

An inline picker re-detects when the page changes its class, style, data-theme or data-color-scheme, or when the OS setting changes. This site passes the scheme explicitly, so the demos follow the site dark mode toggle.

1new DatepickerUI("#date", {
2  ui: { theme: "basic", colorScheme: "dark" },
3}).create();

A theme sets CSS variables. Add your own selector with ui.cssClass:

new DatepickerUI("#date", { ui: { cssClass: "brand" } }).create();

1.brand {
2  --dp-ui-sys-color-primary: #006a6a;
3  --dp-ui-sys-color-on-primary: #ffffff;
4  --dp-ui-sys-color-secondary-container: #cce8e7;
5  --dp-ui-container-shape-docked: 8px;
6}

The class is added to the surface root, which is the <dialog> for a modal and the .dp-ui__container element otherwise. The full list of variables is on the CSS Variables page.

• All themes example
• Dark mode example
• Custom theme example
• CSS variables
• CSS classes