Supabase Angular Material Theme

Emerald developer-tool vibes with calm neutrals for docs and dashboards.

Live preview

About this theme

Supabase-inspired greens sit on calm neutrals — a familiar developer-tool palette that still maps cleanly onto Material 3 roles for forms, tables, and navigation.

Light: Light mode pairs soft gray surfaces with emerald primary so status and CTAs feel intentional, not loud.

Dark: Dark mode uses deep charcoal surfaces; emerald accents remain the focus for interactive elements.

Customize the theme

Theme SCSS

@use '@angular/material' as mat;

@import url('https://fonts.googleapis.com/css2?family=Outfit: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: 'Outfit',
        brand-family: 'Outfit',
        bold-weight: 700,
        medium-weight: 500,
        regular-weight: 400
      ),
      density: 0
    )
  );

  @include mat.theme-overrides(
    (
      primary: light-dark(#72e3ad, #8afbc3),
      'on-primary': light-dark(#000000, #00603f),
      'primary-container': light-dark(#8afbc3, #3fb482),
      'on-primary-container': light-dark(#00603f, #002919),
      secondary: light-dark(#3f6752, #a5d0b7),
      'on-secondary': light-dark(#e6ffee, #204834),
      'secondary-container': light-dark(#c0edd2, #1b4330),
      'on-secondary-container': light-dark(#325a45, #9ec9b0),
      tertiary: light-dark(#0d668a, #b1e0ff),
      'on-tertiary': light-dark(#f4f9ff, #005372),
      'tertiary-container': light-dark(#8fd4fd, #8fd4fd),
      'on-tertiary-container': light-dark(#004965, #004965),
      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(#f5fbf4, #0a0f0c),
      'on-surface': light-dark(#2e3430, #e1e7e1),
      'on-surface-variant': light-dark(#5a615c, #a6ada7),
      'surface-container': light-dark(#eaefe9, #151b17),
      'surface-container-high': light-dark(#e4eae3, #1b211d),
      'surface-container-highest': light-dark(#dee4de, #212723),
      'surface-container-low': light-dark(#eff5ef, #0f1511),
      'surface-container-lowest': light-dark(#ffffff, #000000),
      'surface-bright': light-dark(#f5fbf4, #272d29),
      'surface-dim': light-dark(#d6dcd5, #0a0f0c),
      'surface-variant': light-dark(#dee4de, #212723),
      'surface-tint': light-dark(#006d49, #8afbc3),
      'inverse-surface': light-dark(#0a0f0c, #f5fbf4),
      'inverse-on-surface': light-dark(#989e99, #505752),
      'inverse-primary': light-dark(#8afbc3, #006d49),
      outline: light-dark(#767c77, #717772),
      'outline-variant': light-dark(#adb3ae, #434945),
      background: light-dark(#f5fbf4, #0a0f0c),
      'on-background': light-dark(#2e3430, #e1e7e1),
      scrim: light-dark(#000000, #000000),
      shadow: light-dark(#000000, #000000),
    )
  );

  @include mat.button-overrides(
    (
      'outlined-label-text-color': var(--mat-sys-surface-tint),
      'outlined-container-height': 34px,
      'text-label-text-color': var(--mat-sys-on-primary-container),
      'filled-container-shape': 8px,
      'tonal-horizontal-padding': 15px,
      'tonal-container-height': 34px,
      'text-horizontal-padding': 15px,
      'outlined-container-shape': 8px,
      'protected-container-height': 34px,
      'tonal-container-shape': 8px,
      'text-container-shape': 8px,
      'filled-horizontal-padding': 15px,
      'protected-horizontal-padding': 15px,
      'outlined-horizontal-padding': 15px,
      'protected-container-shape': 8px,
      'filled-container-height': 34px,
      'text-container-height': 34px,
    )
  );

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

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

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

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

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

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