zitadel/console/src/styles/palette-helper.scss

@function modify-palette($theme, $map, $partial) {
  // A theme is a map with the following structure:
  // (
  //   color: (..., background),
  //   ...,
  //   background: ...
  // )
  //
  // We need to replace the background color in two palettes.
  // Once in the background palette inside the color map.
  // Again in the background palette itself.

  // Replace the background in the color object's background palette.
  $theme-color: map-get($theme, color);
  $color-map-palette: map-get($theme-color, $map);
  $color-map-palette: map-merge($color-map-palette, $partial);

  // Replace the background in the background palette.
  $background-palette: map-get($theme, $map);
  $background-palette: map-merge($background-palette, $partial);

  // Merge the changes into a new theme.
  $modified-theme-color: map-merge(
    $theme-color,
    (
      $map: $color-map-palette,
    )
  );
  $modified-theme: map-merge(
    $theme,
    (
      color: $modified-theme-color,
    )
  );
  $modified-theme: map-merge(
    $modified-theme,
    (
      $map: $background-palette,
    )
  );

  @return $modified-theme;
}