Skip to main content

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.

Didn't find your answers? Ask the Community. For documentation suggestions, submit your feedback.

JOIN THE COMMUNITY

ON THIS PAGE