主题目录可能包含 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 ← 预览图
图像宽度应至少为 600px。理想的宽高比为 1.5，例如 600x400px。
一个主题可以通过在其主题信息文件中定义一个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!该值随后可在任意主题模板中访问 使用全局 Twig 变量 名为 this.theme。
<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使用上述示例 我们可以定义一个CMS 局部 它通过本地样式表将选定的值传递给CSS。该局部随后被包含在主题布局的<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 }