diff --git a/src/app/features/message-search/SearchFilters.tsx b/src/app/features/message-search/SearchFilters.tsx
index ffdcf321f..5b61fe80b 100644
--- a/src/app/features/message-search/SearchFilters.tsx
+++ b/src/app/features/message-search/SearchFilters.tsx
@@ -25,6 +25,7 @@ import {
   Badge,
   RectCords,
 } from 'folds';
+import { color } from 'folds';
 import { SearchOrderBy } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
 import { useVirtualizer } from '@tanstack/react-virtual';
@@ -372,8 +373,8 @@ function DateRangeButton({ fromTs, toTs, onChange }: DateRangeButtonProps) {
                   max={toDate || undefined}
                   onChange={(e) => handleFrom(e.target.value)}
                   style={{
-                    background: 'var(--bg-surface-variant)',
-                    border: '1px solid var(--border-surface-variant)',
+                    background: color.SurfaceVariant.Container,
+                    border: `1px solid ${color.SurfaceVariant.ContainerLine}`,
                     borderRadius: config.radii.R300,
                     color: 'inherit',
                     fontSize: '0.82rem',
@@ -389,8 +390,8 @@ function DateRangeButton({ fromTs, toTs, onChange }: DateRangeButtonProps) {
                   min={fromDate || undefined}
                   onChange={(e) => handleTo(e.target.value)}
                   style={{
-                    background: 'var(--bg-surface-variant)',
-                    border: '1px solid var(--border-surface-variant)',
+                    background: color.SurfaceVariant.Container,
+                    border: `1px solid ${color.SurfaceVariant.ContainerLine}`,
                     borderRadius: config.radii.R300,
                     color: 'inherit',
                     fontSize: '0.82rem',