Documentation
Feedback
Guides
Storefront Development

Storefront Development
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

  1. In your starter project, create a new file named soft-blue.scss in src/themes.
  2. 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
}

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

_10
theme: 'soft-blue',

  1. Restart the server and check the new theme applied to your store. 🎉
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page