timepicker-ui
4.6.0GitHub
timepicker-ui
GitHub4.6.0
Themes / Custom Theme

Custom Theme

Restyle the picker with a class and CSS variables. This page documents @pglejzer/datepicker-ui, the companion of timepicker-ui.

A class and a few variables

#

A theme is a set of CSS variables. ui.cssClass adds your class to the surface root, which is the <dialog> for a modal and the .dp-ui__container element otherwise. Set the variables on that class.

brand.css
.brand {
  --dp-ui-sys-color-primary: #006a6a;
  --dp-ui-sys-color-on-primary: #ffffff;
  --dp-ui-sys-color-secondary-container: #cce8e7;
  --dp-ui-sys-color-on-secondary-container: #05201f;
  --dp-ui-container-shape-docked: 8px;
}
brand
import DatepickerUI from "@pglejzer/datepicker-ui";
import "@pglejzer/datepicker-ui/index.css";


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

Note

The system tokens (--dp-ui-sys-color-*) feed the component tokens such as --dp-ui-date-selected-container-color. Override a system token to recolour everything that uses it, or a component token to change one part.
Esc