Themes
Themes are CSS stylesheets consisting of configurable design tokens. You can create your own theme by setting up global and local tokens as desired.
A Theme is what enables you to change the look and feel of a FastStore project. It is what differentiates one UI from another and where the store branding lives. In practice, Themes are CSS stylesheets consisting of configurable design tokens.
-
Global tokens - structural styles responsible for establishing the behavior (e.g., showing/hiding a dropdown menu) and design pattern of a component.
-
Local tokens - a set of configurable design tokens responsible for defining the appearance of graphical elements, such as typography, type scale, colors, borders, spacing, and more.
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
Creating a custom theme
- Create a new
.scssfile onsrc/themes(e.g.my-theme.scss) in your starter project (opens in a new tab), and add the tokens you want to overwrite inside the.themeclass.
If you want, you can work on custom-theme.scss file that's ready to use.
.theme {
// --------------------------------------------------------
// Colors (Branding Core)
// --------------------------------------------------------
// --------------------------------------------------------
// Typography (Branding Core)
// --------------------------------------------------------
// --------------------------------------------------------
// Spacing (UI Essentials)
// --------------------------------------------------------
// --------------------------------------------------------
// Grid & Layout (UI Essentials)
// --------------------------------------------------------
// --------------------------------------------------------
// Interactive Controls (UI Essentials)
// --------------------------------------------------------
// --------------------------------------------------------
// Refinements
// --------------------------------------------------------
// --------------------------------------------------------
// Components
// --------------------------------------------------------
}- Go to
faststore.config.jsand change thethemeto your file's name:
// Theming
theme: 'my-theme',