feat: added darkTheme prop for dark mode support

docs-site/src/components/Examples/config.tsx

@@ -113,6 +113,7 @@ import WeekPicker from "../../examples/ts/weekPicker?raw";
 import ExcludeWeeks from "../../examples/ts/excludeWeeks?raw";
 import ExternalForm from "../../examples/ts/externalForm?raw";
 import Timezone from "../../examples/ts/timezone?raw";
+import ApplyDarkTheme from "../../examples/ts/applyDarkTheme?raw"
 
 export const EXAMPLE_CONFIG: IExampleConfig[] = [
   {
@@ -588,4 +589,9 @@ export const EXAMPLE_CONFIG: IExampleConfig[] = [
       "Display and handle dates in a specific timezone using the timeZone prop. Requires date-fns-tz as a peer dependency.",
     component: Timezone,
   },
+  {
+    title: "Apply Dark Theme",
+    description: "Apply the dark theme without modifying existing styles by using the darkTheme prop. Set darkTheme={true} or simply darkTheme to enable it.",
+    component: ApplyDarkTheme,
+  },
 ];

docs-site/src/examples/ts/applyDarkTheme.tsx

@@ -0,0 +1,16 @@
+const ApplyDarkTheme = () => {
+  const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
+
+  return (
+    <DatePicker
+      selected={selectedDate}
+      onChange={setSelectedDate}
+      darkTheme={true}
+      showTimeSelect
+      timeFormat="HH:mm"
+      dateFormat="MMMM d, yyyy hh:mm aa"
+    />
+  );
+};
+
+render(ApplyDarkTheme);

src/apply_dark_theme.tsx

@@ -0,0 +1,20 @@
+export const applyDarkTheme = (isDarkTheme: boolean) => {
+  const root = document.documentElement;
+
+  const variables = {
+    "--datepicker__container-background-color": isDarkTheme ? "#000000" : "#ffffff",
+    "--datepicker__header-background-color": isDarkTheme ? "#333" : "#f0f0f0",
+    "--datepicker__text-color": isDarkTheme ? "#ffffff" : "#000",
+    "--datepicker__header-color": isDarkTheme ? "#ffffff" : "#000",
+    "--datepicker__hover-text-color": "#000",
+    "--datepicker__background-color": isDarkTheme ? "#000000" : "#f0f0f0",
+    "--datepicker__time-container-background-color": isDarkTheme ? "#7e7b7b" : "#f0f0f0",
+    "--datepicker__today-button-background-color": isDarkTheme ? "#333" : "#f0f0f0",
+    "--datepicker__today-button-text-color": isDarkTheme ? "#ffffff" : "#000",
+    "--datepicker-time-icon-filter": isDarkTheme ? "invert(1)" : "none"
+  };
+
+  Object.entries(variables).forEach(([key, value]) =>
+    root.style.setProperty(key, value)
+  );
+};

src/index.tsx

@@ -64,6 +64,7 @@ import Portal from "./portal";
 import TabLoop from "./tab_loop";
 
 import type { ClickOutsideHandler } from "./click_outside_wrapper";
+import { applyDarkTheme } from "./apply_dark_theme";
 
 export { default as CalendarContainer } from "./calendar_container";
 
@@ -162,6 +163,7 @@ export type DatePickerProps = OmitUnion<
     onFocus?: React.FocusEventHandler<HTMLElement>;
     onBlur?: React.FocusEventHandler<HTMLElement>;
     onClickOutside?: ClickOutsideHandler;
+    darkTheme?: boolean;
     onInputClick?: VoidFunction;
     preventOpenOnFocus?: boolean;
     closeOnScroll?: boolean | ((event: Event) => boolean);
@@ -380,6 +382,8 @@ export class DatePicker extends Component<DatePickerProps, DatePickerState> {
       "visibilitychange",
       this.setHiddenStateOnVisibilityHidden,
     );
+
+    applyDarkTheme(!!this.props.darkTheme);
   }
 
   componentDidUpdate(
@@ -438,6 +442,8 @@ export class DatePicker extends Component<DatePickerProps, DatePickerState> {
         this.props.onCalendarClose?.();
       }
     }
+
+    applyDarkTheme(!!this.props.darkTheme);
   }
 
   componentWillUnmount(): void {

src/month_dropdown.tsx

@@ -36,7 +36,7 @@ export default class MonthDropdown extends Component<
   renderSelectOptions = (monthNames: string[]): React.ReactElement[] =>
     monthNames.map<React.ReactElement>(
       (m: string, i: number): React.ReactElement => (
-        <option key={m} value={i}>
+        <option className="react-datepicker__month-select--options" key={m} value={i}>
           {m}
         </option>
       ),

src/stylesheets/datepicker.scss

@@ -24,8 +24,8 @@
 .react-datepicker {
   font-family: $datepicker__font-family;
   font-size: $datepicker__font-size;
-  background-color: #fff;
-  color: $datepicker__text-color;
+  background-color: var(--datepicker__container-background-color);
+  color: var(--datepicker__text-color);
   border: $datepicker__border;
   border-radius: $datepicker__border-radius;
   display: inline-block;
@@ -55,28 +55,30 @@
 
   .react-datepicker__triangle {
     stroke: $datepicker__border-color;
+    color: var(--datepicker__background-color);
+    fill: var(--datepicker__background-color);
   }
 
   &[data-placement^="bottom"] {
     .react-datepicker__triangle {
-      fill: $datepicker__background-color;
-      color: $datepicker__background-color;
+      fill: var(--datepicker__background-color);
+      color: var(--datepicker__background-color);
     }
   }
 
   &[data-placement^="top"] {
     .react-datepicker__triangle {
-      fill: #fff;
-      color: #fff;
+      fill: var(--datepicker__background-color);
+      color: var(--datepicker__background-color);
     }
   }
 
   &--header-middle,
   &--header-bottom {
     &[data-placement^="bottom"] {
       .react-datepicker__triangle {
-        fill: #fff;
-        color: #fff;
+        fill: var(--datepicker__background-color);
+        color: var(--datepicker__background-color);
       }
     }
   }
@@ -93,7 +95,7 @@
 
 .react-datepicker__header {
   text-align: center;
-  background-color: $datepicker__background-color;
+  background-color: var(--datepicker__header-background-color);
   border-bottom: $datepicker__border;
   border-top-left-radius: $datepicker__border-radius;
   padding: 8px 0;
@@ -165,15 +167,21 @@
   &:focus-visible {
     outline: auto 1px;
   }
+
+  &--options {
+    color: var(--datepicker__text-color);
+    background: var(--datepicker__container-background-color);
+  }
 }
 
 .react-datepicker__current-month,
 .react-datepicker-time__header,
 .react-datepicker-year-header {
   margin-top: 0;
-  color: $datepicker__header-color;
+  color: var(--datepicker__header-color);
   font-weight: bold;
   font-size: $datepicker__font-size * 1.18;
+  border-bottom-width: 0;
 }
 
 h2.react-datepicker__current-month {
@@ -286,6 +294,10 @@ h2.react-datepicker__current-month {
     display: inline-block;
     width: 5em;
     margin: 2px;
+
+    &:hover {
+      color: var(--datepicker__hover-text-color);
+    }
   }
 }
 
@@ -318,6 +330,8 @@ h2.react-datepicker__current-month {
     .react-datepicker-time__input {
       display: inline-block;
       margin-left: 10px;
+      background: var(--datepicker__container-background-color);
+      color: var(--datepicker__text-color);
 
       input {
         width: auto;
@@ -332,6 +346,17 @@ h2.react-datepicker__current-month {
       input[type="time"] {
         -moz-appearance: textfield;
       }
+
+      input[type="time"] {
+        background: var(--datepicker__container-background-color);
+        color: var(--datepicker__text-color);
+
+        /* Chrome / Edge / Safari */
+        &::-webkit-calendar-picker-indicator {
+          filter: var(--datepicker-time-icon-filter);
+          cursor: pointer;
+        }
+      }
     }
 
     .react-datepicker-time__delimiter {
@@ -345,6 +370,8 @@ h2.react-datepicker__current-month {
   float: right;
   border-left: $datepicker__border;
   width: 85px;
+  background: var(--datepicker__container-background-color);
+  color: var(--datepicker__text-color);
 
   &--with-today-button {
     display: inline;
@@ -357,7 +384,7 @@ h2.react-datepicker__current-month {
 
   .react-datepicker__time {
     position: relative;
-    background: white;
+    background: var(--datepicker__container-background-color);
     border-bottom-right-radius: 0.375em;
 
     .react-datepicker__time-box {
@@ -377,11 +404,34 @@ h2.react-datepicker__current-month {
         width: 100%;
         box-sizing: content-box;
 
+        &::-webkit-scrollbar {
+          width: 8px;
+        }
+
+        &::-webkit-scrollbar-track {
+          background: var(--datepicker__time-container-background-color);
+        }
+
+        &::-webkit-scrollbar-thumb {
+          background: $datepicker__muted-color;
+          border-radius: 4px;
+        }
+
+
         li.react-datepicker__time-list-item {
           height: 30px;
           padding: 5px 10px;
           white-space: nowrap;
 
+          &:not(&--disabled):hover {
+            cursor: pointer;
+          }
+
+          &:not(&--selected):not(&--disabled):hover {
+            color: #000;
+          }
+
+
           &:hover {
             cursor: pointer;
             background-color: $datepicker__background-color;
@@ -455,7 +505,7 @@ h2.react-datepicker__current-month {
 .react-datepicker__day-name,
 .react-datepicker__day,
 .react-datepicker__time-name {
-  color: $datepicker__text-color;
+  color: var(--datepicker__text-color);
   display: inline-block;
   width: $datepicker__item-size;
   line-height: $datepicker__item-size;
@@ -465,6 +515,10 @@ h2.react-datepicker__current-month {
   &--disabled {
     cursor: default;
     color: $datepicker__muted-color;
+
+    &:hover {
+      color: $datepicker__muted-color;
+    }
   }
 }
 
@@ -477,6 +531,7 @@ h2.react-datepicker__current-month {
   &:not([aria-disabled="true"]):hover {
     border-radius: $datepicker__border-radius;
     background-color: $datepicker__background-color;
+    color: var(--datepicker__hover-text-color);
   }
 
   &--today {
@@ -493,14 +548,24 @@ h2.react-datepicker__current-month {
         $datepicker__highlighted-color,
         $lightness: -5%
       );
+      color: #fff;
     }
 
     &-custom-1 {
       color: magenta;
+
+      &:not([aria-disabled="true"]):hover {
+        color: magenta
+      }
+
     }
 
     &-custom-2 {
       color: green;
+
+      &:not([aria-disabled="true"]):hover {
+        color: green
+      }
     }
   }
 
@@ -532,6 +597,7 @@ h2.react-datepicker__current-month {
         $datepicker__holidays-color,
         $lightness: -10%
       );
+      color: #ffff;
     }
 
     &:hover .overlay {
@@ -548,6 +614,7 @@ h2.react-datepicker__current-month {
     color: #fff;
 
     &:not([aria-disabled="true"]):hover {
+      color: #fff;
       background-color: color.adjust(
         $datepicker__selected-color,
         $lightness: -5%
@@ -580,7 +647,7 @@ h2.react-datepicker__current-month {
     .react-datepicker__month--selecting-range &,
     .react-datepicker__year--selecting-range & {
       background-color: $datepicker__background-color;
-      color: $datepicker__text-color;
+      color: var(--datepicker__hover-text-color);
     }
   }
 
@@ -631,6 +698,8 @@ h2.react-datepicker__current-month {
   border: 1px solid transparent;
   border-radius: $datepicker__border-radius;
   position: relative;
+  background: var(--datepicker__container-background-color);
+  color: var(--datepicker__text-color);
 
   &:hover {
     cursor: pointer;
@@ -656,7 +725,7 @@ h2.react-datepicker__current-month {
 .react-datepicker__year-dropdown,
 .react-datepicker__month-dropdown,
 .react-datepicker__month-year-dropdown {
-  background-color: $datepicker__background-color;
+  background-color: var(--datepicker__container-background-color);
   position: absolute;
   width: 50%;
   left: 25%;
@@ -665,6 +734,7 @@ h2.react-datepicker__current-month {
   text-align: center;
   border-radius: $datepicker__border-radius;
   border: $datepicker__border;
+  color: var(--datepicker__text-color);
 
   &:hover {
     cursor: pointer;
@@ -701,6 +771,7 @@ h2.react-datepicker__current-month {
 
   &:hover {
     background-color: $datepicker__muted-color;
+    color: var(--datepicker__hover-text-color);
 
     .react-datepicker__navigation--years-upcoming {
       border-bottom-color: color.adjust(
@@ -763,7 +834,8 @@ h2.react-datepicker__current-month {
 }
 
 .react-datepicker__today-button {
-  background: $datepicker__background-color;
+  background: var(--datepicker__today-button-background-color);
+  color: var(--datepicker__today-button-text-color);
   border-top: $datepicker__border;
   cursor: pointer;
   text-align: center;