diff --git a/lib/components/form/date-time-button.tsx b/lib/components/form/date-time-button.tsx
index 3d6065c3e..3a0bdf1a7 100644
--- a/lib/components/form/date-time-button.tsx
+++ b/lib/components/form/date-time-button.tsx
@@ -25,8 +25,10 @@ const ButtonWrapper = styled.span`
   position: relative;
 
   & > button {
+    background-color: var(--main-base-color, white);
     border-radius: 5px;
     border: none;
+    color: var(--main-color, white);
     cursor: pointer;
     font-size: 12px;
     height: ${buttonPixels}px;
diff --git a/lib/components/form/styled.ts b/lib/components/form/styled.ts
index 28938a89c..1538bdc93 100644
--- a/lib/components/form/styled.ts
+++ b/lib/components/form/styled.ts
@@ -24,9 +24,10 @@ const commonButtonCss = css`
   user-select: none;
 
   &.active {
-    background-color: rgb(173, 216, 230);
+    background-color: var(--main-base-color, rgb(173, 216, 230));
     border: 2px solid rgb(0, 0, 0);
     box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    color: var(--main-color, black);
     font-weight: 600;
   }
 `