Theming

UI colors are based on 10-tone Tailwind default color palette, normalized so that each color at the same brightness level meets identical minimum accessibility requirements.

To help you build your storefront, Storefront UI adds additional colors following Tailwind's shading conventions. These can be customized customized with CSS variables or Tailwind configuration to match your design system.

Default Values

In addition to Tailwind's default colors, Storefront UI adds the following colors to your theme:

primary

primary-50#f0fdf4

primary-100#dcfce7

primary-200#bbf7d0

primary-300#86efac

primary-400#4ade80

primary-500#02c652

primary-600#0aab45

primary-700#018937

primary-800#166534

primary-900#14532d

secondary

secondary-50#f5f3ff

secondary-100#ede9fe

secondary-200#ddd6fe

secondary-300#c4b5fd

secondary-400#a78bfa

secondary-500#875cf6

secondary-600#6f40ec

secondary-700#6131dd

secondary-800#531ed3

secondary-900#4415b2

positive

positive-50#f0fdf4

positive-100#dcfce7

positive-200#bbf7d0

positive-300#86efac

positive-400#4ade80

positive-500#02c652

positive-600#0aab45

positive-700#018937

positive-800#166534

positive-900#14532d

negative

negative-50#fff1f2

negative-100#ffe4e6

negative-200#fecdd3

negative-300#fda4af

negative-400#fb7185

negative-500#f43f5e

negative-600#e11d48

negative-700#be123c

negative-800#9f1239

negative-900#881337

warning

warning-50#fefce8

warning-100#fef9c3

warning-200#fef08a

warning-300#fde047

warning-400#facc15

warning-500#eab308

warning-600#ca8a04

warning-700#a16207

warning-800#854d0e

warning-900#713f12

neutral

neutral-50#fafafa

neutral-100#f4f4f5

neutral-200#e4e4e7

neutral-300#d4d4d8

neutral-400#a1a1aa

neutral-500#71717a

neutral-600#52525b

neutral-700#3f3f46

neutral-800#27272a

neutral-900#18181b

disabled

disabled-50#fafafa

disabled-100#f4f4f5

disabled-200#e4e4e7

disabled-300#d4d4d8

disabled-400#a1a1aa

disabled-500#71717a

disabled-600#52525b

disabled-700#3f3f46

disabled-800#27272a

disabled-900#18181b

Want to see our default Tailwind preset?

You can see all of the default colors, classes, variants, and more in our Tailwind preset

Customizing colors

CSS Variables

If your storefront has multiple themes (e.g. light/dark mode), we recommend using CSS variables to store your colors. This way you can easily switch between themes by changing the value of the CSS variables.

Why CSS Variables?

When theming with Tailwind variants, you'd need to essentially duplicate your entire theme for each variant. However, with CSS variables, you can use one class and change your theme globally by changing the CSS variables.

Without CSS Variables, we need to specify the variant and color everywhere.
<div class="bg-primary-500 dark:bg-gray-800" />

With CSS Variables, we can use one class and change the color by changing the CSS variable
<div class="bg-primary-500" />

To customize colors with CSS variables, you can set variables as different color channels. This syntax is required for Tailwind's opacity modifier syntax to work.

Hex values will not work with Tailwind's opacity modifier

The color channel syntax looks like {red} {green} {blue} with a number for each color value. If you use a hex color or CSS's rgb() function, Tailwind will not be able to modify the opacity of the color with Tailwind's text-primary-400/100 syntax.

The CSS classes for Storefront UI colors follow the pattern of --colors-{color}-{shade}. For example, changing primary-500 for light/dark themes might look like this.

:root {
  --colors-primary-500: 10 171 69;
}

/* this may change depending on how you implement dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --colors-primary-500: 240 253 244;
  }
}

Full List of CSS Variables

:root {
  /* Primary */
  --colors-primary-50: 235 255 242;
  --colors-primary-100: 217 253 228;
  --colors-primary-200: 171 241 192;
  --colors-primary-300: 130 234 158;
  --colors-primary-400: 60 224 120;
  --colors-primary-500: 19 195 96;
  --colors-primary-600: 7 161 79;
  --colors-primary-700: 13 127 63;
  --colors-primary-800: 16 86 46;
  --colors-primary-900: 15 50 30;

  /* Secondary */
  --colors-secondary-50: 247 245 253;
  --colors-secondary-100: 239 236 251;
  --colors-secondary-200: 225 218 246;
  --colors-secondary-300: 216 203 245;
  --colors-secondary-400: 198 177 246;
  --colors-secondary-500: 180 151 249;
  --colors-secondary-600: 151 111 238;
  --colors-secondary-700: 119 79 209;
  --colors-secondary-800: 82 52 153;
  --colors-secondary-900: 48 32 86;

  /* Positive */
  --colors-positive-50: 235 255 242;
  --colors-positive-100: 217 253 228;
  --colors-positive-200: 171 241 192;
  --colors-positive-300: 130 234 158;
  --colors-positive-400: 60 224 120;
  --colors-positive-500: 19 195 96;
  --colors-positive-600: 7 161 79;
  --colors-positive-700: 13 127 63;
  --colors-positive-800: 16 86 46;
  --colors-positive-900: 15 50 30;

  /* Negative */
  --colors-negative-50: 255 245 247;
  --colors-negative-100: 255 232 237;
  --colors-negative-200: 254 211 219;
  --colors-negative-300: 253 193 202;
  --colors-negative-400: 255 163 175;
  --colors-negative-500: 255 127 143;
  --colors-negative-600: 240 59 91;
  --colors-negative-700: 208 13 48;
  --colors-negative-800: 141 8 33;
  --colors-negative-900: 76 15 23;

  /* Warning */
  --colors-warning-50: 254 247 236;
  --colors-warning-100: 255 238 211;
  --colors-warning-200: 254 220 165;
  --colors-warning-300: 254 202 132;
  --colors-warning-400: 255 181 77;
  --colors-warning-500: 237 153 14;
  --colors-warning-600: 191 121 17;
  --colors-warning-700: 157 93 3;
  --colors-warning-800: 109 63 9;
  --colors-warning-900: 62 35 10;

  /* Neutral */
  --colors-neutral-50: 249 251 250;
  --colors-neutral-100: 239 244 241;
  --colors-neutral-200: 217 226 220;
  --colors-neutral-300: 187 198 190;
  --colors-neutral-400: 129 140 133;
  --colors-neutral-500: 100 111 104;
  --colors-neutral-600: 77 86 79;
  --colors-neutral-700: 56 65 59;
  --colors-neutral-800: 37 43 39;
  --colors-neutral-900: 21 26 22;

  /* Disabled */
  --colors-disabled-50: 249 251 250;
  --colors-disabled-100: 239 244 241;
  --colors-disabled-200: 217 226 220;
  --colors-disabled-300: 187 198 190;
  --colors-disabled-400: 129 140 133;
  --colors-disabled-500: 100 111 104;
  --colors-disabled-600: 77 86 79;
  --colors-disabled-700: 56 65 59;
  --colors-disabled-800: 37 43 39;
  --colors-disabled-900: 21 26 22;
}

Tailwind Configuration

If you don't need to support multiple themes, or if you'd prefer to use Tailwind variants to implement your themes, you can customize Storefront UI's colors inside of your Tailwind configuration.

export default {
  //...
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f5f9ff',
          100: '#e9f3ff',
          200: '#c8e0ff',
          300: '#a6ccff',
          400: '#6ea1ff',
          500: '#3375ff',
          600: '#2e6ae6',
          700: '#264ebf',
          800: '#1d3f99',
          900: '#132f72',
        }
      },
    },
  },
  //...
};

To learn more about the different ways to declare colors in Tailwind, check out the Tailwind documentation.