Class ThemeDemo

src/dev-app/theme/theme-demo.ts:53–166

  imports: [MatCardModule, MatExpansionModule, MatIconModule, ThemeDemoColors],
})
export class ThemeDemo {
  state = getAppState();

  alternativeThemeColors: Color[] = [
    {
      name: 'Primary Container',
      background: '--mat-sys-primary-container',
      text: '--mat-sys-on-primary-container',
    },
    {
      name: 'Secondary',
      background: '--mat-sys-secondary',
      text: '--mat-sys-on-secondary',
    },
    {
      name: 'Secondary Container',
      background: '--mat-sys-secondary-container',
      text: '--mat-sys-on-secondary-container',
    },
    {
      name: 'Tertiary',
      background: '--mat-sys-tertiary',
      text: '--mat-sys-on-tertiary',
    },
    {
      name: 'Tertiary Container',
      background: '--mat-sys-tertiary-container',
      text: '--mat-sys-on-tertiary-container',
    },
    {
      name: 'Error Container',
      background: '--mat-sys-error-container',
      text: '--mat-sys-on-error-container',
    },
  ];

  surfaceColors: Color[] = [
    {
      name: 'Surface Dim',
      background: '--mat-sys-surface-dim',
      text: '--mat-sys-on-surface',
      hideText: true,
    },
    {
      name: 'Surface Bright',
      background: '--mat-sys-surface-bright',
      text: '--mat-sys-on-surface',
      hideText: true,
    },
    {
      name: 'Surface Container Lowest',
      background: '--mat-sys-surface-container-lowest',
      text: '--mat-sys-on-surface',
      hideText: true,
    },
    {
      name: 'Surface Container Low',
      background: '--mat-sys-surface-container-low',