主题目录可能包含 theme.yaml、version.yaml 和 assets/images/theme-preview.png 文件。这些文件对于本地开发是可选的，但对于发布在 October CMS Marketplace 上的主题是必需的。
主题信息文件 theme.yaml 包含主题描述、作者姓名、作者网站URL以及其他一些信息。该文件应放置在主题的根目录中：
├── themes
| └── website
| ├── pages
| ├── layouts
| ├── partials
| ├── content
| ├── assets
| └── theme.yaml ← 信息文件
在 theme.yaml 文件中支持以下字段：
| Field | Description |
|---|---|
| name | specifies the theme name, required. |
| author | specifies the author name, required. |
| homepage | specifies the author website URL, required. |
| description | the theme description, required. |
| previewImage | custom preview image, path relative to the theme directory, eg: assets/images/preview.png, optional. |
| code | the theme code, optional. The value is used on the October CMS marketplace for initializing the theme code value. |
| authorCode | the theme author code, optional. The value is used on the October CMS marketplace for defining the theme owner. |
| form | a configuration array or reference to a form field definition file, used for theme customization, optional. |
| require | an array of plugin names used for theme dependencies, optional. |
主题信息文件示例：
name: "October CMS Demo"
description: "Demonstrates the basic concepts of the front-end theming."
author: "October CMS"
homepage: "https://octobercms.com"
code: "Demo"
authorCode: "Acme"主题版本文件 version.yaml 定义了当前主题版本和更改日志。该文件应放置在主题根目录。
├── themes
| └── website
| ├── ...
| └── theme.yaml
| └── version.yaml ← 版本文件
该文件包含以下格式。
v1.0.1: Theme initialization
v1.0.2: Added more features
v1.0.3: Some features are removed主题预览图用于后端主题选择器中。图像文件 theme-preview.png 应放置到主题的 assets/images 目录中：
├── themes
| └── website
| ├── ...
| └── assets
| └── images
| └── theme-preview.png ← 预览图
图像宽度应至少为 600 像素。理想的宽高比为 1.5，例如 600x400 像素。
主题可以通过定义一个 require 选项在其主题信息文件中，该选项应提供一个被视为依赖项的插件名称数组。一个依赖于 Acme.Blog 和 Acme.User 的主题可以这样定义此依赖项：
name: "October CMS Demo"
# [...]
require:
- "Acme.User"
- "Acme.Blog"当主题首次安装时，系统将尝试同时安装所需的插件。为了获得更流畅的体验，建议也将这些插件添加到 Composer 依赖列表中。
主题可以通过在主题信息文件中定义一个 form 键来支持配置值。此键应包含一个配置数组或一个表单字段定义文件的引用，更多信息请参阅 表单字段定义。
以下是一个示例，说明如何定义一个名为 site_name 的网站名称配置字段：
name: My Theme
# [...]
form:
fields:
site_name:
label: Site name
comment: The website name as it should appear on the front-end
default: My Amazing Site!该值随后可以通过名为 this.theme 的 全局 Twig 变量 在任何主题模板内访问。
<h1>Welcome to {{ this.theme.site_name }}!</h1>您也可以在单独的文件中定义配置, 其中路径相对于主题. 以下定义将从主题内的文件 config/fields.yaml 获取表单字段.
name: My Theme
# [...]
form: config/fields.yamlthemes/demo/config/fields.yaml
fields:
site_name:
label: Site name
comment: The website name as it should appear on the front-end
default: My Amazing Site!有时您希望在主题样式表中包含一个视觉偏好。您可以使用 CSS 自定义属性（变量）来使这些值可用。在下面的示例中，我们将使用 颜色选择器字段类型 来指定自定义链接颜色。
form:
fields:
# [...]
link_color:
label: Link color
type: colorpicker参照上述示例，我们可以定义一个将选定值通过本地样式表传递给 CSS 的CMS 分部。该分部随后被包含在主题布局的<head>标签内。
<style>
:root {
--my-color: {{ this.theme.link_color }};
}
</style>自定义属性名区分大小写 因此
--my-color将被视为一个与--My-color独立的自定义属性。
现在 在你的样式表中 该自定义属性 可以在任何地方使用 通过在 var() 函数中指定自定义属性名，取代常规属性值。
a {
color: var(--my-color);
}使用 |theme 过滤器和组合器 组合的资产可以将值传递给支持的过滤器，例如 LESS 过滤器。只需在定义表单字段时指定 assetVar 选项，该值应包含所需的变量名。
form:
fields:
# [...]
link_color:
label: Link color
type: colorpicker
assetVar: 'link-color'在上述示例中，所选的颜色值将在 less 文件中可用作 @link-color。假设我们有以下样式表引用：
<link href="{{ ['assets/less/theme.less']|theme }}" rel="stylesheet">使用一些示例内容，位于 themes/yourtheme/assets/less/theme.less：
a { color: @link-color }