Theme color configuration with SASS

_colors.scss

$foreground: #16161d; // Eigengrau
$background: #FFFFFF;

@mixin color-theme($fg, $bg, $link, $link-hover) {
  color: $fg !important;
  background-color: $bg !important;

  a[href]       { color: $link !important };
  a[href]:hover { color: $link-hover !important };

  .fg-color     { color: $fg !important }
  .bg-color     { background-color: $bg !important }
  .fill-with-bg { fill: $bg !important }

  .fg-color-i   { color: $bg !important }
  .bg-color-i   {  background-color: $fg !important }
}

@mixin light-theme {
  @include color-theme($fg: $foreground, $bg: $background, $link: #1287d4, $link-hover: #0f74b6);
}

@mixin dark-theme {
  @include color-theme($fg: $background, $bg: $foreground, $link: #3BAFFD, $link-hover: #5BCFFD);
}


@media (prefers-color-scheme: light) { .system-theme { @include light-theme; } }
@media (prefers-color-scheme: dark)  { .system-theme { @include dark-theme; } }

.light-theme { @include light-theme; }
.dark-theme  { @include dark-theme; }