theme.config.json

theme.config.json 是主题的全局配置文件，位于项目根目录，主要用于：

定义默认配置：如颜色、字体等全局样式。
存储商家全局配置：商家通过可视化编辑器修改的全局配置数据。
支持多风格预设：允许创建多种主题风格（如 Default、Dark）。
存储固定组件配置：商家通过可视化编辑器修改的固定组件配置数据。

数据结构

以下是主题 Bottle 的部分默认配置数据：

// theme.config.json
{
  "current": "Default",           // 当前使用的风格名称
  "presets": {                    // 风格配置集合
    "Default": {                  // 默认风格配置数据
      "theme": {                  // 主题全局配置数据
        "color_schemes": {        // 配色方案配置数据
          "scheme-1": {
            "settings": {
              "color_background": "#F3F2E0",
              ...
            }
          }
        }
      },
      "sections": {               // 固定组件配置
        ...
      }
    }
  }
}

字段说明

字段	数据类型	描述
current	String	当前使用的风格名称（如 Default）
presets	Object	风格配置集合，可添加自定义风格
presets.{name}	Object	单个风格的配置数据
presets.{name}.theme	Object	主题全局配置数据（颜色、字体等）
presets.{name}.sections	Object	固定组件配置，具体配置规范可参考 JSON 模板

自定义全局配置

你可以通过可视化编辑器，为全局配置项设置自定义数据，数据会存储在 theme.config.json 全局配置字段中。以下是 Bottle 主题修改全局页面背景颜色配置的示例：

打开可视化编辑器全局配置界面。如下图所示，默认情况下，全局页面背景颜色配置值为 #F3F2E0 。

修改全局页面背景颜色配置值为 #E0F1F3 。

在主题代码编辑器中查看 theme.config.json 配置文件，更新后的全局页面背景颜色存储在该文件中的 presets.\{name\}.theme.color_page_background 下。其中 color_page_background 键名在全局配置项中配置。如下片段样例展示了全局配置中的页面背景色配置：

{
  "current": "Default",
  "presets": {
    "Default": {
      "theme": {
        ...
        "color_page_background": "#e0f1f3",	// 修改后的全局配置数据
        ...
      },
      "sections": {}
    }
  }
}

多风格配置

你可以为主题添加多个风格，以支持商家在主题商城中选择使用。

添加新风格

在 JSON 文件中，可以通过在 presets 配置中添加一项来增加风格配置：

// theme.config.json
{
  "current": "Default",
  "presets": {
    "Default": {															// 默认风格
      "theme": {
        "color_schemes": {
          "scheme-1": {
            "settings": {
              "color_background": "#F3F2E0",	// 默认风格：配色方案1，背景色配置
              ...
            }
          }
        }
      }
    },
    "Dark": {	// 暗黑风格
      "theme": {
        "color_schemes": {
          "scheme-1": {
            "settings": {
              "color_background": "#000000",	// 暗黑风格：配色方案1，背景色配置
              ...
            }
          }
        }
      }
    }
  }
}

切换风格

通过修改 current 字段的值为 Dark，即可切换到暗黑风格：

// theme.config.json
{
  "current": "Dark",   // 切换到暗黑风格
  "presets": {
    "Default": {       // 默认风格
      ...
    },
    "Dark": {          // 暗黑风格
      ...
    }
  }
}