Customization

Basic implementation for Nepali datepicker in React select.

Customizable components
  • - Input field/container
  • - Portal container
  • - Menu container
  • - Menu header
  • - Menu Footer
  • - Date, Month, year and week items

CSS variables

It is possible to customize the datepicker using css variables. Customization using css variables is helpful when switching between different color but design is same e.g. light/dark mode.

Following Variables available
index.css
--zener-menu-container-bg: #16171a; 
  /* Background color for the menu container */

--zener-menu-container-text: #d1d5db; 
/* Text color for the menu container */

--zener-menu-container-text-disabled: #52525b; 
/* Text color for disabled items in the menu container */

--zener-menu-footer-today-text: #0284c7; 
/* Text color for 'Today' label in the menu footer */

--zener-menu-container-text-selected-bg: #0284c7; 
/* Background color for selected menu items */

--zener-menu-container-text-selected: #ffffff; 
/* Text color for selected menu items */

--zener-menu-container-item-hover: #3f3f46; 
/* Background color for menu items on hover */

--zener-menu-container-text-border: #0284c7; 
/* Border color for menu container text */

--zener-menu-footer-today-hover-text: #d1d5db; 
/* Text color for 'Today' label on hover in the menu footer */

--zener-menu-header-icon: #9ca3af; 
/* Color for header icons */

--zener-menu-header-icon-hover: #71717a; 
/* Color for header icons on hover */

--zener-menu-header-icon-disabled: #27272a; 
/* Color for disabled header icons */

--zener-menu-container-top-bottom-border: #27272a; 
/* Color for top and bottom border of the menu container */

--zener-input-text: #ffffff; 
/* Text color for input field */

--zener-input-bg: #16171a; 
/* Background color for input field */

--zener-input-border: #373b45; 
/* Border color for input field */

--zener-input-focus-ring: #0284c7; 
/* Color of the focus ring for input field */

--zener-input-disabled-bg: #0000000d; 
/* Background color for disabled input field */

--zener-input-disabled-text: #00000040; 
/* Text color for disabled input field */

--zener-input-disabled-border: #f5f5f4; 
/* Border color for disabled input field */