Soft Blue

A basic theme for your storefront.

${"base64":" ","img":{"width":1900,"height":708,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":857356,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/soft-blue___b51efd8dd7623f9493efd77180ffc618.png"}}$

Use `soft-blue` as your theme

In your starter project, create a new file named soft-blue.scss in src/themes.
Add the following styles to src/themes/soft-blue.scss:

src/themes/soft-blue.scss


_78// ----------------------------------------------------------
_78// GLOBAL TOKENS
_78// Theme Soft Blue
_78// ----------------------------------------------------------
_78
_78@layer theme {
_78  .theme {
_78    // --------------------------------------------------------
_78    // Colors (Branding Core)
_78    // --------------------------------------------------------
_78
_78    // PALETTE
_78    --fs-color-main-0: #ecf0ff;
_78    --fs-color-main-1: #d8e2ff;
_78    --fs-color-main-2: #00419e;
_78    --fs-color-main-3: #002c71;
_78    --fs-color-main-4: #001947;
_78
_78    --fs-color-accent-0: #ebdcff;
_78    --fs-color-accent-1: #8d50fd;
_78    --fs-color-accent-2: #732fe2;
_78    --fs-color-accent-3: #5900c8;
_78    --fs-color-accent-4: #4700a0;
_78
_78    // HIERARCHY
_78    --fs-color-primary-bkg: var(--fs-color-main-4);
_78    --fs-color-primary-bkg-active: var(--fs-color-main-2);
_78    --fs-color-primary-bkg-light: var(--fs-color-main-0);
_78    --fs-color-primary-bkg-light-active: var(--fs-color-main-1);
_78
_78    // SITUATIONS
_78    --fs-color-success-bkg: #cee8de;
_78    --fs-color-warning-bkg: #f6e0ba;
_78
_78    // COMPONENTS & STATES
_78    --fs-color-text-display: var(--fs-color-main-4);
_78
_78    --fs-color-action-bkg: var(--fs-color-accent-3);
_78    --fs-color-action-bkg-hover: var(--fs-color-accent-2);
_78    --fs-color-action-bkg-active: var(--fs-color-accent-1);
_78
_78    // --------------------------------------------------------
_78    // Typography (Branding Core)
_78    // --------------------------------------------------------
_78
_78    // FACE
_78    --fs-text-face-body: 'Lato', -apple-system, system-ui, BlinkMacSystemFont, sans-serif;
_78
_78    // --------------------------------------------------------
_78    // Refinements
_78    // --------------------------------------------------------
_78
_78    // BORDERS
_78    --fs-border-radius: 0.25rem;
_78
_78    // SHADOW
_78    --fs-shadow: none;
_78    --fs-shadow-darker: 0 0 10px rgb(0 0 0 / 20%);
_78    --fs-shadow-hover: 0 1px 4px rgb(0 0 0 / 10%), 0 6px 8px rgb(0 0 0 / 10%);
_78
_78    // --------------------------------------------------------
_78    // FS UI Components
_78    // --------------------------------------------------------
_78    // Add here the customizations for FastStore UI components.
_78
_78    --fs-logo-width: 8rem;
_78
_78    [data-fs-product-card] {
_78      --fs-product-card-border-color: transparent;
_78      --fs-product-card-border-color-hover: var(--fs-border-color-light);
_78
_78      &[data-fs-product-card-bordered='true'] {
_78        --fs-product-card-border-color: var(--fs-border-color-light);
_78      }
_78
_78    }
_78  }
_78}

Go to faststore.config.js and change the theme to soft-blue:


_10theme: 'soft-blue',

Restart the server and check the new theme applied to your store. 🎉

Use soft-blue as your theme

Use `soft-blue` as your theme