angular/components

Datepicker comparison ranges uses substandard colors

Open

#31663 opened on Aug 6, 2025

View on GitHub
 (10 comments) (0 reactions) (0 assignees)TypeScript (24,044 stars) (6,650 forks)batch import
P3area: material/datepickerarea: themingdocsgood first issuehelp wanted

Description

Describe the problem that you experienced

Up until V17 (excl.) the Datepicker Docs showed clear distinctions between the primary and accent colors, which made the example at the "Date range picker comparison ranges" section valuable. However, starting with the V17 docs (up until and including the current version), Angular Material started using Material 3 and some of the default themes (especially Azure & Blue) now don't show much of a color distinction (if at all), making the example barely useful with that respective color scheme.

Maybe it gets better with Material 3 Expressive, but I don't have particularly high hopes. Also, older versions will always have a docs page, still.

Enter the URL of the topic with the problem

https://material.angular.dev/components/datepicker/overview

Describe what you were looking for in the documentation

No response

Describe the actions that led you to experience the problem

No response

Describe what you want to experience that would fix the problem

More distinction between primary and accent colors, or actually custom defined colors for this example.

Add a screenshot if that helps illustrate the problem

If this problem caused an exception or error, please paste it here

If the problem is browser-specific, please specify the device, OS, browser, and version

Provide any additional information here in as much as detail as you can

Contributor guide

Tech stack
typescripthtmlcss
Domain
documentationfrontend
Issue type
documentation
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Angular Material themingCSSbasic Angular knowledge
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85
Research direction
The issue is about the Datepicker overview documentation example at https://material.angular.dev/components/datepicker/overview. The user reports that primary and accent colors are not sufficiently distinct in Material 3 themes. To fix, locate the example source file in the angular/material.angular.dev repository (likely in a StackBlitz or embedded component). The solution involves overriding the theme palette or using custom CSS variables to ensure clear color distinction. Review the Material 3 theming guide and the existing example code to determine the appropriate approach. No linked PRs or assignments exist, so work can begin independently.