diff --git a/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.html b/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.html
index 5815b1c9b0..1363c2d52f 100644
--- a/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.html
+++ b/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.html
@@ -10,7 +10,7 @@
                 (focusout)="onChangedHandler($event, from)"
                 data-automation-id="date-range-from-input">
         <mat-datepicker-toggle matSuffix [for]="fromDatepicker" data-automation-id="date-range-from-date-toggle"></mat-datepicker-toggle>
-        <mat-datepicker #fromDatepicker></mat-datepicker>
+        <mat-datepicker #fromDatepicker color="accent"></mat-datepicker>
         <mat-error *ngIf="from.invalid" data-automation-id="date-range-from-error">
             {{ getFromValidationMessage() | translate: { requiredFormat: datePickerDateFormat } }}
         </mat-error>
@@ -28,7 +28,7 @@
                 (focusout)="onChangedHandler($event, to)"
                 data-automation-id="date-range-to-input">
         <mat-datepicker-toggle matSuffix [for]="toDatepicker" data-automation-id="date-range-to-date-toggle"></mat-datepicker-toggle>
-        <mat-datepicker #toDatepicker></mat-datepicker>
+        <mat-datepicker #toDatepicker color="accent"></mat-datepicker>
         <mat-error *ngIf="to.invalid" data-automation-id="date-range-to-error">
             {{ getToValidationMessage() | translate: { requiredFormat: datePickerDateFormat } }}
         </mat-error>