Angular Material调色板色调的影响及浅/深色调的使用场景问询

Great question! Let’s break down how those light (50) and dark (900) tones in your Angular Material palette work, how to use them manually, and when they’re most useful.

Angular Material leverages these secondary palette values automatically in several built-in component behaviors:

• Lighter tones (your 50 value)
  • Hover states: Many interactive components like mat-button or mat-icon-button apply a lighter shade when the user hovers, providing subtle visual feedback without overwhelming the default color.
  • Soft backgrounds: Elements like mat-card or mat-sidenav might use lighter tones for their background in some theme configurations, creating a gentle contrast against foreground content.
  • High-contrast text scenarios: If you’re using a primary color as a background, the lighter variant ensures text (typically dark) remains readable without harsh contrast.
• Darker tones (your 900 value)
  • Active/pressed states: When a button is clicked or a toggle is activated, Angular Material often switches to the darker shade to clearly signal the action was registered.
  • Emphasized elements: Components like mat-chip (when selected) or mat-progress-bar fill use darker tones to draw attention to key UI elements.
  • Light-background text: Using the darker primary tone for text on a light background guarantees enough contrast for accessibility and readability.

You’re not limited to Angular Material’s default uses—here’s how to tap into these shades directly:

1. Reference them in component styles
   Use map-get to pull the lighter/darker values from your custom palette in your component’s SCSS:

   // Apply lighter primary as a background
   .soft-primary-bg {
     background-color: map-get($hpsapf-primary, lighter);
     padding: 1rem;
   }
   
   // Use darker primary for text
   .emphasized-text {
     color: map-get($hpsapf-primary, darker);
     font-weight: 500;
   }
   

2. Override component default states
   Want to change how a component uses these tones? Override its styles in your theme file:

   $hpsapf-theme: mat-light-theme($hpsapf-primary, $hpsapf-accent, $hpsapf-warn);
   
   // Customize button hover to use a specific lighter shade
   .mat-button:hover {
     background-color: map-get($hpsapf-primary, lighter);
   }
   

3. Adjust the palette itself
   If the default 50/900 values don’t fit your design, specify different tones when creating your palette:

   // Use 100 as the lighter shade and 800 as the darker shade instead
   $hpsapf-primary: mat-palette($mat-light-blue, 400, 100, 800);
   

• Lighter tones shine when you need:
  • A subtle background for secondary content (like sidebar widgets or informational callouts)
  • Hover states that feel gentle rather than jarring
  • A way to reduce color intensity in bright, long-form UIs to avoid eye strain
• Darker tones are ideal for:
  • Signaling critical actions (like a "Submit" button’s pressed state)
  • Highlighting selected items in lists or chips
  • Ensuring text remains readable on light backgrounds, especially for accessibility compliance

内容的提问来源于stack exchange，提问作者Martin Jaskulla