From a7bf4dcc3a8c80e15203ae7340e68fcea07f06eb Mon Sep 17 00:00:00 2001
From: Vinay <nikhil.jadhav192@gmail.com>
Date: Sat, 7 Nov 2026 01:14:47 +0530
Subject: [PATCH] docs(material/datepicker): make comparison range
 distinguishable in example

The comparison range in the date range picker comparison example uses
the tertiary container colour, which is barely distinguishable from the
primary range in some M3 themes (e.g. azure).

The calendar renders in an overlay outside of the example component, so
the colour tokens are overridden through a `panelClass` instead of on
the host element. Also switches the example to `ViewEncapsulation.None`
so that the panel class styles apply, like the views selection example.

Fixes #31663
---
 .../date-range-picker-comparison-example.css              | 8 ++++++++
 .../date-range-picker-comparison-example.html             | 4 ++--
 .../date-range-picker-comparison-example.ts               | 3 ++-
 3 files changed, 12 insertions(+), 3 deletions(-)

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({