theme.config.json

theme.config.json is the global configuration file, which is placed in the root directory of the project. This file is mainly used for:

Defining the default style: global styles, such as colors and fonts
Storing the merchant configuration: the global configuration data that merchants can edit through the theme visual editor
Presetting multiple styles: multiple theme styles, such as the default style and the dark style
Managing the fixed section configuration: the fixed section configuration data that merchants can edit through the theme visual editor

Data structure

The following example shows a part of the default configuration data of the Bottle theme.

// theme.config.json
{
  "current": "Default",           // The currently used theme style name
  "presets": {                    // Collection of theme styles
    "Default": {                  // Default style configuration data
      "theme": {                  // Theme global configuration data 
        "color_schemes": {				// Configuration data for colors
          "scheme-1": {
            "settings": {
              "color_background": "#F3F2E0",
              ...
            }
          }
        }
      },
      "sections": {								// Static section configurations
        ...
      }
    }
  }
}

Field description

Field	Data type	Description
current	String	The currently used theme style name, such as `Default`.
presets	Object	The configuration collection of theme styles. Custom styles can be added.
presets.{name}	Object	The configuration data of a theme style.
presets.{name}.theme	Object	The theme global configuration data, such as colors and fonts.
presets.{name}.sections	Object	The fixed section configurations. Refer to JSON templates for specific configuration specifications.

Custom global configuration

You can set custom data for the global configuration definitions through the theme editor. The data will be stored in the global configuration file theme.config.json.

The following steps show how to change the global background color of the Bottle theme.

Open the theme editor. As shown in the following image, the global background color is set to #F3F2E0 by default.

Change the global background color to #E0F1F3.
Confirm the changes in the theme.config.json configuration file via the theme code editor. The updated global page background color is stored in the file's presets.\{name\}.theme.color_page_background. The key name of color_page_background is configured in the global configuration definitions. The following example snippet shows the page color setting in the global configuration.

{
  "current": "Default",
  "presets": {
    "Default": {
      "theme": {
        ...
        "color_page_background": "#e0f1f3",	// The updated global configuration data
        ...
      },
      "sections": {}
    }
  }
}

Multi-style configuration

You can add multiple styles for a theme for merchants to choose from in the theme shop.

Add a new style

To add a new style for a theme, insert a style configuration under presets in the JSON file.

// theme.config.json
{
  "current": "Default",
  "presets": {
    "Default": {															// The default style
      "theme": {
        "color_schemes": {				
          "scheme-1": {
            "settings": {
              "color_background": "#F3F2E0",	// Background color:color scheme 1
              ...
            }
          }
        }
      }
    },
    "Dark": {	                                // The dark style
      "theme": {
        "color_schemes": {				
          "scheme-1": {
            "settings": {
              "color_background": "#000000",	// Background color:color scheme 2
              ...
            }
          }
        }
      }
    }
  }
}

Switch styles

You can switch to the dart theme style by modifying the value of current to Dark.

// theme.config.json
{
  "current": "Dark",	// Switch to the dark style
  "presets": {
    "Default": {			// Default style
      ...
    },
    "Dark": {					// Dark style
      ...
    }
  }
}

Fixed section configuration

You can set data for fixed sections through the theme editor. The configured data is saved in the presets.{name}.sections field within the theme.config.json file.

The following image shows the password protection page, which includes fixed sections Password page header and Password page footer**. You can edit the configurations of these sections in the theme editor.