linstrom/frontend-reactive/app/styles/colors.css

@media (prefers-color-scheme: light) {
  :root {
    --text: hsl(273deg 35% 6%);
    --background: hsl(267deg 36% 95%);
    --primary: hsl(273deg 37% 27%);
    --secondary: hsl(307deg 37% 68%);
    --accent: hsl(318deg 37% 42%);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: hsl(273deg 35% 94%);
    --background: hsl(267deg 36% 5%);
    --primary: hsl(273deg 37% 73%);
    --secondary: hsl(307deg 37% 32%);
    --accent: hsl(318deg 37% 58%);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --text-50: hsl(273deg 36% 95%);
    --text-100: hsl(272deg 33% 90%);
    --text-200: hsl(273deg 35% 80%);
    --text-300: hsl(273deg 35% 70%);
    --text-400: hsl(273deg 35% 60%);
    --text-500: hsl(273deg 35% 50%);
    --text-600: hsl(273deg 35% 40%);
    --text-700: hsl(273deg 35% 30%);
    --text-800: hsl(273deg 35% 20%);
    --text-900: hsl(272deg 33% 10%);
    --text-950: hsl(273deg 36% 5%);

    --background-50: hsl(267deg 36% 95%);
    --background-100: hsl(268deg 37% 90%);
    --background-200: hsl(267deg 35% 80%);
    --background-300: hsl(267deg 36% 70%);
    --background-400: hsl(267deg 36% 60%);
    --background-500: hsl(267deg 36% 50%);
    --background-600: hsl(267deg 36% 40%);
    --background-700: hsl(267deg 36% 30%);
    --background-800: hsl(267deg 35% 20%);
    --background-900: hsl(268deg 37% 10%);
    --background-950: hsl(267deg 36% 5%);

    --primary-50: hsl(273deg 36% 95%);
    --primary-100: hsl(272deg 37% 90%);
    --primary-200: hsl(273deg 37% 80%);
    --primary-300: hsl(273deg 37% 70%);
    --primary-400: hsl(273deg 37% 60%);
    --primary-500: hsl(273deg 37% 50%);
    --primary-600: hsl(273deg 37% 40%);
    --primary-700: hsl(273deg 37% 30%);
    --primary-800: hsl(273deg 37% 20%);
    --primary-900: hsl(272deg 37% 10%);
    --primary-950: hsl(273deg 36% 5%);

    --secondary-50: hsl(307deg 36% 95%);
    --secondary-100: hsl(306deg 37% 90%);
    --secondary-200: hsl(308deg 37% 80%);
    --secondary-300: hsl(307deg 37% 70%);
    --secondary-400: hsl(307deg 37% 60%);
    --secondary-500: hsl(307deg 37% 50%);
    --secondary-600: hsl(307deg 37% 40%);
    --secondary-700: hsl(307deg 37% 30%);
    --secondary-800: hsl(308deg 37% 20%);
    --secondary-900: hsl(306deg 37% 10%);
    --secondary-950: hsl(307deg 36% 5%);

    --accent-50: hsl(320deg 36% 95%);
    --accent-100: hsl(319deg 37% 90%);
    --accent-200: hsl(317deg 37% 80%);
    --accent-300: hsl(318deg 37% 70%);
    --accent-400: hsl(318deg 37% 60%);
    --accent-500: hsl(318deg 37% 50%);
    --accent-600: hsl(318deg 37% 40%);
    --accent-700: hsl(318deg 37% 30%);
    --accent-800: hsl(317deg 37% 20%);
    --accent-900: hsl(319deg 37% 10%);
    --accent-950: hsl(313deg 36% 5%);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-50: hsl(273deg 36% 5%);
    --text-100: hsl(272deg 33% 10%);
    --text-200: hsl(273deg 35% 20%);
    --text-300: hsl(273deg 35% 30%);
    --text-400: hsl(273deg 35% 40%);
    --text-500: hsl(273deg 35% 50%);
    --text-600: hsl(273deg 35% 60%);
    --text-700: hsl(273deg 35% 70%);
    --text-800: hsl(273deg 35% 80%);
    --text-900: hsl(272deg 33% 90%);
    --text-950: hsl(273deg 36% 95%);

    --background-50: hsl(267deg 36% 5%);
    --background-100: hsl(268deg 37% 10%);
    --background-200: hsl(267deg 35% 20%);
    --background-300: hsl(267deg 36% 30%);
    --background-400: hsl(267deg 36% 40%);
    --background-500: hsl(267deg 36% 50%);
    --background-600: hsl(267deg 36% 60%);
    --background-700: hsl(267deg 36% 70%);
    --background-800: hsl(267deg 35% 80%);
    --background-900: hsl(268deg 37% 90%);
    --background-950: hsl(267deg 36% 95%);

    --primary-50: hsl(273deg 36% 5%);
    --primary-100: hsl(272deg 37% 10%);
    --primary-200: hsl(273deg 37% 20%);
    --primary-300: hsl(273deg 37% 30%);
    --primary-400: hsl(273deg 37% 40%);
    --primary-500: hsl(273deg 37% 50%);
    --primary-600: hsl(273deg 37% 60%);
    --primary-700: hsl(273deg 37% 70%);
    --primary-800: hsl(273deg 37% 80%);
    --primary-900: hsl(272deg 37% 90%);
    --primary-950: hsl(273deg 36% 95%);

    --secondary-50: hsl(307deg 36% 5%);
    --secondary-100: hsl(306deg 37% 10%);
    --secondary-200: hsl(308deg 37% 20%);
    --secondary-300: hsl(307deg 37% 30%);
    --secondary-400: hsl(307deg 37% 40%);
    --secondary-500: hsl(307deg 37% 50%);
    --secondary-600: hsl(307deg 37% 60%);
    --secondary-700: hsl(307deg 37% 70%);
    --secondary-800: hsl(308deg 37% 80%);
    --secondary-900: hsl(306deg 37% 90%);
    --secondary-950: hsl(307deg 36% 95%);

    --accent-50: hsl(313deg 36% 5%);
    --accent-100: hsl(319deg 37% 10%);
    --accent-200: hsl(317deg 37% 20%);
    --accent-300: hsl(318deg 37% 30%);
    --accent-400: hsl(318deg 37% 40%);
    --accent-500: hsl(318deg 37% 50%);
    --accent-600: hsl(318deg 37% 60%);
    --accent-700: hsl(318deg 37% 70%);
    --accent-800: hsl(317deg 37% 80%);
    --accent-900: hsl(319deg 37% 90%);
    --accent-950: hsl(320deg 36% 95%);
  }
}

:root {
  background-color: var(--background);
  color: var(--text);
}