Как определить 6 палитр в Angular Material 3?

У меня есть проект Angular Material 3, и мне нужно определить 6 пользовательских палитр:

primary
secondary
tertiary
error
neutral
neutral-variant

Но, согласно документации, при определении темы в разделе color мы можем определить только 2 варианта: primary и tertiary.

Как добавить в тему все 6 палитр?

🤔 А знаете ли вы, что...
Angular Universal позволяет рендерить веб-приложение на сервере для улучшения SEO и производительности.


1
50
2

Ответы:

Решено

Для secondary, etc нет входных данных. Вы можете проверить исходный код

Я бы предложил приведенный ниже подход к оформлению вашего кода.

Сначала создайте собственную тему m3, потом вам зададут кучу вопросов.

ng generate @angular/material:m3-theme

Ответив на этот вопрос, вы получите файл, содержащий определения цветов для каждого из нужных вам типов. Оформите их в соответствии с вашими требованиями. Это будет выглядеть так, как показано ниже.

// This file was generated by running 'ng generate @angular/material:m3-theme'.
// Proceed with caution if making changes to this file.

@use 'sass:map';
@use '@angular/material' as mat;

// Note: Color palettes are generated from primary: #eeeeee, secondary: #fefefe, tertiary: #000000, neutral: #ffffff
$_palettes: (
  primary: (
    0: #000000,
    10: #001f24,
    20: #00363d,
    25: #00424a,
    30: #004f58,
    35: #005b66,
    40: #006874,
    50: #008391,
    60: #00a0b0,
    70: #22bccf,
    80: #4fd8eb,
    90: #97f0ff,
    95: #d0f8ff,
    98: #edfcff,
    99: #f6feff,
    100: #ffffff,
  ),
  secondary: (
    0: #000000,
    10: #001f24,
    20: #00363d,
    25: #00424a,
    30: #004f58,
    35: #005b66,
    40: #006874,
    50: #008391,
    60: #00a0b0,
    70: #22bccf,
    80: #4fd8eb,
    90: #97f0ff,
    95: #d0f8ff,
    98: #edfcff,
    99: #f6feff,
    100: #ffffff,
  ),
  tertiary: (
    0: #000000,
    10: #3e001d,
    20: #5e1133,
    25: #6c1d3e,
    30: #7b2949,
    35: #893455,
    40: #984061,
    50: #b6587a,
    60: #d57193,
    70: #f48bae,
    80: #ffb1c8,
    90: #ffd9e2,
    95: #ffecf0,
    98: #fff8f8,
    99: #fffbff,
    100: #ffffff,
  ),
  neutral: (
    0: #000000,
    4: #000c0e,
    6: #001316,
    10: #001f24,
    12: #002429,
    17: #002f35,
    20: #00363d,
    22: #003b42,
    24: #004047,
    25: #00424a,
    30: #004f58,
    35: #005b66,
    40: #006874,
    50: #008391,
    60: #00a0b0,
    70: #22bccf,
    80: #4fd8eb,
    87: #81e9f9,
    90: #97f0ff,
    92: #aef3ff,
    94: #c5f6ff,
    95: #d0f8ff,
    96: #daf9ff,
    98: #edfcff,
    99: #f6feff,
    100: #ffffff,
  ),
  neutral-variant: (
    0: #000000,
    10: #141d1f,
    20: #293234,
    25: #343d3f,
    30: #3f484a,
    35: #4b5456,
    40: #576062,
    50: #6f797a,
    60: #899294,
    70: #a3adaf,
    80: #bfc8ca,
    90: #dbe4e6,
    95: #e9f2f4,
    98: #f2fbfd,
    99: #f6feff,
    100: #ffffff,
  ),
  error: (
    0: #000000,
    10: #410002,
    20: #690005,
    25: #7e0007,
    30: #93000a,
    35: #a80710,
    40: #ba1a1a,
    50: #de3730,
    60: #ff5449,
    70: #ff897d,
    80: #ffb4ab,
    90: #ffdad6,
    95: #ffedea,
    98: #fff8f7,
    99: #fffbff,
    100: #ffffff,
  ),
);

$_rest: (
  secondary: map.get($_palettes, secondary),
  neutral: map.get($_palettes, neutral),
  neutral-variant: map.get($_palettes,  neutral-variant),
  error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);

$light-theme: mat.define-theme((
  color: (
    theme-type: light,
    primary: $_primary,
    tertiary: $_tertiary,
  ),
));

Затем, наконец, примените эту тему к своему проекту, и она будет применена с использованием приведенного ниже кода, поэтому вы можете заметить, что некоторые типы палитр третичных стилей отбрасываются. Поэтому нет необходимости это уточнять.

/// Defines an Angular Material theme object with color settings.
/// @param {Map} $config The color configuration
/// @return {Map} A theme object
@function define-colors($config: ()) {
  $err: config-validation.validate-color-config($config);
  @if $err {
    @error $err;
  }

  $type: map.get($config, theme-type) or light;
  $primary: map.get($config, primary) or palettes.$violet-palette;
  $tertiary: map.get($config, tertiary) or $primary;
  $system-variables-prefix: map.get($config, system-variables-prefix) or sys;
  sass-utils.$use-system-color-variables: map.get($config, use-system-variables) or false;

  @return (
    $internals: (
      theme-version: $theme-version,
      theme-type: $type,
      palettes: (
        primary: map.remove($primary, neutral, neutral-variant, secondary),
        secondary: map.get($primary, secondary),
        tertiary: map.remove($tertiary, neutral, neutral-variant, secondary),
        neutral: map.get($primary, neutral),
        neutral-variant: map.get($primary, neutral-variant),
        error: map.get($primary, error),
      ),
      color-tokens: m3-tokens.generate-color-tokens(
          $type, $primary, $tertiary, map.get($primary, error), $system-variables-prefix)
    )
  );
}

Я думаю, что есть другой способ сделать что-то. Вы можете использовать createTheme из материала angular, чтобы создать тему и использовать ее.

Вы можете сделать это примерно так:

import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { provideAnimations } from '@angular/platform-browser/animations';
import {
  provideThemeManager,
  defineColorPalette,
  createTheme,
  ThemePalette,
} from '@angular/material/theming';

// Define your custom color palettes
const primaryPalette = defineColorPalette('#006A6A');
const secondaryPalette = defineColorPalette('#4A6363');
const tertiaryPalette = defineColorPalette('#4B6079');
const errorPalette = defineColorPalette('#BA1A1A');
const neutralPalette = defineColorPalette('#191C1C');
const neutralVariantPalette = defineColorPalette('#3F4949');

// Create your custom theme
const customTheme = createTheme({
  density: 0,
  colorScheme: 'light',
  colors: {
    primary: primaryPalette,
    secondary: secondaryPalette,
    tertiary: tertiaryPalette,
    error: errorPalette,
    neutral: neutralPalette,
    'neutral-variant': neutralVariantPalette,
  },
});

@NgModule({
  imports: [MatButtonModule],
  providers: [
    provideAnimations(),
    provideThemeManager(customTheme),
  ],
})
export class AppModule { }

Затем, чтобы использовать эти цвета, вы можете сделать это:

import { Component } from '@angular/core';
import { ThemePalette } from '@angular/material/core';

@Component({
  selector: 'app-example',
  template: `
    <button mat-raised-button [color] = "primaryColor">Primary</button>
    <button mat-raised-button [color] = "secondaryColor">Secondary</button>
    <button mat-raised-button [color] = "tertiaryColor">Tertiary</button>
    <button mat-raised-button [color] = "errorColor">Error</button>
    <div [class] = "'custom-element ' + neutralBackgroundClass">
      This div uses the neutral background color
    </div>
    <div [class] = "'custom-element ' + neutralVariantBackgroundClass">
      This div uses the neutral-variant background color
    </div>
  `,
  styles: [`
    .custom-element {
      padding: 10px;
      margin: 5px 0;
    }
    .neutral-bg {
      background-color: var(--md-sys-color-neutral);
      color: var(--md-sys-color-on-neutral);
    }
    .neutral-variant-bg {
      background-color: var(--md-sys-color-neutral-variant);
      color: var(--md-sys-color-on-neutral-variant);
    }
  `]
})
export class ExampleComponent {
  primaryColor: ThemePalette = 'primary';
  secondaryColor: ThemePalette = 'secondary';
  tertiaryColor: ThemePalette = 'tertiary';
  errorColor: ThemePalette = 'error';

  neutralBackgroundClass = 'neutral-bg';
  neutralVariantBackgroundClass = 'neutral-variant-bg';
}