Colors
How to customize colors to match your brand
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.
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
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.
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,
};
}