⚠️

重要前提

安装AI Skills的关键前提是：必须科学上网，且开启TUN模式，这一点至关重要，直接决定安装能否顺利完成，在此郑重提醒三遍：科学上网，科学上网，科学上网。查看完整安装教程 →

Material Design 3 (Material You) 完整指南：Angular动态色彩与主题实现

material-design-3 by 7spade/black-tortoise

68 周安装量

GitHub

安装命令

npx skills add https://github.com/7spade/black-tortoise --skill material-design-3

UI组件库设计 Angular

🇨🇳中文介绍

Material Design 3 (Material You) 技能

🎯 目的

本技能提供关于 Material Design 3（也称为 Material You）的全面指导，这是 Google 最新的设计系统，强调为 Angular 应用程序提供个性化、可访问性和现代 UI 模式。

📦 什么是 Material Design 3？

Material Design 3 是 Google 最新的设计语言，引入了：

动态色彩：基于用户偏好的自适应调色板
增强的可访问性：默认符合 WCAG 2.1 AA 标准
灵活的主题化：基于令牌的主题系统
现代组件：具有更好自定义性的更新组件设计
个性化：适应用户偏好的以用户为中心的设计

🎨 何时使用此技能

在以下情况下使用 Material Design 3 指导：

使用 Material Design 实现新的 Angular 应用程序时
从 Material Design 2 迁移到 Material Design 3 时
使用 Material Design 3 令牌创建自定义主题时
实现动态色彩主题化时
构建可访问的现代 UI 组件时
遵循 Material You 设计原则时
使用 Material Design 3 排版和间距系统时

🛠️ 核心概念

1. 色彩系统

Material Design 3 引入了复杂的色彩系统：

色彩角色：

主色：用于突出操作的主要品牌色
辅色：用于次要操作的辅助色
第三色：用于高亮和对比的强调色
错误色：用于错误状态的色彩

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

📚 在 Angular 中的实现

设置 Material Design 3 主题

// 使用 M3 令牌定义您的主题
@use '@angular/material' as mat;

// 包含核心 Material Design 3 样式
@include mat.core();

// 定义您的调色板
$my-primary: mat.define-palette(mat.$azure-palette);
$my-accent: mat.define-palette(mat.$blue-palette);
$my-warn: mat.define-palette(mat.$red-palette);

// 创建主题
$my-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $my-primary,
    tertiary: $my-accent,
  ),
  typography: (
    brand-family: 'Roboto',
    bold-weight: 700
  ),
  density: (
    scale: 0
  )
));

// 应用主题
@include mat.all-component-themes($my-theme);

// 深色主题变体
$my-dark-theme: mat.define-theme((
  color: (
    theme-type: dark,
    primary: $my-primary,
    tertiary: $my-accent,
  )
));

// 在需要时应用深色主题
.dark-theme {
  @include mat.all-component-colors($my-dark-theme);
}

// 在您的组件中访问主题颜色
.my-component {
  background-color: var(--mat-sys-primary);
  color: var(--mat-sys-on-primary);
  
  &:hover {
    background-color: var(--mat-sys-primary-container);
        color: var(--mat-sys-on-primary-container);
  }
}

// 表面变体
.surface {
  background-color: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
}

.surface-container {
  background-color: var(--mat-sys-surface-container);
}

// 使用排版令牌
.heading {
  font: var(--mat-sys-headline-large);
}

.body-text {
  font: var(--mat-sys-body-medium);
}

.label {
  font: var(--mat-sys-label-small);
}

海拔高度和阴影

.elevated-card {
  // 级别 1 海拔高度
  box-shadow: var(--mat-sys-level1);
  
  &:hover {
    // 悬停时的级别 2 海拔高度
    box-shadow: var(--mat-sys-level2);
  }
}

使用设计令牌而不是硬编码值
在组件之间保持一致的色彩使用
遵循 Material Design 3 色彩角色指南

确保文本的最小对比度为 4.5:1
使用语义色彩角色（primary、secondary、error）
支持浅色和深色主题
提供足够的触摸目标尺寸（最小 48x48dp）

使用 Material Design 3 断点
适应不同屏幕尺寸的布局
在移动设备、平板电脑和桌面视口上进行测试

// 示例：Angular 中的动态主题切换
export class ThemeService {
  private isDark = signal(false);
  
  toggleTheme() {
    this.isDark.update(dark => !dark);
    document.body.classList.toggle('dark-theme', this.isDark());
  }
  
  applyCustomColors(sourceColor: string) {
    // 从源色彩生成 M3 调色板
    const palette = this.generateM3Palette(sourceColor);
    this.applyCSSVariables(palette);
  }
}

使用 M3 令牌的自定义组件

@Component({
  selector: 'app-custom-button',
  template: `
    <button class="m3-button" [class.filled]="variant === 'filled'">
      <ng-content></ng-content>
    </button>
  `,
  styles: [`
    .m3-button {
      padding: 10px 24px;
      border-radius: var(--mat-sys-corner-full);
      font: var(--mat-sys-label-large);
      border: none;
      cursor: pointer;
      
      &.filled {
        background-color: var(--mat-sys-primary);
        color: var(--mat-sys-on-primary);
        
        &:hover {
          background-color: var(--mat-sys-primary-container);
          color: var(--mat-sys-on-primary-container);
        }
      }
      
      &.outlined {
        background-color: transparent;
        border: 1px solid var(--mat-sys-outline);
        color: var(--mat-sys-primary);
      }
    }
  `]
})
export class CustomButtonComponent {
  @Input() variant: 'filled' | 'outlined' = 'filled';
}

问题	解决方案
色彩未应用	确保首先调用 `@include mat.core()`
主题令牌未定义	检查 Angular Material 版本（需要 v15+）
深色主题不工作	验证 `.dark-theme` 类是否应用于父元素
自定义颜色不工作	使用带有正确 Material 调色板的 `define-palette()`
排版未加载	在 index.html 中包含 Material Design 字体（Roboto）
可访问性对比度问题	使用 Material 内置的色彩角色而非自定义颜色

💡 从 Material Design 2 迁移

从 M2 迁移到 M3 时的关键变化：

将调色板替换为主题类型方法
更新组件样式以使用设计令牌
将自定义主题迁移到新的主题化 API
将排版从 mat-typography-level 更新为 M3 令牌
将海拔高度混合替换为 CSS 自定义属性
使用新的对比度要求测试可访问性

📂 推荐放置位置

项目级技能：

/.github/skills/material-design-3/skill.md

个人全局技能：

~/.github/skills/material-design-3/skill.md

当提到 Material Design 3 主题时，Copilot 将自动加载此技能。

🇺🇸English

Material Design 3 (Material You) Skill

🎯 Purpose

This skill provides comprehensive guidance on Material Design 3 (also known as Material You), Google's latest design system that emphasizes personalization, accessibility, and modern UI patterns for Angular applications.

📦 What is Material Design 3?

Material Design 3 is Google's latest design language that introduces:

Dynamic Color : Adaptive color palettes based on user preferences
Enhanced Accessibility : WCAG 2.1 AA compliance by default
Flexible Theming : Token-based theming system
Modern Components : Updated component designs with better customization
Personalization : User-centric design that adapts to preferences

🎨 When to Use This Skill

Use Material Design 3 guidance when:

Implementing a new Angular application with Material Design
Migrating from Material Design 2 to Material Design 3
Creating custom themes using Material Design 3 tokens
Implementing dynamic color theming
Building accessible, modern UI components
Following Material You design principles
Working with Material Design 3 typography and spacing systems

🛠️ Core Concepts

1. Color System

Material Design 3 introduces a sophisticated color system:

Color Roles:

Primary : Main brand color for prominent actions
Secondary : Supporting color for less prominent actions
Tertiary : Accent color for highlights and contrasts
Error : Color for error states
Surface : Background colors for components
On-colors : Contrasting text/icon colors (on-primary, on-secondary, etc.)

Color Variants:

Container colors (e.g., primary-container)
On-container colors (e.g., on-primary-container)
Surface variants (surface-dim, surface-bright, surface-container)

2. Dynamic Color

Material Design 3's signature feature:

Generate color schemes from source colors
Support both light and dark themes
Automatic contrast adjustments
System-level color extraction (from wallpaper on supported platforms)

3. Typography

Five typography scales:

Display : Largest text (display-large, display-medium, display-small)
Headline : Section headers (headline-large to headline-small)
Title : Subsection titles (title-large to title-small)
Body : Main content (body-large, body-medium, body-small)
Label : UI labels (label-large to label-small)

4. Elevation

Three elevation strategies:

Shadow : Traditional elevation with shadows
Overlay : Tonal surface overlays
Combined : Shadow + overlay for enhanced depth perception

5. Shape

Rounded corner system with four scales:

None : 0dp (sharp corners)
Extra Small : 4dp
Small : 8dp
Medium : 12dp
Large : 16dp
Extra Large : 28dp

📚 Implementation in Angular

Setting Up Material Design 3 Theme

// Define your theme using M3 tokens
@use '@angular/material' as mat;

// Include core Material Design 3 styles
@include mat.core();

// Define your color palette
$my-primary: mat.define-palette(mat.$azure-palette);
$my-accent: mat.define-palette(mat.$blue-palette);
$my-warn: mat.define-palette(mat.$red-palette);

// Create the theme
$my-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $my-primary,
    tertiary: $my-accent,
  ),
  typography: (
    brand-family: 'Roboto',
    bold-weight: 700
  ),
  density: (
    scale: 0
  )
));

// Apply the theme
@include mat.all-component-themes($my-theme);

// Dark theme variant
$my-dark-theme: mat.define-theme((
  color: (
    theme-type: dark,
    primary: $my-primary,
    tertiary: $my-accent,
  )
));

// Apply dark theme when needed
.dark-theme {
  @include mat.all-component-colors($my-dark-theme);
}

Using Color Tokens

// Access theme colors in your components
.my-component {
  background-color: var(--mat-sys-primary);
  color: var(--mat-sys-on-primary);
  
  &:hover {
    background-color: var(--mat-sys-primary-container);
    color: var(--mat-sys-on-primary-container);
  }
}

// Surface variants
.surface {
  background-color: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
}

.surface-container {
  background-color: var(--mat-sys-surface-container);
}

Typography Usage

// Using typography tokens
.heading {
  font: var(--mat-sys-headline-large);
}

.body-text {
  font: var(--mat-sys-body-medium);
}

.label {
  font: var(--mat-sys-label-small);
}

Elevation and Shadows

.elevated-card {
  // Level 1 elevation
  box-shadow: var(--mat-sys-level1);
  
  &:hover {
    // Level 2 elevation on hover
    box-shadow: var(--mat-sys-level2);
  }
}

🎯 Best Practices

1. Theme Consistency

Use design tokens instead of hardcoded values
Maintain consistent color usage across components
Follow Material Design 3 color role guidelines

2. Accessibility

Ensure minimum 4.5:1 contrast ratio for text
Use semantic color roles (primary, secondary, error)
Support both light and dark themes
Provide sufficient touch target sizes (48x48dp minimum)

3. Responsive Design

Use Material Design 3 breakpoints
Adapt layouts for different screen sizes
Test on mobile, tablet, and desktop viewports

4. Dynamic Theming

// Example: Dynamic theme switching in Angular
export class ThemeService {
  private isDark = signal(false);
  
  toggleTheme() {
    this.isDark.update(dark => !dark);
    document.body.classList.toggle('dark-theme', this.isDark());
  }
  
  applyCustomColors(sourceColor: string) {
    // Generate M3 palette from source color
    const palette = this.generateM3Palette(sourceColor);
    this.applyCSSVariables(palette);
  }
}

🔧 Common Patterns

Custom Component with M3 Tokens

@Component({
  selector: 'app-custom-button',
  template: `
    <button class="m3-button" [class.filled]="variant === 'filled'">
      <ng-content></ng-content>
    </button>
  `,
  styles: [`
    .m3-button {
      padding: 10px 24px;
      border-radius: var(--mat-sys-corner-full);
      font: var(--mat-sys-label-large);
      border: none;
      cursor: pointer;
      
      &.filled {
        background-color: var(--mat-sys-primary);
        color: var(--mat-sys-on-primary);
        
        &:hover {
          background-color: var(--mat-sys-primary-container);
          color: var(--mat-sys-on-primary-container);
        }
      }
      
      &.outlined {
        background-color: transparent;
        border: 1px solid var(--mat-sys-outline);
        color: var(--mat-sys-primary);
      }
    }
  `]
})
export class CustomButtonComponent {
  @Input() variant: 'filled' | 'outlined' = 'filled';
}

🐛 Troubleshooting

Issue	Solution
Colors not applying	Ensure `@include mat.core()` is called first
Theme tokens undefined	Check Angular Material version (requires v15+)
Dark theme not working	Verify `.dark-theme` class is applied to parent element
Custom colors not working	Use `define-palette()` with proper Material color palette
Typography not loading	Include Material Design fonts (Roboto) in index.html
Accessibility contrast issues	Use Material's built-in color roles instead of custom colors

📖 References

💡 Migration from Material Design 2

Key changes when migrating from M2 to M3:

Replace color palette with theme-type approach
Update component styles to use design tokens
Migrate custom themes to new theming API
Update typography from mat-typography-level to M3 tokens
Replace elevation mixins with CSS custom properties
Test accessibility with new contrast requirements

📂 Recommended Placement

Project-level skill:

/.github/skills/material-design-3/skill.md

Personal global skill:

~/.github/skills/material-design-3/skill.md

Copilot will automatically load this skill when Material Design 3 topics are mentioned.

Weekly Installs

Repository

7spade/black-tortoise

First Seen

Jan 26, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode50

gemini-cli48

codex47

github-copilot43

claude-code42

amp30

前端设计技能指南：避免AI垃圾美学，打造独特生产级界面

53,200 周安装