diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 60305930ae..caeb3bd225 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -513,6 +513,12 @@
     --user-group-popover-horizontal-padding: 0.6666em; /* 10px at 15px/1em */
     --user-group-popover-icon-text-gap: 0.3125em; /* 5px at 16px/1em */
 
+    /*
+    This isn't scaled with font-size because the flatpickr is a third
+    party component that doesn't scale with font size.
+    */
+    --flatpickr-confirm-button-font-size: 18px;
+
     /*
     Width to be reserved for document scrollbar when scrolling is disabled.
     Using `scrollbar-gutter` would be more appropriate but doesn't has wide
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 2bc0aea683..a02ecf0901 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -1479,7 +1479,7 @@ div.toggle_resolve_topic_spinner .loading_indicator_spinner {
     .flatpickr-confirm {
         color: hsl(0deg 0% 100%);
         background-color: hsl(213deg 90% 65%);
-        font-size: 18px;
+        font-size: var(--flatpickr-confirm-button-font-size);
         font-weight: 600;
     }