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.

tip

Check the list of official themes for more information.

---

Step by step

1. Open the src/pages/_app.tsx file and import the desired theme's stylesheet. For example:

   import '../styles/themes/midnight.scss'

2. Go to store.config.js and change the theme value to the name of the desired theme (e.g., midnight):

   // Theming
   theme: 'midnight',

3. Go to src/styles/themes and open the scss file of the theme being modified (e.g., midnight.scss).

4. Add new tokens or change the existing ones according to your preferences. Check out the Global Tokens section for more information on each token.

   caution

   Changing the value of a global token may affect different parts of your store's interface.

5. 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.

6. Save your changes.