.theme-mixin(@light: bool) {
  // TODO: awful, use just hsl() instead of magic multipliers or percentages in lighten/darken
  // Also, it's not good to depend on the background color.
  // Maybe, implement MD3 guidelines.
  @bg: if(@light, #e8e8ff, #181822);
  @fg: if(@light, #111111, #eeeeee);
  @bg-sec: if(@light, darken(@bg, 10%), lighten(@bg, 30%));
  @mult: if(@light, 0.75, 2.75);
  @color1: hsl(hue(@bg), saturation(@bg) * @mult, lightness(@bg) * @mult);
  @color2: spin(@color1, 40);
  @accent: if(@light, darken(@color1, 10%), lighten(@color1, 40%));

  --bg: @bg;
  --fg: @fg;
  --bg-sec: @bg-sec;
  --accent: @accent;
  --color1: @color1;
  --color2: @color2;
  --gradient: linear-gradient(135deg, var(--color1) 0%, var(--color2) 100%);
  --bg-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);
}