From 5d6c69b8667a63b3f85535b0309b0c0097444a31 Mon Sep 17 00:00:00 2001
From: Jonas Holtorf <jonas@coderei.dev>
Date: Thu, 18 Sep 2025 13:56:58 +0200
Subject: [PATCH] feat: add theme option for today in datepicker

---
 packages/ui/src/components/Datepicker/Views/Days.tsx | 4 ++++
 packages/ui/src/components/Datepicker/helpers.ts     | 5 +++++
 packages/ui/src/components/Datepicker/theme.ts       | 1 +
 3 files changed, 10 insertions(+)

diff --git a/packages/ui/src/components/Datepicker/Views/Days.tsx b/packages/ui/src/components/Datepicker/Views/Days.tsx
index 007695cbe2..f91a0843fa 100644
--- a/packages/ui/src/components/Datepicker/Views/Days.tsx
+++ b/packages/ui/src/components/Datepicker/Views/Days.tsx
@@ -9,6 +9,7 @@ import {
   getWeekDays,
   isDateEqual,
   isDateInRange,
+  isDateToday,
   Views,
 } from "../helpers";
 
@@ -23,6 +24,7 @@ export interface DatepickerViewsDaysTheme {
       base: string;
       selected: string;
       disabled: string;
+      today: string;
     };
   };
 }
@@ -62,6 +64,7 @@ export function DatepickerViewsDays() {
           const isSelected = selectedDate && isDateEqual(selectedDate, currentDate);
           const isDisabled =
             !isDateInRange(currentDate, minDate, maxDate) || (filterDate && !filterDate(currentDate, Views.Days));
+          const isToday = isDateToday(currentDate);
 
           return (
             <button
@@ -70,6 +73,7 @@ export function DatepickerViewsDays() {
               type="button"
               className={twMerge(
                 theme.items.item.base,
+                isToday && theme.items.item.today,
                 isSelected && theme.items.item.selected,
                 isDisabled && theme.items.item.disabled,
               )}
diff --git a/packages/ui/src/components/Datepicker/helpers.ts b/packages/ui/src/components/Datepicker/helpers.ts
index 1195b256c8..cadad87b88 100644
--- a/packages/ui/src/components/Datepicker/helpers.ts
+++ b/packages/ui/src/components/Datepicker/helpers.ts
@@ -44,6 +44,11 @@ export function isDateEqual(date: Date, selectedDate: Date): boolean {
   return date.getTime() === selectedDate.getTime();
 }
 
+export function isDateToday(date: Date): boolean {
+  const today = new Date();
+  return isDateEqual(date, today);
+}
+
 export function isMonthEqual(date: Date, selectedDate: Date): boolean {
   return date.getMonth() === selectedDate.getMonth();
 }
diff --git a/packages/ui/src/components/Datepicker/theme.ts b/packages/ui/src/components/Datepicker/theme.ts
index 540a377a66..e3394257be 100644
--- a/packages/ui/src/components/Datepicker/theme.ts
+++ b/packages/ui/src/components/Datepicker/theme.ts
@@ -49,6 +49,7 @@ export const datePickerTheme = createTheme<DatepickerTheme>({
           base: "block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600",
           selected: "bg-primary-700 text-white hover:bg-primary-600",
           disabled: "text-gray-500",
+          today: "",
         },
       },
     },