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
src/pages/_app.tsxfile and import the desired theme's stylesheet. For example:
store.config.jsand change the
themevalue to the name of the desired theme (e.g.,
src/styles/themesand open the
scssfile of the theme being modified (e.g.,
Add new tokens or change the existing ones according to your preferences. Check out the Global Tokens section for more information on each token.
Changing 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.