Theming
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 (opens new window), 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 (opens new window)
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 (opens new window) 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: 240 253 244;
--colors-primary-100: 220 252 231;
--colors-primary-200: 187 247 208;
--colors-primary-300: 134 239 172;
--colors-primary-400: 74 222 128;
--colors-primary-500: 2 198 82;
--colors-primary-600: 10 171 69;
--colors-primary-700: 1 137 55;
--colors-primary-800: 22 101 52;
--colors-primary-900: 20 83 45;
/* Secondary */
--colors-secondary-50: 245 243 255;
--colors-secondary-100: 237 233 254;
--colors-secondary-200: 221 214 254;
--colors-secondary-300: 196 181 253;
--colors-secondary-400: 167 139 250;
--colors-secondary-500: 135 92 246;
--colors-secondary-600: 111 64 236;
--colors-secondary-700: 97 49 221;
--colors-secondary-800: 83 30 211;
--colors-secondary-900: 68 21 178;
/* Positive */
--colors-positive-50: 240 253 244;
--colors-positive-100: 220 252 231;
--colors-positive-200: 187 247 208;
--colors-positive-300: 134 239 172;
--colors-positive-400: 74 222 128;
--colors-positive-500: 2 198 82;
--colors-positive-600: 10 171 69;
--colors-positive-700: 1 137 55;
--colors-positive-800: 22 101 52;
--colors-positive-900: 20 83 45;
/* Negative */
--colors-negative-50: 255 241 242;
--colors-negative-100: 255 228 230;
--colors-negative-200: 254 205 211;
--colors-negative-300: 253 164 175;
--colors-negative-400: 251 113 133;
--colors-negative-500: 244 63 94;
--colors-negative-600: 225 29 72;
--colors-negative-700: 190 18 60;
--colors-negative-800: 159 18 57;
--colors-negative-900: 136 19 55 1;
/* Warning */
--colors-warning-50: 254 252 232;
--colors-warning-100: 254 249 195;
--colors-warning-200: 254 240 138;
--colors-warning-300: 253 224 71;
--colors-warning-400: 250 204 21;
--colors-warning-500: 234 179 8;
--colors-warning-600: 202 138 4;
--colors-warning-700: 161 98 7;
--colors-warning-800: 133 77 14;
--colors-warning-900: 113 63 18;
/* Neutral */
--colors-neutral-50: 250 250 250;
--colors-neutral-100: 244 244 245;
--colors-neutral-200: 228 228 231;
--colors-neutral-300: 212 212 216;
--colors-neutral-400: 161 161 170;
--colors-neutral-500: 113 113 122;
--colors-neutral-600: 82 82 91;
--colors-neutral-700: 63 63 70;
--colors-neutral-800: 39 39 42;
--colors-neutral-900: 24 24 27;
/* Disabled */
--colors-disabled-50: 250 250 250;
--colors-disabled-100: 244 244 245;
--colors-disabled-200: 228 228 231;
--colors-disabled-300: 212 212 216;
--colors-disabled-400: 161 161 170;
--colors-disabled-500: 113 113 122;
--colors-disabled-600: 82 82 91;
--colors-disabled-700: 63 63 70;
--colors-disabled-800: 39 39 42;
--colors-disabled-900: 24 24 27;
}
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 (opens new window).