.theme-mixin(@light: bool) {
  @bg: if(@light, #e8e8ff, #181822);
  @fg: if(@light, #111111, #eeeeee);
  @mult: if(@light, 0.75, 2.75);

  --bg: @bg;
  --fg: @fg;
  --color1: hsl(hue(@bg), saturation(@bg) * @mult, lightness(@bg) * @mult);
  --color2: hsl(hue(@bg) + 40, saturation(@bg) * @mult, lightness(@bg) * @mult);
  --gradient: linear-gradient(135deg, var(--color1) 0%, var(--bg) 25%, var(--bg) 75%, var(--color2) 100%);
}

body {
  .theme-mixin(true);

  @media (prefers-color-scheme: dark) {
    .theme-mixin(false);
  }

  &.dark {
    .theme-mixin(false);
  }

  background: var(--bg);
  color: var(--fg);
}