Thiết kế website giá rẻ

Question

The angular material documentation does not really give examples how a fully customized theme would look like and I already asked on reddit so I’m trying here now.

How would my M2 Theme look like in M3? I at least got the colors down in some way.
But I have no idea how to customize the typography!

M2 Theme (@angular/material v16):

@use "@angular/material" as mat;
@use "colors" as color;

@include mat.core();

$my-custom-typography-config-mobile: mat.define-typography-config(
  $font-family: 'FiraSans, Roboto, "Helvetica Neue", sans-serif',
  $headline-1:
    mat.define-typography-level(
      $font-size: 106px,
      $line-height: 106px,
      $font-weight: 300,
      $letter-spacing: -0.05em,
    ),
  $headline-2:
    mat.define-typography-level(
      $font-size: 50px,
      $line-height: 50px,
      $font-weight: 400,
      $letter-spacing: -0.02em,
    ),
  $headline-3:
    mat.define-typography-level(
      $font-size: 38px,
      $line-height: 42px,
      $font-weight: 400,
      $letter-spacing: -0.005em,
    ),
  $headline-4:
    mat.define-typography-level(
      $font-size: 20px,
      $line-height: 24px,
      $font-weight: 400,
      $letter-spacing: normal,
    ),
  $headline-5:
    mat.define-typography-level(
      $font-size: 32px,
      $line-height: 34px,
      $font-weight: 400,
      $letter-spacing: normal,
    ),
  $headline-6:
    mat.define-typography-level(
      $font-size: 28px,
      $line-height: 32px,
      $font-weight: 800,
      $letter-spacing: normal,
    ),
  $subtitle-1:
    mat.define-typography-level(
      $font-size: 20px,
      $line-height: 22px,
      $font-weight: 400,
      $letter-spacing: normal,
    ),
  $subtitle-2:
    mat.define-typography-level(
      $font-size: 16px,
      $line-height: 18px,
      $font-weight: 500,
      $letter-spacing: normal,
    ),
  $body-1:
    mat.define-typography-level(
      $font-size: 16px,
      $line-height: 18px,
      $font-weight: 400,
      $letter-spacing: normal,
    ),
  $body-2:
    mat.define-typography-level(
      $font-size: 16px,
      $line-height: 26px,
      $font-weight: 300,
      $letter-spacing: normal,
    ),
  $caption:
    mat.define-typography-level(
      $font-size: 12px,
      $line-height: 12px,
      $font-weight: 400,
      $letter-spacing: normal,
    ),
  $button:
    mat.define-typography-level(
      $font-size: 16px,
      $line-height: 16px,
      $font-weight: 500,
      $letter-spacing: normal,
    ),
);

@include mat.typography-hierarchy($my-custom-typography-config-mobile);

$primary-palette: (
  // lighter
  300: color.$primary-light,
  // default
  600: color.$primary-default,
  // darker
  900: color.$primary-dark,
  contrast: (
    // light contrast color
    300: rgba(color.$text-light, 0.95),
    // medium contrast color
    600: rgba(color.$text-light, 0.95),
    // bold contrast color
    900: rgba(color.$text-light, 0.95)
  )
);

$secondary-palette: (
  // lighter
  300: color.$secondary-dark,
  // default
  600: color.$secondary-default,
  // darker
  900: color.$secondary-darker,
  contrast: (
    // light contrast color
    300: rgba(color.$text-light, 0.95),
    // medium contrast color
    600: rgba(color.$text-light, 0.95),
    // bold contrast color
    900: rgba(color.$text-light, 0.95)
  )
);

$Frontend-primary: mat.define-palette(
  $primary-palette,
  600,
  300,
  900
);
$Frontend-accent: mat.define-palette(
  $secondary-palette,
  600,
  300,
  900
);

$Frontend-warn: mat.define-palette(mat.$red-palette);

$Frontend-theme-mobile: mat.define-light-theme(
  (
    color: (
      primary: $Frontend-primary,
      accent: $Frontend-accent,
      warn: $Frontend-warn,
    ),
    typography: $my-custom-typography-config-mobile,
    density: 0,
  )
);

@include mat.all-component-themes($Frontend-theme-mobile);

@media (min-width: 768px) {
  $my-custom-typography-config: mat.define-typography-config(
    $font-family: 'FiraSans, Roboto, "Helvetica Neue", sans-serif',
    $headline-1:
      mat.define-typography-level(
        $font-size: 112px,
        $line-height: 112px,
        $font-weight: 300,
        $letter-spacing: -0.05em,
      ),
    $headline-2:
      mat.define-typography-level(
        $font-size: 56px,
        $line-height: 56px,
        $font-weight: 400,
        $letter-spacing: -0.02em,
      ),
    $headline-3:
      mat.define-typography-level(
        $font-size: 45px,
        $line-height: 48px,
        $font-weight: 400,
        $letter-spacing: -0.005em,
      ),
    $headline-4:
      mat.define-typography-level(
        $font-size: 40px,
        $line-height: 46px,
        $font-weight: 400,
        $letter-spacing: normal,
      ),
    $headline-5:
      mat.define-typography-level(
        $font-size: 32px,
        $line-height: 34px,
        $font-weight: 400,
        $letter-spacing: normal,
      ),
    $headline-6:
      mat.define-typography-level(
        $font-size: 35px,
        $line-height: 35px,
        $font-weight: 800,
        $letter-spacing: normal,
      ),
    $subtitle-1:
      mat.define-typography-level(
        $font-size: 20px,
        $line-height: 26px,
        $font-weight: 400,
        $letter-spacing: normal,
      ),
    $subtitle-2:
      mat.define-typography-level(
        $font-size: 16px,
        $line-height: 20px,
        $font-weight: 500,
        $letter-spacing: normal,
      ),
    $body-1:
      mat.define-typography-level(
        $font-size: 16px,
        $line-height: 20px,
        $font-weight: 400,
        $letter-spacing: normal,
      ),
    $body-2:
      mat.define-typography-level(
        $font-size: 18px,
        $line-height: 26px,
        $font-weight: 300,
        $letter-spacing: normal,
      ),
    $caption:
      mat.define-typography-level(
        $font-size: 12px,
        $line-height: 12px,
        $font-weight: 400,
        $letter-spacing: normal,
      ),
    $button:
      mat.define-typography-level(
        $font-size: 18px,
        $line-height: 18px,
        $font-weight: 500,
        $letter-spacing: normal,
      ),
  );

  $Frontend-theme: mat.define-light-theme(
    (
      color: (
        primary: $Frontend-primary,
        accent: $Frontend-accent,
        warn: $Frontend-warn,
      ),
      typography: $my-custom-typography-config,
      density: 0,
    )
  );

  @include mat.all-component-typographies($Frontend-theme);
}

My M3 theme so far in @angular/material v18 (it is completely missing typographies… and media queries):

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

@include mat.core();

$_palettes: (
  primary: (
    0: #000000,
    10: #001c38,
    20: #00315b,
    25: #003d6e,
    30: #004881,
    35: #025494,
    40: #1d60a1,
    50: #3e79bc,
    60: #5b93d7,
    70: #76aef4,
    80: #a2c9ff,
    90: #d3e4ff,
    95: #eaf1ff,
    98: #f8f9ff,
    99: #fdfcff,
    100: #ffffff,
  ),
  secondary: (
    0: #000000,
    10: #251a00,
    20: #3e2e00,
    25: #4b3900,
    30: #594400,
    35: #684f00,
    40: #765a00,
    50: #947200,
    60: #b48b00,
    70: #d4a500,
    80: #f3c02a,
    90: #ffdf95,
    95: #ffefd1,
    98: #fff8f1,
    99: #fffbff,
    100: #ffffff,
  ),
  tertiary: (
    0: #000000,
    10: #341000,
    20: #562000,
    25: #682800,
    30: #7a3000,
    35: #8d3900,
    40: #9d430a,
    50: #bd5b24,
    60: #dd743b,
    70: #fe8d52,
    80: #ffb693,
    90: #ffdbcb,
    95: #ffede6,
    98: #fff8f6,
    99: #fffbff,
    100: #ffffff,
  ),
  neutral: (
    0: #000000,
    4: #0a0b0b,
    6: #101111,
    10: #1a1c1c,
    12: #1e2020,
    17: #292b2b,
    20: #2f3131,
    22: #333535,
    24: #383a3a,
    25: #3a3c3c,
    30: #454747,
    35: #515353,
    40: #5d5f5f,
    50: #767777,
    60: #909191,
    70: #aaabab,
    80: #c6c6c7,
    87: #dadada,
    90: #e2e2e2,
    92: #e8e8e8,
    94: #eeeeee,
    95: #f1f1f1,
    96: #f4f4f4,
    98: #f9f9f9,
    99: #fcfcfc,
    100: #ffffff,
  ),
  neutral-variant: (
    0: #000000,
    10: #161c24,
    20: #2b3139,
    25: #363c45,
    30: #414750,
    35: #4d535c,
    40: #595f68,
    50: #727781,
    60: #8c919b,
    70: #a6abb6,
    80: #c1c7d2,
    90: #dee2ee,
    95: #ecf1fc,
    98: #f8f9ff,
    99: #fdfcff,
    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);
$_secondary: map.merge(map.get($_palettes, secondary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);


$light-theme: mat.define-theme(
  (
    color: (
      theme-type: light,
      primary: $_primary,
      tertiary: $_tertiary,
    ),
    typography: (
      plain-family: Roboto,
      brand-family: Open Sans,
      bold-weight: 900,
      medium-weight: 500,
      regular-weight: 300,
    ),
  )
);

Thiết kế website giá rẻ

Danh mục

What would my Angular m2 Theme look like in m3?