How to change color scheme and fonts

This topic guides you on how to configure the color scheme and fonts in the D-store template source code to customize the theme color and UI styles for your D-store.

Before you start

Make sure you complete the following steps:

1. Get onboarded to Mini Program Platform. For more information, see Alipay+ merchant onboarding.
2. Create a mini program on Mini Program Platform. For more information, see Manage Alipay+ mini programs in partner apps.
3. Contact our technical support to get the F&B (food and beverage) D-store template source code to configure your D-store UI styles.
4. Understand the design tokens and their usage scenarios in F&B D-store template source code. For more information, see About design tokens.
5. (Optional) To preview color changing effect, update IDE to the latest version and enable Appx 2.0 on IDE. To enable Appx 2.0, follow the steps below:

1. Open IDE and click Detail, where you can configure your project settings.
2. Check the option "Use Lib v2.0".

Customize color scheme

To customize the color scheme of your D-store, follow the steps below:

Step 1: Generate color scheme

Refer to the design tokens and usage scenarios in the About design tokens topic to generate your own color scheme.

Step 2: Set configurations in source code

Set the configurations in the ./packages/mp/src/constants/theme.ts file which includes the following two kinds of styles:

• DefaultStyle: Where you can check the default configurations of UI styles.
• CustomStyle: Where you can customize the UI styles of your D-store.

To customize the color scheme in the UI styles, focus on CustomStyle, which includes the following configurations:

• styleInfo: Specify the colors of components. For more information about how to set styleInfo, see Set component colors.
• tabInfo: Specify the icon styles of navigation tabs. For more information about how to set tabInfo, see Set tab styles.
• modalImages: Specify the image styles of modal dialogs. For more information about how to set modalImages, see Set modal dialog images.
• defaultImages: Specify the default images. For more information about how to set defaultImages, see Set default images.

Note:

• If you configure both CustomStyle and DefaultStyle, the configurations in CustomStyle override those in DefaultStyle.
• If you insist on changing DefaultStyle, clear the configurations in CustomStyle, otherwise the configurations in CustomStyle cannot take effect.

Set component colors

To set component colors, specify color codes for the design token properties in styleInfo, for example, '--color-brand-tertiary': '#FF8732'.

For more information, refer to the following table:

• The Property column provides the design token properties in the code.
• The Design token column provides the basic design tokens corresponding to the design token properties. For more information, see About design tokens.
• The Usage scenario column shows how design tokens are used in your D-store (including but not limited to those illustrated).

Set tab styles

To set the icon styles of navigation tabs, specify images URLs in tabInfo. The tabInfo configuration includes four arrays that correspond to specific tabs, as shown below:

Note:

• The size of the icons is 48 x 48 pixels.
• Make sure the icon color matches the theme color.

For more information, refer to the following table:

• The Array column provides the four arrays in tabInfo to set icon styles.
• The Token column provides the token properties in each array:

• icon: Indicates what a tab looks like when it is not pressed.
• activedIcon: Indicates what a tab looks like when it is pressed.

Set modal dialog images

To set the image styles of modal dialogs, specify image URLs for the properties in modalImages.

Note:

• The size of the images is 430 x 330 pixels.
• Make sure the image color matches the theme color.

For more information, refer to the following table:

Set default images

Specify image URLs for the properties in defaultImages to set the default images to be displayed to users in specific scenarios, for example, when a requested image fails to load.

For more information, refer to the following table:

After you complete the above configurations, the relevant code is generated, as shown in the following sample:

export const CustomStyle = {
  styleInfo: {
    '--color-brand-tertiary': '#FF8732',
    '--color-brand-primary': '#d62300',
    '--color-brand-secondary': '#d62300',
    '--color-brand-rewards': '#ff8732',
    '--color-content-primary': '#502314',
    '--color-content-secondary': '#502314',
    '--color-content-tertiary': '#3c372c',
    '--color-content-weak': '#ADA59A',
    '--color-content-default': '#D4C7B7',
    '--color-content-link': '#D62300',
    '--color-content-button': '#f5ebdc',
    '--color-content-highlight': '#502314',
    '--color-content-selection': '#502314',
    '--color-content-action': '#502314',
    '--color-content-white': '#ffffff',
    '--color-border-enabled': '#D7C7B5',
    '--color-border-disabled': '#E1D6D0',
    '--color-border-active': '#502314',
    '--color-border-brand': '#D7C7B5',
    '--color-dark': '#502314',
    '--color-light': '#F5EBDC',
    '--color-background-primary': '#ECDBC1',
    '--color-background-secondary': '#E3D9CF',
    '--color-background-tertiary': '#E3D9CF',
    '--color-background-card': '#ffffff',
    '--border-button-width': '1rpx',
  },
  tabInfo: [
    {
      icon: 'https://cdn.marmot-cloud.com/storage/2022/11/17/2ed4e8a2-49a1-4790-9983-9d5dcb12a2fc.png',
      activedIcon:
        'https://cdn.marmot-cloud.com/storage/2022/11/17/a238738a-69e0-4e8b-b42a-8ad2dff306af.png',
    },
    {
      icon: 'https://cdn.marmot-cloud.com/storage/2022/11/17/d3993b38-e344-423b-90d5-39598da73d62.png',
      activedIcon:
        'https://cdn.marmot-cloud.com/storage/2022/11/17/7f36df1b-b677-42ac-baa8-ce7434d3f2ee.png',
    },
    {
      icon: 'https://cdn.marmot-cloud.com/storage/2022/11/17/31775778-859b-4e4d-84f4-396e9d2bd1cd.png',
      activedIcon:
        'https://cdn.marmot-cloud.com/storage/2022/11/17/933a4da5-8a9f-4266-9cc2-9dfe0f54415e.png',
    },
  ],
  modalImages: {
    priceUpdated:
      'https://cdn.marmot-cloud.com/storage/2022/11/16/dcf97756-bbdd-4921-bdb1-f4cbbc8415e7.png',
    pickupTimeInvalid:
      'https://cdn.marmot-cloud.com/storage/2022/11/16/fb3d0407-b15d-4cb1-ab8a-8074676dcc81.png',
    hawkerClosed:
      'https://cdn.marmot-cloud.com/storage/2022/11/16/8e2f65f6-3691-4659-a687-3ac3851d3173.png',
    itemInvalid:
      'https://cdn.marmot-cloud.com/storage/2022/11/16/3d8ea090-df68-4dd6-a419-49deca6f8e97.png',
    default:
      'https://cdn.marmot-cloud.com/storage/2022/7/6/7429713d-7a24-4a6c-aaef-1c55a46c48f5.png',
    orderCanceled:
      'https://cdn.marmot-cloud.com/storage/2022/11/16/5e2101dc-b5fa-4e2f-b11b-dea9a78c135d.png',
  },
  defaultImages: {
    store:
      'https://cdn.marmot-cloud.com/storage/2022/11/17/87eea765-dee2-4408-b4be-7847e9344b16.png',
    headerBg:
      'https://cdn.marmot-cloud.com/storage/2022/11/16/3c670e24-bd93-4b9a-860d-f4e5865b80a0.png',
    food: 'https://cdn.marmot-cloud.com/storage/2022/11/16/bec9044d-c8f5-4d90-b20e-65ce213fa8b1.png',
    foodCenter:
      'https://cdn.marmot-cloud.com/storage/2022/11/16/a1bc277f-d03d-47c0-9165-cd2ef5e80f56.png',
    systemError:
      'https://cdn.marmot-cloud.com/storage/2022/11/16/591fde83-ade9-46d2-897a-4d07fbbf39d0.png',
    emptyError:
      'https://cdn.marmot-cloud.com/storage/2022/11/16/f0ebcebd-6603-4340-90d6-2bcb64802ac4.png',
    networkError: '../images/network_error.png',
    banner:
      'https://cdn.marmot-cloud.com/storage/2022/11/17/f9329825-e165-4c6e-9b43-a4afddcaafe9.png',
  },
};

Customize fonts

To customize the fonts of your D-store, specify values for the font-family and src properties in font-face in the ./packages/mp/src/app.less file.

See the following sample:

@font-face {
  font-family: AlibabaSans-Bold;
  src: url(https://cdn.marmot-cloud.com/storage/2022/6/9/70f8a8ff-9fd4-4557-a527-a4890281e5b8.ttf);
}
@font-face {
  font-family: AlibabaSans-Medium;
  src: url(https://cdn.marmot-cloud.com/storage/2022/6/9/b30c5e14-17d9-47c7-a5ea-1ff7c52e4348.ttf);
}
@font-face {
  font-family: AlibabaSans-Regular;
  src: url(https://cdn.marmot-cloud.com/storage/2022/6/9/26daba54-c219-4dc2-b27b-216ee93ce01e.ttf);
}

After you finish the configurations, run your mini program to view the effect.