Midnight

A darkmode theme created for testing purposes.

A darkmode theme for your storefront.

${"base64":" ","img":{"width":1889,"height":719,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":858304,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/midnight___2bb274e36a39ff9c2cfa3dcc740cbfab.png"}}$

Use `midnight` as your theme

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

src/themes/midnight.scss


_151// ----------------------------------------------------------
_151// GLOBAL TOKENS
_151// Theme Midnight
_151// ----------------------------------------------------------
_151
_151.theme {
_151  // --------------------------------------------------------
_151  // Colors (Branding Core)
_151  // --------------------------------------------------------
_151
_151  // PALETTE
_151  --fs-color-main-0: #0b0022;
_151  --fs-color-main-1: #13013e;
_151  --fs-color-main-2: #190054;
_151  --fs-color-main-3: #41208d;
_151  --fs-color-main-4: #6535d6;
_151
_151  --fs-color-accent-0: #25046d;
_151  --fs-color-accent-1: #001082;
_151  --fs-color-accent-2: #0017b9;
_151  --fs-color-accent-3: #1930d3;
_151  --fs-color-accent-4: #4d62ff;
_151
_151  --fs-color-neutral-0: #110035;
_151  --fs-color-neutral-1: #260f5a;
_151  --fs-color-neutral-2: #74808b;
_151  --fs-color-neutral-3: #9099a2;
_151  --fs-color-neutral-4: #c7ccd1;
_151  --fs-color-neutral-5: #e3e6e8;
_151  --fs-color-neutral-6: #816ba9;
_151  --fs-color-neutral-7: #dfd2fc;
_151
_151  // HIERARCHY
_151  --fs-color-primary-bkg: var(--fs-color-main-3);
_151  --fs-color-primary-bkg-light: var(--fs-color-main-2);
_151  --fs-color-primary-text: var(--fs-color-neutral-7);
_151
_151  --fs-color-secondary-text: var(--fs-color-neutral-7);
_151
_151  --fs-color-tertiary-bkg-hover: var(--fs-color-main-2);
_151  --fs-color-tertiary-bkg-active: var(--fs-color-main-3);
_151
_151  // COMPONENTS & STATES
_151  --fs-color-body-bkg: var(--fs-color-main-0);
_151  --fs-body-bkg: linear-gradient(
_151    0deg,
_151    var(--fs-color-main-0) 0%,
_151    var(--fs-color-main-2) 20%,
_151    var(--fs-color-main-0) 100%
_151  );
_151
_151  --fs-color-text-display: var(--fs-color-neutral-7);
_151
_151  --fs-color-link: var(--fs-color-neutral-7);
_151  --fs-color-link-inverse: var(--fs-color-neutral-7);
_151
_151  // SITUATIONS
_151  --fs-color-success-text: #50b191;
_151  --fs-color-success-bkg: #007043;
_151  --fs-color-warning-bkg: #b17000;
_151  --fs-color-disabled-bkg: var(--fs-color-main-3);
_151
_151  // --------------------------------------------------------
_151  // Typography (Branding Core)
_151  // --------------------------------------------------------
_151
_151  // FACE
_151  --fs-text-face-body: 'Raleway', sans-serif;
_151
_151  // NUMERIC SCALE
_151  --fs-text-size-base: 18px; // 1rem
_151  --fs-text-size-0: 14px; // Smallest
_151  --fs-text-size-1: 16px; // Smaller
_151
_151  // --------------------------------------------------------
_151  // Refinements
_151  // --------------------------------------------------------
_151
_151  // BORDERS
_151  --fs-border-radius: 20px;
_151
_151  --fs-border-width: 2px;
_151
_151  --fs-border-color-light: var(--fs-color-main-3);
_151  --fs-border-color: var(--fs-color-main-3);
_151  --fs-border-color-hover: var(--fs-color-main-2);
_151  --fs-border-color-active: var(--fs-color-main-3);
_151
_151  // SHADOW
_151  --fs-shadow-hover: 0 0 10px rgb(40 21 132 / 30%), 0 0 0 10px var(--fs-color-main-1);
_151
_151  // --------------------------------------------------------
_151  // FS UI Components
_151  // --------------------------------------------------------
_151
_151  --fs-logo-width: 8rem;
_151
_151  .section {
_151    // Add here the customizations for FastStore UI components.
_151
_151    [data-fs-skeleton] {
_151      --fs-skeleton-shimmer-bkg-color: var(--fs-color-disabled-bkg);
_151    }
_151
_151    [data-fs-hero] {
_151      --fs-hero-image-border-radius: 130px 0 0 130px;
_151      --fs-hero-main-bkg-color: var(--fs-color-main-1);
_151    }
_151
_151    [data-fs-button] {
_151      --fs-button-border-radius: var(--fs-border-radius-pill);
_151
_151      --fs-button-primary-inverse-text-color: var(--fs-color-neutral-0);
_151      --fs-button-primary-inverse-text-color-hover: var(--fs-color-text);
_151      --fs-button-primary-inverse-text-color-active: var(--fs-color-neutral-7);
_151
_151      --fs-button-primary-border-color: var(--fs-color-neutral-7);
_151
_151      --fs-button-tertiary-text-color-active: var(--fs-color-text);
_151    }
_151
_151    [data-fs-input] {
_151      --fs-input-text-size: 16px;
_151      background-color: var(--fs-color-body-bkg);
_151    }
_151
_151    [data-fs-input-field] {
_151      --fs-input-field-size: 16px;
_151    }
_151
_151    [data-fs-product-card] {
_151      --fs-product-card-padding: var(--fs-spacing-2) var(--fs-spacing-2) var(
_151          --fs-spacing-4
_151        ) var(--fs-spacing-2);
_151      --fs-product-card-bkg-color: var(--fs-color-main-0);
_151      --fs-product-card-img-scale-hover: 1.05;
_151    }
_151
_151    [data-fs-newsletter] {
_151      --fs-newsletter-text-color: var(--fs-color-text-display);
_151    }
_151
_151    [data-fs-navbar] {
_151      --fs-navbar-bkg-color: var(--fs-color-main-0);
_151    }
_151
_151    [data-fs-footer] {
_151      --fs-footer-bkg-color: var(--fs-color-main-0);
_151    }
_151  }
_151}

Go to faststore.config.js and change the theme to midnight:


_10theme: 'midnight',

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

Use midnight as your theme

Use `midnight` as your theme