Dark Mode

ui.colorScheme: "dark" forces the dark version of the theme, whatever the page looks like. Use the Inline switch to see the calendar in place.

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

"light" forces the light version, even on a dark page.

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

"auto" is the default. The scheme is detected when the picker opens. The first mostly opaque background-color on the input or one of its ancestors decides, and a low luminance means dark. Without one, the page color-scheme decides: dark is dark, light dark follows the operating system, and anything else is light. An inline picker detects again when the page changes.

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