Neo Brutalism Angular Material Theme

Bold contrast, punchy seeds, and a playful brutalist energy for standout UIs.

Live preview

About this theme

Neo Brutalism pushes Material seed colors into high-energy territory: stronger hue separation, punchier containers, and a look that stands out from default Material chrome.

Light: Light mode keeps surfaces bright so saturated primary and tertiary seeds stay the visual punchline.

Dark: Dark mode dials surfaces down while keeping seed accents loud enough for buttons, FABs, and selected states.

Customize the theme

Theme SCSS

@use '@angular/material' as mat;

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@100;200;300;400;500;600;700;800&display=swap');

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

  @include mat.theme-overrides(
    (
      primary: light-dark(#c10015, #ff8e83),
      'on-primary': light-dark(#fff7f6, #650006),
      'primary-container': light-dark(#ff766b, #ff766b),
      'on-primary-container': light-dark(#4f0003, #4f0003),
      secondary: light-dark(#626200, #cdcd00),
      'on-secondary': light-dark(#fffe9a, #434300),
      'secondary-container': light-dark(#eaea00, #3e3e00),
      'on-secondary-container': light-dark(#555500, #c6c600),
      tertiary: light-dark(#0055d7, #759aff),
      'on-tertiary': light-dark(#f9f8ff, #001c53),
      'tertiary-container': light-dark(#92aeff, #0266ff),
      'on-tertiary-container': light-dark(#002b75, #ffffff),
      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(#f9f9f9, #0e0e0e),
      'on-surface': light-dark(#323232, #e5e5e5),
      'on-surface-variant': light-dark(#5f5f5f, #ababab),
      'surface-container': light-dark(#eeeeee, #191919),
      'surface-container-high': light-dark(#e8e8e8, #1f1f1f),
      'surface-container-highest': light-dark(#e2e2e2, #262626),
      'surface-container-low': light-dark(#f3f3f3, #131313),
      'surface-container-lowest': light-dark(#ffffff, #000000),
      'surface-bright': light-dark(#f9f9f9, #2c2c2c),
      'surface-dim': light-dark(#dadada, #0e0e0e),
      'surface-variant': light-dark(#e2e2e2, #262626),
      'surface-tint': light-dark(#c10015, #ff8e83),
      'inverse-surface': light-dark(#0e0e0e, #f9f9f9),
      'inverse-on-surface': light-dark(#9d9d9d, #555555),
      'inverse-primary': light-dark(#ff544b, #c10015),
      outline: light-dark(#7b7b7b, #757575),
      'outline-variant': light-dark(#b2b2b2, #484848),
      background: light-dark(#f9f9f9, #0e0e0e),
      'on-background': light-dark(#323232, #e5e5e5),
      scrim: light-dark(#000000, #000000),
      shadow: light-dark(#000000, #000000),
    )
  );

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

  @include mat.card-overrides(
    (
      'outlined-container-elevation': var(--mat-sys-level1),
      'outlined-container-shape': 0px,
      'outlined-outline-width': 2px,
    )
  );

  @include mat.chips-overrides(
    (
      'with-avatar-avatar-shape-radius': 0px,
      'container-shape-radius': 0px,
    )
  );

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

  @include mat.list-overrides(
    (
      'active-indicator-shape': 0px,
      'list-item-one-line-container-height': 42px,
      'list-item-hover-state-layer-color': var(--mat-sys-tertiary),
      'list-item-hover-state-layer-opacity': 0.18,
      'active-indicator-color': var(--mat-sys-primary-container),
    )
  );

  @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),
    )
  );
}