Claude Angular Material Theme

Warm terracotta accents and soft surfaces inspired by Anthropic’s Claude brand.

Live preview

About this theme

Warm primary tones and soft containers give Material components a conversational, approachable feel. Ideal when you want brand warmth without sacrificing Material 3 role clarity.

Light: Light appearance uses soft peach-tinted surfaces with terracotta primary for friendly CTAs and chips.

Dark: Dark appearance deepens the warm neutrals so primary accents still read clearly on elevated surfaces.

Customize the theme

Theme SCSS

@use '@angular/material' as mat;

@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap');

html {
  color-scheme: light dark;
  @include mat.theme(
    (
      color: mat.$violet-palette,
      typography: (
        plain-family: 'Lora',
        brand-family: 'Roboto',
        bold-weight: 700,
        medium-weight: 500,
        regular-weight: 400
      ),
      density: 0
    )
  );

  @include mat.theme-overrides(
    (
      primary: light-dark(#c96442, #ff906b),
      'on-primary': light-dark(#fff7f5, #5a1700),
      'primary-container': light-dark(#fd8c67, #f0825e),
      'on-primary-container': light-dark(#561500, #461000),
      secondary: light-dark(#845343, #f7b8a4),
      'on-secondary': light-dark(#fff7f5, #603527),
      'secondary-container': light-dark(#ffdbd0, #5a3022),
      'on-secondary-container': light-dark(#744637, #efb19d),
      tertiary: light-dark(#686100, #fffae3),
      'on-tertiary': light-dark(#fff9de, #676100),
      'tertiary-container': light-dark(#faef6f, #faef6f),
      'on-tertiary-container': light-dark(#5f5800, #5f5800),
      error: light-dark(#bb1b1b, #ff7164),
      'on-error': light-dark(#fff7f6, #4a0002),
      'error-container': light-dark(#fe4e44, #ac0c12),
      'on-error-container': light-dark(#570003, #ffb8b0),
      surface: light-dark(#fff8f6, #150c0a),
      'on-surface': light-dark(#3b302d, #f4e1dc),
      'on-surface-variant': light-dark(#6a5c58, #b8a8a3),
      'surface-container': light-dark(#fdeae4, #211715),
      'surface-container-high': light-dark(#f7e4df, #271d1a),
      'surface-container-highest': light-dark(#f1dfd9, #2e2320),
      'surface-container-low': light-dark(#fff1ed, #1a110f),
      'surface-container-lowest': light-dark(#ffffff, #000000),
      'surface-bright': light-dark(#fff8f6, #342a26),
      'surface-dim': light-dark(#e9d6d1, #150c0a),
      'surface-variant': light-dark(#f1dfd9, #2e2320),
      'surface-tint': light-dark(#9e4324, #ff906b),
      'inverse-surface': light-dark(#150c0a, #fff8f6),
      'inverse-on-surface': light-dark(#aa9995, #5f524e),
      'inverse-primary': light-dark(#fd8c67, #9e4324),
      outline: light-dark(#867873, #81726e),
      'outline-variant': light-dark(#bfaeaa, #524542),
      background: light-dark(#fff8f6, #150c0a),
      'on-background': light-dark(#3b302d, #f4e1dc),
      scrim: light-dark(#000000, #000000),
      shadow: light-dark(#000000, #000000),
    )
  );

  @include mat.button-overrides(
    (
      'filled-horizontal-padding': 15px,
      'outlined-container-height': 34px,
      'filled-container-height': 34px,
      'text-container-height': 34px,
      'filled-container-shape': 8px,
      'protected-horizontal-padding': 15px,
      'tonal-container-shape': 8px,
      'tonal-container-height': 34px,
      'text-horizontal-padding': 15px,
      'protected-container-shape': 8px,
      'outlined-container-shape': 8px,
      'tonal-horizontal-padding': 15px,
      'protected-container-height': 34px,
      'text-container-shape': 8px,
      'outlined-horizontal-padding': 15px,
    )
  );

  @include mat.card-overrides(
    (
      'outlined-container-color': var(--mat-sys-surface-container-lowest),
    )
  );

  @include mat.form-field-overrides(
    (
      'container-vertical-padding': 7px,
      'filled-with-label-container-padding-top': 8px,
      'filled-with-label-container-padding-bottom': 8px,
      'container-height': 16px,
    )
  );

  @include mat.list-overrides(
    (
      'active-indicator-shape': 8px,
      'list-item-one-line-container-height': 42px,
    )
  );

  @include mat.select-overrides(
    (
      'arrow-transform': 'down',
    )
  );

  @include mat.sidenav-overrides(
    (
      'content-background-color': var(--mat-sys-surface-container-lowest),
      'container-width': '250px',
    )
  );

  @include mat.toolbar-overrides(
    (
      'container-background-color': var(--mat-sys-surface-container-lowest),
    )
  );
}