Light and dark mode

One nice thing with what we're created is, it should be very easy to update and customize.

One example of this is adding in a light theme!

For this course, we'll only look at doing it through a media query, but if you have taken the time to create multiple themes, you should also have a user control that allows them to change back and forth manually as well.

Since our current theme is a dark theme, we'll keep that as the "default", but we'll swap it out for users if they have the system preferences set to light.

:root {
  /* all the other color stuff */

  @media (prefers-color-scheme: light) {
    --text-main: var(--clr-brown-700);
    --text-high-contrast: var(--clr-brown-900);
    /* etc */
  }
}

One current issue is that we don't have enough light colors to work from, but we can add some new ones:

:root {
  --clr-brown-100: hsl(10, 5%, 92%);
  --clr-brown-200: hsl(9, 7%, 85%);
  --clr-brown-300: hsl(9, 8%, 78%);
  --clr-brown-400: hsl(0, 6%, 72%);

  /* other custom props */

  @media (prefers-color-scheme: light) {
    --text-main: var(--clr-brown-800);
    --text-high-contrast: var(--clr-900);

    --background-accent-light: var(--clr-green-600);
    --background-accent-main: var(--clr-green-500);
    --background-accent-dark: var(--clr-green-400);
    --background-extra-light: var(--clr-white);
    --background-light: var(--clr-brown-100);
    --background-main: var(--clr-brown-200);
    --background-dark: var(--clr-brown-300);
    --background-extra-dark: var(--clr-brown-400);
  }
}

There would be a little tweaking to do for some elements as well, but something like this can get you 90% of the way there in a matter of minutes.