diff --git a/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.css b/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.css
index 4737a7dea96a..081080da6f31 100644
--- a/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.css
+++ b/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.css
@@ -1,3 +1,15 @@
 .example-form-field {
   margin: 0 8px 16px 0;
 }
+
+.date-range-comparison-calendar {
+  --mat-datepicker-calendar-date-in-range-state-background-color:
+      color-mix(in srgb, var(--mat-sys-primary) 28%, transparent);
+  --mat-datepicker-calendar-date-in-comparison-range-state-background-color:
+      color-mix(in srgb, var(--mat-sys-error) 32%, transparent);
+  --mat-datepicker-calendar-date-in-overlap-range-state-background-color:
+      color-mix(in srgb, var(--mat-sys-error) 55%, transparent);
+  --mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color:
+      var(--mat-sys-error);
+}
+
diff --git a/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.html b/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.html
index 5bf58a063a53..1decae9795c4 100644
--- a/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.html
+++ b/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.html
@@ -10,7 +10,8 @@
   </mat-date-range-input>
   <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
   <mat-datepicker-toggle matIconSuffix [for]="campaignOnePicker"></mat-datepicker-toggle>
-  <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>
+  <mat-date-range-picker #campaignOnePicker panelClass="date-range-comparison-calendar">
+  </mat-date-range-picker>
 </mat-form-field>
 
 <mat-form-field class="example-form-field">
@@ -25,5 +26,6 @@
   </mat-date-range-input>
   <mat-datepicker-toggle matIconSuffix [for]="campaignTwoPicker"></mat-datepicker-toggle>
   <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
-  <mat-date-range-picker #campaignTwoPicker></mat-date-range-picker>
+  <mat-date-range-picker #campaignTwoPicker panelClass="date-range-comparison-calendar">
+  </mat-date-range-picker>
 </mat-form-field>
diff --git a/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.ts b/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.ts
index 13de181754ee..963e69c19110 100644
--- a/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.ts
+++ b/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {provideNativeDateAdapter} from '@angular/material/core';
 import {MatDatepickerModule} from '@angular/material/datepicker';
@@ -13,6 +13,7 @@ const year = today.getFullYear();
   selector: 'date-range-picker-comparison-example',
   templateUrl: 'date-range-picker-comparison-example.html',
   styleUrl: 'date-range-picker-comparison-example.css',
+  encapsulation: ViewEncapsulation.None,
   providers: [provideNativeDateAdapter()],
   imports: [MatFormFieldModule, MatDatepickerModule, FormsModule, ReactiveFormsModule],
   changeDetection: ChangeDetectionStrategy.OnPush,