UI Foundations Kit starts with a default primary color that resembles a commonly seen “tech blue”.

It’s derived from the Tailwind blue color scale, and can be replaced with any other scale of colors from 50-900.

theme.tsx
const primaryColorScale = {
  50: 'hsl(214, 100%, 97%)',
  100: 'hsl(214, 95%, 93%)',
  200: 'hsl(213, 97%, 87%)',
  300: 'hsl(213, 96%, 78%)',
  400: 'hsl(213, 94%, 68%)',
  500: 'hsl(217, 91%, 60%)',
  600: 'hsl(221, 84%, 54%)',
  700: 'hsl(224, 76%, 48%)',
  800: 'hsl(226, 71%, 40%)',
  900: 'hsl(226, 65%, 34%)',
  main: 'hsl(221, 84%, 54%)',
  subtle: 'hsla(217, 83%, 70%, 0.1)',
};

By default it uses HSL, but you can replace these values with hex, or RGB, or another color mode.

​
Preview different colors

The live demo allows you to preview different colors from the theme switcher, if you’re interested in seeing how different palettes look.

​
Additional color scales

UI Foundations Kit also adds several other color palettes that can be used in components for convenience. These include:

  • gray
  • red
  • yellow
  • green
  • blue
  • fuchsia
  • violet orange`

You can continue to extend the theme to add even more if you feel so inclined.

​
Dark mode

Dark mode palettes are created by inverting the light mode colors, and adjusting the contrast to be more readable in a dark environment. This is done automatically by the theme, and can be overridden in the theme.tsx file if you want finer grained control.

theme.tsx
function invertColorScale(colorScale: ColorScale): ColorScale {
  return {
    ...colorScale,
    50: colorScale[900],
    100: colorScale[800],
    200: colorScale[700],
    300: colorScale[600],
    400: colorScale[500],
    500: colorScale[400],
    600: colorScale[300],
    700: colorScale[200],
    800: colorScale[100],
    900: colorScale[50],
    main: colorScale[500],
    subtle: colorScale.subtle,
  };
}
IntegrationTypography