From e680d133a5533851c84b492595e692111eec6bd5 Mon Sep 17 00:00:00 2001
From: Baptiste Arnaud <contact@baptiste-arnaud.fr>
Date: Fri, 10 Mar 2023 09:40:35 +0100
Subject: [PATCH] :bug: (date) Fix date picker UI when editor is in dark mode

Closes #368
---
 packages/js/src/assets/index.css                            | 6 ++++++
 .../src/features/blocks/inputs/date/components/DateForm.tsx | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/js/src/assets/index.css b/packages/js/src/assets/index.css
index 5423a4b7f..ad98fd9f2 100644
--- a/packages/js/src/assets/index.css
+++ b/packages/js/src/assets/index.css
@@ -227,3 +227,9 @@ textarea {
   color: var(--typebot-input-color);
   background-color: var(--typebot-input-bg-color);
 }
+
+.typebot-date-input {
+  color-scheme: light;
+  color: var(--typebot-input-color);
+  background-color: var(--typebot-input-bg-color);
+}
diff --git a/packages/js/src/features/blocks/inputs/date/components/DateForm.tsx b/packages/js/src/features/blocks/inputs/date/components/DateForm.tsx
index 8b2520943..615346044 100644
--- a/packages/js/src/features/blocks/inputs/date/components/DateForm.tsx
+++ b/packages/js/src/features/blocks/inputs/date/components/DateForm.tsx
@@ -44,7 +44,7 @@ export const DateForm = (props: Props) => {
                 </p>
               )}
               <input
-                class="focus:outline-none flex-1 w-full text-input"
+                class="focus:outline-none flex-1 w-full text-input typebot-date-input"
                 style={{
                   'min-height': '32px',
                   'min-width': '100px',
@@ -68,7 +68,7 @@ export const DateForm = (props: Props) => {
                   </p>
                 )}
                 <input
-                  class="focus:outline-none flex-1 w-full text-input ml-2"
+                  class="focus:outline-none flex-1 w-full text-input ml-2 typebot-date-input"
                   style={{
                     'min-height': '32px',
                     'min-width': '100px',