Creating a theme

Themes are CSS stylesheets consisting of configurable design tokens. You can create your own theme by setting up global and local tokens as you wish.

---

Step by step

1. Create a new my-theme.scss file inside the src/styles/themes folder.

2. Copy the following code to the my-theme.scss file.

   // ----------------------------------------------------------
   // GLOBAL TOKENS
   // Custom Theme
   // ----------------------------------------------------------
   
   @import "../vendors/include-media";
   
   .custom-theme {
     // --------------------------------------------------------
     // Colors (Branding Core)
     // --------------------------------------------------------
   
     // --------------------------------------------------------
     // Typography (Branding Core)
     // --------------------------------------------------------
   
     // --------------------------------------------------------
     // Spacing (UI Essentials)
     // --------------------------------------------------------
   
     // --------------------------------------------------------
     // Grid & Layout (UI Essentials)
     // --------------------------------------------------------
   
     // --------------------------------------------------------
     // Interactive Controls (UI Essentials)
     // --------------------------------------------------------
   
     // --------------------------------------------------------
     // Refinements
     // --------------------------------------------------------
   
     // --------------------------------------------------------
     // Components
     // --------------------------------------------------------
   }

3. Check out the Global Tokens section to see all global tokens you can use to customize your frontend. For example:

   @import "../vendors/include-media";
   
   .custom-theme {
      --fs-color-main-0: #0b0022;
   }

4. Check the reference page of the component you wish to style to change any local token. For example:

   @import "../vendors/include-media";
   
   .custom-theme {
      [data-fs-button] {
       --fs-button-primary-inverse-text-color        : var(--fs-color-neutral-0);
       --fs-button-primary-inverse-text-color-hover  : var(--fs-color-text);
       --fs-button-primary-inverse-text-color-active : var(--fs-color-neutral-7);
   
       --fs-button-primary-border-color              : var(--fs-color-neutral-7);
   
       --fs-button-tertiary-text-color-active        : var(--fs-color-text);
     }
   }

5. Save your changes.

6. Open the src/pages/_app.tsx file and import the my-theme.scss stylesheet.

   import '../styles/themes/my-theme.scss'

7. Go to store.config.js and change the theme to your file's name (e.g., my-theme):

   // Theming
   -theme: 'soft-blue',
   +theme: 'my-theme',

8. Save your changes.