feat: add light mode

[ittipatken]

This iteration is still subject to changes.

[dae]

Thanks for looking into this - I imagine some users will much prefer this version. My only meagre suggestion is that the shade of blue in things like links could be slightly darker.

[ittipatken]

My only meagre suggestion is that the shade of blue in things like links could be slightly darker.

I have tried several colors, but none of them fit, so this will be fixed in the future.

[Toby-Rea]

I think we can probably make this change without needing much change to the markup. For example, given the following CSS this handles most of the required changes to support light mode (it's not finalised though):

@layer base {
  :root {
    --foreground: 0, 0%, 0%;
    --background: 0, 0%, 97%;
    --primary: 205, 67%, 40%;
    --primary-darker: 208, 65%, 50%;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --foreground: 0, 0%, 100%;
      --background: 0, 0%, 3%;
      --primary: 205, 67%, 70%;
      --primary-darker: 208, 65%, 60%;
    }
  }

  body {
    @apply font-sans bg-background text-foreground;
  }
}

@theme {
  --font-sans: Outfit Variable, sans-serif;

  --color-primary-darker: hsl(var(--primary-darker));
  --color-foreground: hsl(var(--foreground));
  --color-background: hsl(var(--background));
  --color-primary: hsl(var(--primary));
  --color-secondary: #968ca8;
  --color-neutral: hsla(var(--foreground), 70%);
  --color-error: #ff5449;
}

[ittipatken]

This pull request is ready to be merged, but the background in dark mode will be darker again in accordance with Toby's suggestion.

  @media (prefers-color-scheme: dark) {
    :root {
      --foreground: 0, 0%, 100%;
      --background: 0, 0%, 3%;
      --primary: 205, 67%, 70%;
      --primary-darker: 208, 65%, 60%;
    }
 }

P.S. I am flexible with the color choices because they are very opinionated.

[dae]

Sorry for the delay, and thank you again for this! I personally find the light mode to be a touch on the bright/washed-out side, but that may be just me - let's see how people find it :-)