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..650f78f9dcc3 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,11 @@
 .example-form-field {
   margin: 0 8px 16px 0;
 }
+
+/* The calendar renders in an overlay outside of this component, so the override has to target
+   the panel class. It gives the comparison range a colour that is clearly different from the
+   primary range, which the default M3 themes don't always do. */
+.example-comparison-panel {
+  --mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.3);
+  --mat-datepicker-calendar-date-in-overlap-range-state-background-color: rgba(249, 171, 0, 0.6);
+}
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..cbd99bbfdd1e 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,7 @@
   </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="example-comparison-panel"></mat-date-range-picker>
 </mat-form-field>
 
 <mat-form-field class="example-form-field">
@@ -25,5 +25,5 @@
   </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="example-comparison-panel"></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 926008117101..45a90ea60c01 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 {Component} from '@angular/core';
+import {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';
@@ -15,6 +15,7 @@ const year = today.getFullYear();
   styleUrl: 'date-range-picker-comparison-example.css',
   providers: [provideNativeDateAdapter()],
   imports: [MatFormFieldModule, MatDatepickerModule, FormsModule, ReactiveFormsModule],
+  encapsulation: ViewEncapsulation.None,
 })
 export class DateRangePickerComparisonExample {
   readonly campaignOne = new FormGroup({