Theme colors

General

We already explained in the Styling introduction hat every color in our palettes is derived from the main colors labeled with the number 500. For each the default palettes, the base colors can be found under following names:

• @neutralColors500
• @primaryColors500
• @secondaryColors500
• @successColors500
• @warningColors500
• @errorColors500

And here are all the colors derived from the base ones. This pattern makes it quick and easy to modify entire palettes:

Neutral colorsPrimary colorsSecondary colorsSuccess colorsWarning colorsError colors

:root {
    --neutralColor: @neutralColor;
    --neutralColors0: @neutralColors0;
    --neutralColors10: @neutralColors10;
    --neutralColors20: @neutralColors20;
    --neutralColors50: @neutralColors50;
    --neutralColors100: @neutralColors100;
    --neutralColors200: @neutralColors200;
    --neutralColors300: @neutralColors300;
    --neutralColors400: @neutralColors400;
    --neutralColors500: @neutralColors500;
    --neutralColors600: @neutralColors600;
    --neutralColors700: @neutralColors700;
    --neutralColors800: @neutralColors800;
    --neutralColors900: @neutralColors900;
    --neutralColors1000: @neutralColors1000;
}

@neutralColor: #8c98a8;

@hueNeutral: hue(@neutralColor);
@saturationNeutral: saturation(@neutralColor);

@invertNeutralColors: 'false';

.generate-neutral-colors() when (@invertNeutralColors = 'false') {
    @neutralColors0: mix(hsl(@hueNeutral, @saturationNeutral, 100%), transparent, 100);
    @neutralColors10: mix(hsl(@hueNeutral, @saturationNeutral, 99%), transparent, 100);
    @neutralColors20: mix(hsl(@hueNeutral, @saturationNeutral, 98%), transparent, 100);
    @neutralColors50: mix(hsl(@hueNeutral, @saturationNeutral, 95%), transparent, 100);
    @neutralColors100: mix(hsl(@hueNeutral, @saturationNeutral, 90%), transparent, 100);
    @neutralColors200: mix(hsl(@hueNeutral, @saturationNeutral, 80%), transparent, 100);
    @neutralColors300: mix(hsl(@hueNeutral, @saturationNeutral, 70%), transparent, 100);
    @neutralColors400: mix(hsl(@hueNeutral, @saturationNeutral, 60%), transparent, 100);
    @neutralColors500: mix(hsl(@hueNeutral, @saturationNeutral, 50%), transparent, 100);
    @neutralColors600: mix(hsl(@hueNeutral, @saturationNeutral, 40%), transparent, 100);
    @neutralColors700: mix(hsl(@hueNeutral, @saturationNeutral, 30%), transparent, 100);
    @neutralColors800: mix(hsl(@hueNeutral, @saturationNeutral, 20%), transparent, 100);
    @neutralColors900: mix(hsl(@hueNeutral, @saturationNeutral, 10%), transparent, 100);
    @neutralColors1000: mix(hsl(@hueNeutral, @saturationNeutral, 0%), transparent, 100);
}

.generate-neutral-colors() when (@invertNeutralColors = 'true') {
    @neutralColors0: mix(hsl(@hueNeutral, @saturationNeutral, 0%), transparent, 100);
    @neutralColors10: mix(hsl(@hueNeutral, @saturationNeutral, 10%), transparent, 100);
    @neutralColors20: mix(hsl(@hueNeutral, @saturationNeutral, 20%), transparent, 100);
    @neutralColors50: mix(hsl(@hueNeutral, @saturationNeutral, 30%), transparent, 100);
    @neutralColors100: mix(hsl(@hueNeutral, @saturationNeutral, 40%), transparent, 100);
    @neutralColors200: mix(hsl(@hueNeutral, @saturationNeutral, 50%), transparent, 100);
    @neutralColors300: mix(hsl(@hueNeutral, @saturationNeutral, 60%), transparent, 100);
    @neutralColors400: mix(hsl(@hueNeutral, @saturationNeutral, 70%), transparent, 100);
    @neutralColors500: mix(hsl(@hueNeutral, @saturationNeutral, 80%), transparent, 100);
    @neutralColors600: mix(hsl(@hueNeutral, @saturationNeutral, 90%), transparent, 100);
    @neutralColors700: mix(hsl(@hueNeutral, @saturationNeutral, 95%), transparent, 100);
    @neutralColors800: mix(hsl(@hueNeutral, @saturationNeutral, 98%), transparent, 100);
    @neutralColors900: mix(hsl(@hueNeutral, @saturationNeutral, 99%), transparent, 100);
    @neutralColors1000: mix(hsl(@hueNeutral, @saturationNeutral, 100%), transparent, 100);
}

.generate-neutral-colors();

:root {
    --primaryColor: @primaryColor;
    --primaryColors10: @primaryColors10;
    --primaryColors20: @primaryColors20;
    --primaryColors50: @primaryColors50;
    --primaryColors100: @primaryColors100;
    --primaryColors200: @primaryColors200;
    --primaryColors300: @primaryColors300;
    --primaryColors400: @primaryColors400;
    --primaryColors500: @primaryColors500;
    --primaryColors600: @primaryColors600;
    --primaryColors700: @primaryColors700;
    --primaryColors800: @primaryColors800;
    --primaryColors900: @primaryColors900;
}

@primaryColor: #464fe5;

@huePrimary: hsvhue(@primaryColor);
@saturationPrimary: hsvsaturation(@primaryColor);

@invertPrimaryColors: 'false';

.generate-primary-colors() when (@invertPrimaryColors = 'false') {
    @primaryColors10: mix(hsl(@huePrimary, @saturationPrimary, 99%), transparent, 100);
    @primaryColors20: mix(hsl(@huePrimary, @saturationPrimary, 98%), transparent, 100);
    @primaryColors50: mix(hsl(@huePrimary, @saturationPrimary, 95%), transparent, 100);
    @primaryColors100: mix(hsl(@huePrimary, @saturationPrimary, 90%), transparent, 100);
    @primaryColors200: mix(hsl(@huePrimary, @saturationPrimary, 80%), transparent, 100);
    @primaryColors300: mix(hsl(@huePrimary, @saturationPrimary, 70%), transparent, 100);
    @primaryColors400: mix(hsl(@huePrimary, @saturationPrimary, 60%), transparent, 100);
    @primaryColors500: mix(hsl(@huePrimary, @saturationPrimary, 50%), transparent, 100);
    @primaryColors600: mix(hsl(@huePrimary, @saturationPrimary, 40%), transparent, 100);
    @primaryColors700: mix(hsl(@huePrimary, @saturationPrimary, 30%), transparent, 100);
    @primaryColors800: mix(hsl(@huePrimary, @saturationPrimary, 20%), transparent, 100);
    @primaryColors900: mix(hsl(@huePrimary, @saturationPrimary, 10%), transparent, 100);
}
.generate-primary-colors() when (@invertPrimaryColors = 'true') {
    @primaryColors10: mix(hsl(@huePrimary, @saturationPrimary, 10%), transparent, 100);
    @primaryColors20: mix(hsl(@huePrimary, @saturationPrimary, 20%), transparent, 100);
    @primaryColors50: mix(hsl(@huePrimary, @saturationPrimary, 30%), transparent, 100);
    @primaryColors100: mix(hsl(@huePrimary, @saturationPrimary, 40%), transparent, 100);
    @primaryColors200: mix(hsl(@huePrimary, @saturationPrimary, 50%), transparent, 100);
    @primaryColors300: mix(hsl(@huePrimary, @saturationPrimary, 60%), transparent, 100);
    @primaryColors400: mix(hsl(@huePrimary, @saturationPrimary, 70%), transparent, 100);
    @primaryColors500: mix(hsl(@huePrimary, @saturationPrimary, 80%), transparent, 100);
    @primaryColors600: mix(hsl(@huePrimary, @saturationPrimary, 90%), transparent, 100);
    @primaryColors700: mix(hsl(@huePrimary, @saturationPrimary, 95%), transparent, 100);
    @primaryColors800: mix(hsl(@huePrimary, @saturationPrimary, 98%), transparent, 100);
    @primaryColors900: mix(hsl(@huePrimary, @saturationPrimary, 99%), transparent, 100);
}

.generate-primary-colors();

:root {
    --secondaryColor: @secondaryColor;
    --secondaryColors10: @secondaryColors10;
    --secondaryColors20: @secondaryColors20;
    --secondaryColors50: @secondaryColors50;
    --secondaryColors100: @secondaryColors100;
    --secondaryColors200: @secondaryColors200;
    --secondaryColors300: @secondaryColors300;
    --secondaryColors400: @secondaryColors400;
    --secondaryColors500: @secondaryColors500;
    --secondaryColors600: @secondaryColors600;
    --secondaryColors700: @secondaryColors700;
    --secondaryColors800: @secondaryColors800;
    --secondaryColors900: @secondaryColors900;
}

@secondaryColor: #d6302d;

@hueSecondary: hue(@secondaryColor);
@saturationSecondary: saturation(@secondaryColor);

@invertSecondaryColors: 'false';

.generate-secondary-colors() when (@invertSecondaryColors = 'false') {
    @secondaryColors10: mix(hsl(@hueSecondary, @saturationSecondary, 99%), transparent, 100);
    @secondaryColors20: mix(hsl(@hueSecondary, @saturationSecondary, 98%), transparent, 100);
    @secondaryColors50: mix(hsl(@hueSecondary, @saturationSecondary, 95%), transparent, 100);
    @secondaryColors100: mix(hsl(@hueSecondary, @saturationSecondary, 90%), transparent, 100);
    @secondaryColors200: mix(hsl(@hueSecondary, @saturationSecondary, 80%), transparent, 100);
    @secondaryColors300: mix(hsl(@hueSecondary, @saturationSecondary, 70%), transparent, 100);
    @secondaryColors400: mix(hsl(@hueSecondary, @saturationSecondary, 60%), transparent, 100);
    @secondaryColors500: mix(hsl(@hueSecondary, @saturationSecondary, 50%), transparent, 100);
    @secondaryColors600: mix(hsl(@hueSecondary, @saturationSecondary, 40%), transparent, 100);
    @secondaryColors700: mix(hsl(@hueSecondary, @saturationSecondary, 30%), transparent, 100);
    @secondaryColors800: mix(hsl(@hueSecondary, @saturationSecondary, 20%), transparent, 100);
    @secondaryColors900: mix(hsl(@hueSecondary, @saturationSecondary, 10%), transparent, 100);
}

.generate-secondary-colors() when (@invertSecondaryColors = 'true') {
    @secondaryColors10: mix(hsl(@hueSecondary, @saturationSecondary, 10%), transparent, 100);
    @secondaryColors20: mix(hsl(@hueSecondary, @saturationSecondary, 20%), transparent, 100);
    @secondaryColors50: mix(hsl(@hueSecondary, @saturationSecondary, 30%), transparent, 100);
    @secondaryColors100: mix(hsl(@hueSecondary, @saturationSecondary, 40%), transparent, 100);
    @secondaryColors200: mix(hsl(@hueSecondary, @saturationSecondary, 50%), transparent, 100);
    @secondaryColors300: mix(hsl(@hueSecondary, @saturationSecondary, 60%), transparent, 100);
    @secondaryColors400: mix(hsl(@hueSecondary, @saturationSecondary, 70%), transparent, 100);
    @secondaryColors500: mix(hsl(@hueSecondary, @saturationSecondary, 80%), transparent, 100);
    @secondaryColors600: mix(hsl(@hueSecondary, @saturationSecondary, 90%), transparent, 100);
    @secondaryColors700: mix(hsl(@hueSecondary, @saturationSecondary, 95%), transparent, 100);
    @secondaryColors800: mix(hsl(@hueSecondary, @saturationSecondary, 98%), transparent, 100);
    @secondaryColors900: mix(hsl(@hueSecondary, @saturationSecondary, 99%), transparent, 100);
}

.generate-secondary-colors();

@successColor: #10b970;

@hueSuccess: hue(@successColor);
@saturationSuccess: saturation(@successColor);

@successColors10: mix(hsl(@hueSuccess, @saturationSuccess, 99%), transparent, 100);
@successColors20: mix(hsl(@hueSuccess, @saturationSuccess, 98%), transparent, 100);
@successColors50: mix(hsl(@hueSuccess, @saturationSuccess, 95%), transparent, 100);
@successColors100: mix(hsl(@hueSuccess, @saturationSuccess, 90%), transparent, 100);
@successColors200: mix(hsl(@hueSuccess, @saturationSuccess, 80%), transparent, 100);
@successColors300: mix(hsl(@hueSuccess, @saturationSuccess, 70%), transparent, 100);
@successColors400: mix(hsl(@hueSuccess, @saturationSuccess, 60%), transparent, 100);
@successColors500: mix(hsl(@hueSuccess, @saturationSuccess, 50%), transparent, 100);
@successColors600: mix(hsl(@hueSuccess, @saturationSuccess, 30%), transparent, 100);
@successColors700: mix(hsl(@hueSuccess, @saturationSuccess, 20%), transparent, 100);
@successColors800: mix(hsl(@hueSuccess, @saturationSuccess, 10%), transparent, 100);
@successColors900: mix(hsl(@hueSuccess, @saturationSuccess, 5%), transparent, 100);

@warningColor: #ffc107;

@hueWarning: hue(@warningColor);
@saturationWarning: saturation(@warningColor);

@warningColors10: mix(hsl(@hueWarning, @saturationWarning, 99%), transparent, 100);
@warningColors20: mix(hsl(@hueWarning, @saturationWarning, 98%), transparent, 100);
@warningColors50: mix(hsl(@hueWarning, @saturationWarning, 95%), transparent, 100);
@warningColors100: mix(hsl(@hueWarning, @saturationWarning, 90%), transparent, 100);
@warningColors200: mix(hsl(@hueWarning, @saturationWarning, 80%), transparent, 100);
@warningColors300: mix(hsl(@hueWarning, @saturationWarning, 70%), transparent, 100);
@warningColors400: mix(hsl(@hueWarning, @saturationWarning, 60%), transparent, 100);
@warningColors500: mix(hsl(@hueWarning, @saturationWarning, 50%), transparent, 100);
@warningColors600: mix(hsl(@hueWarning, @saturationWarning, 40%), transparent, 100);
@warningColors700: mix(hsl(@hueWarning, @saturationWarning, 30%), transparent, 100);
@warningColors800: mix(hsl(@hueWarning, @saturationWarning, 20%), transparent, 100);
@warningColors900: mix(hsl(@hueWarning, @saturationWarning, 10%), transparent, 100);

@errorColor: #ea4640;

@hueError: hue(@errorColor);
@saturationError: saturation(@errorColor);

@errorColors10: mix(hsl(@hueError, @saturationError, 99%), transparent, 100);
@errorColors20: mix(hsl(@hueError, @saturationError, 98%), transparent, 100);
@errorColors50: mix(hsl(@hueError, @saturationError, 95%), transparent, 100);
@errorColors100: mix(hsl(@hueError, @saturationError, 90%), transparent, 100);
@errorColors200: mix(hsl(@hueError, @saturationError, 80%), transparent, 100);
@errorColors300: mix(hsl(@hueError, @saturationError, 70%), transparent, 100);
@errorColors400: mix(hsl(@hueError, @saturationError, 60%), transparent, 100);
@errorColors500: mix(hsl(@hueError, @saturationError, 50%), transparent, 100);
@errorColors600: mix(hsl(@hueError, @saturationError, 40%), transparent, 100);
@errorColors700: mix(hsl(@hueError, @saturationError, 30%), transparent, 100);
@errorColors800: mix(hsl(@hueError, @saturationError, 20%), transparent, 100);
@errorColors900: mix(hsl(@hueError, @saturationError, 10%), transparent, 100);

Shadows

We also provide shadow variables along with shadow mixins that help give your elements more depth and dimension:

Shadows variablesShadows mixins

@shadowXs: 0px 1px 3px rgba(17, 19, 22, 0.04);
@shadowS: 0px 1px 3px rgba(17, 19, 22, 0.08), 0px 1px 2px -1px rgba(17, 19, 22, 0.08);
@shadowM: 0px 2px 4px -2px rgba(17, 19, 22, 0.08), 0px 4px 6px -1px rgba(17, 19, 22, 0.08);
@shadowL: 0px 4px 6px -4px rgba(17, 19, 22, 0.08), 0px 12px 16px -4px rgba(17, 19, 22, 0.08);
@shadowXl: 0px 8px 12px -8px rgba(17, 19, 22, 0.08), 0px 20px 24px -4px rgba(17, 19, 22, 0.08);
@shadowXxl: 0px 24px 48px -12px rgba(17, 19, 22, 0.24);
@shadowReverse: 0px -4px 6px -1px rgba(17, 19, 22, 0.08), 0px -2px 4px -2px rgba(17, 19, 22, 0.08);

.shadow-xs() {
    box-shadow: @shadowXs;
}

.shadow-s() {
    box-shadow: @shadowS;
}

.shadow-m() {
    box-shadow: @shadowM;
}

.shadow-l() {
    box-shadow: @shadowL;
}

.shadow-xl() {
    box-shadow: @shadowXl;
}

.shadow-xxl() {
    box-shadow: @shadowXxl;
}

.shadow-reverse() {
    box-shadow: @shadowReverse;
}

Modifying palettes

Modifying color palettes is straightforward, thanks to the well-designed structure. To adjust the entire palette, simply modify the 500 color, and all other colors will be automatically generated based on that

@neutralColors500: #64D3BD;

Note: If you want intend to create a dark or monochromatic theme using a palette be careful when modifying the 500 colors especially with shades that are near the extreme ends of the light or dark spectrum in the palette. In such cases the palette may not generate properly, requiring manual adjustments for all colors in the palette:

@neutralColors50: #e9eff5;
@neutralColors100: #b9bfc4;
@neutralColors200: #6d7d8a;
@neutralColors300: #51606b;
@neutralColors400: #3c4d59;
@neutralColors500: #000f1c;
@neutralColors600: #222f38;
@neutralColors700: #5d656b;
@neutralColors800: #82898f;
@neutralColors900: #f2f5f7;

In such scenarios you might consider adjusting the variables of just specific blocks (elements) to your desired color or modifying one of the global variables while keeping the palettes unchanged. Further details on this approach will be discussed in the following section.

Global color variables

In Storefront we have a plenty of global variables from which other blocks derive their styles:

Global variables

:root {
    --globalBodyBackgroundColor: @globalBodyBackgroundColor;
    --globalFontColor: @globalFontColor;
    --globalFontColorSecondary: @globalFontColorSecondary;
    --globalFontColorTertiary: @globalFontColorTertiary;
}

@globalFontFamilyName: @baseFontFamilyName;
@globalBodyFontFamilyName: @globalFontFamilyName;
@globalButtonFontFamilyName: @globalFontFamilyName;
@globalInputFontFamilyName: @globalFontFamilyName;

@globalBaseFontSize: @baseFontSize;
@globalFontColor: @neutralColors800;
@fontColorLightness: hsvvalue(@globalFontColor);

.generate-font-colors() when (@fontColorLightness > 75) {
    @globalFontColorSecondary: darken(@globalFontColor, 20%);
    @globalFontColorTertiary: darken(@globalFontColor, 30%);
}
.generate-font-colors() when (@fontColorLightness <= 75) {
    @globalFontColorSecondary: lighten(@globalFontColor, 20%);
    @globalFontColorTertiary: lighten(@globalFontColor, 30%);
}

.generate-font-colors();

@globalBodyBackgroundColor: #fff;

@globalSpacing: 1rem;
@globalBorderRadius: 2;

@sizeXsName: xs;
@sizeSName: s;
@sizeMName: m;
@sizeLName: l;
@sizeXlName: xl;
@sizeXxlName: xxl;

@scrollBarBgColorDefault: @neutralColors100;
@scrollBarThumbColorDefault: @neutralColors400;

@scrollBarWidthDefault: 6px;
@scrollBarHeightDefault: 6px;

@scrollBarTrackBgHoverDefault: @neutralColors400;
@scrollBarThumbBgHoverDefault: @neutralColors400;

@bodyPaddingHorizontal: @globalSpacing;

For example when creating a dark or monochromatic mode you might consider modifying global variables while keeping the palettes unchanged:

@globalFontColor: @shadeLight;
@globalBodyBackgroundColor: @shadeDark;

This approach addresses worries about the overall appearance of your store compared to manually modifying an entire palette. It is a faster and safer method that enables you to focus on specific sections of the application that may not respond well to global changes providing a better understanding and consideration for those elements. Therefore, it is a recommended strategy in such cases.