Extending or modifying a theme
Themes are CSS stylesheets consisting of configurable design tokens. If you wish, you can create your own theme from scratch or modify an existing one. In the following step-by-step, you'll learn how to customize an existing theme according to your preferences.
Check the list of official themes for more information.
Step by step​
-
Open the
src/pages/_app.tsx
file and import the desired theme's stylesheet. For example:import '../styles/themes/midnight.scss'
-
Go to
store.config.js
and change thetheme
value to the name of the desired theme (e.g.,midnight
):// Theming
theme: 'midnight', -
Go to
src/styles/themes
and open thescss
file of the theme being modified (e.g.,midnight.scss
). -
Add new tokens or change the existing ones according to your preferences. Check out the Global Tokens section for more information on each token.
cautionChanging the value of a global token may affect different parts of your store's interface.
-
Access the stylesheet of any desired component (e.g.,
/src/components/cart/CartItem/cart-item.module.scss
) and use your new tokens according to your preferences. -
Save your changes.