Overview

By default, every FastStore project comes with the Brandless theme. However, you have the option to use one of the available themes or create a custom theme.

You have the flexibility and freedom to style the theme by overriding it using global or local tokens, or by starting from scratch using your preferred styling tool.

Available Themes

Midnight

Soft Blue

Creating a Custom Theme

Open your starter project and create a new .scss file on src/themes (e.g. my-theme.scss).
Add the tokens you want to overwrite inside the .theme class.

If you want, you can work on custom-theme.scss file that's ready to use. We are using CSS cascade layers feature to better deal with styling specificities issues, so keeping the @layer theme in the file is recommended.

src/themes/my-theme.scss


_33
_33@layer theme {
_33  .theme {
_33    // --------------------------------------------------------
_33    // Colors (Branding Core)
_33    // --------------------------------------------------------
_33
_33    // --------------------------------------------------------
_33    // Typography (Branding Core)
_33    // --------------------------------------------------------
_33
_33    // --------------------------------------------------------
_33    // Spacing (UI Essentials)
_33    // --------------------------------------------------------
_33
_33    // --------------------------------------------------------
_33    // Grid & Layout (UI Essentials)
_33    // --------------------------------------------------------
_33
_33    // --------------------------------------------------------
_33    // Interactive Controls (UI Essentials)
_33    // --------------------------------------------------------
_33
_33    // --------------------------------------------------------
_33    // Refinements
_33    // --------------------------------------------------------
_33
_33    // --------------------------------------------------------
_33    // FS UI Components
_33    // --------------------------------------------------------
_33    // Add here the customizations for FastStore UI components.
_33  }
_33}

Go to discovery.config.js and change the theme from custom-theme to your file's name, for example:

discovery.config.js


_10theme: 'my-theme',