主题是一组文件，定义了表示层。你也可以创建一个或多个“子主题”或主题变奏曲。只有。info.yml文件是必需的，但最重要的主题和分主题将使用其他文件以及。本页列出的文件和文件夹，发现在一个典型的主题或主题。
定位主题
你必须把主题在你的Drupal安装的“主题”文件夹。注意，Drupal主题如Bartik七位于core/themes的安装文件夹。
是很好的练习的地方提供的主题在子文件夹命名为“贡献”和你自己的主题，在一个名为“自定义”。
每个主题都包含在一个目录下的主题本身后。例如fluffiness/。名称必须是小写字母，一个字母开始，并使用下划线（_）而不是空间。
你的（部分）结构Drupal的安装可能看起来如下：
|-core
| |-modules
| |-themes
| | |-bartik
| | |-seven
..
|-modules
|-themes
| |-contrib
| | |-zen
| | |-basic
| | |-bluemarine
| |-custom
| | |-fluffiness主题文件夹结构
这是文件和文件夹是在主题文件夹中找到典型结构实例：
|-fluffiness.breakpoints.yml
|-fluffiness.info.yml
|-fluffiness.libraries.yml
|-fluffiness.theme
|-config
| |-install
| | |-fluffiness.settings.yml
| |-schema
| | |-fluffiness.schema.yml
|-css
| |-style.css
|-js
| |-fluffiness.js
|-images
| |-buttons.png
|-logo.png
|-screenshot.png
|-templates
| |-maintenance-page.html.twig
| |-node.html.twig下面是一个描述最常见的文件，你可以在一个主题发现。
info.yml *。
一个主题必须包含一个info.yml文件定义的主题。。其他的事情之一。info.yml文件定义了元数据，图书馆，和块区。这是唯一需要在主题文件。
libraries.yml *。
这个。libraries.yml文件是用来定义JavaScript和CSS库可以通过主题装。
breakpoints.yml *。
断点定义响应的设计需要改变以应对不同的设备。断点是定义在一个breakpoints.yml文件。
*。主题
的。主题文件是一个PHP文件包含所有的逻辑和数据（预）的输出处理。
CSS
这是很好的做法，店。在“CSS”子文件夹中的CSS文件。Drupal 8核心主题组织CSS文件后，smaccs风格指南。一个主题加载CSS文件必须libraries.yml文件中定义的。可重写或删除。info.yml文件。
JS /
主题特定的JavaScript文件存储在“JS”文件夹。一个主题加载JavaScript文件必须libraries.yml文件中定义的。。
图像
这是很好的做法，存储的图像在images文件夹的子文件夹。
screenshot.png
如果一个screenshot.png文件在主题文件夹中找到并将外观采用页。或者你可以在info.yml文件定义一个截图。。
明珠台
如果在主题文件夹中找到一个你的主题LOGO的SVG矢量文件，然后可以在网站的标题。标志也可以上传外观>设置。
模板/
模板提供的HTML标记和表示逻辑。相反，Drupal 7，在Drupal 8模板文件（*. html.twig文件）必须保存在“模板”文件夹的子文件夹。如果你遵循特定的命名规则，那么Drupal将由您提供的替换默认的核心模板，允许你重写默认的标记。
核心主题Bartik的文件夹结构
为例，看看Bartik的文件夹结构，位于core/themes/ bartik：
|-bartik.breakpoints.yml
|-bartik.info.yml
|-bartik.libraries.yml
|-bartik.theme
|-color
| |-color.inc
| |-preview.css
| |-preview.html
| |-preview.js
|-config
| |-schema
| | |-bartik.schema.yml
|-css
| |-colors.css
| |-layout.css
| |-maintenance-page.css
| |-print.css
|-images
| |-add.png
| |-required.svg
| |-tabs-border.png
|-logo.svg
|-screenshot.png
|-templates
| |-block--search-form-block.html.twig
| |-block--system-branding-block.html.twig
| |-block--system-menu-block.html.twig
| |-block.html.twig
| |-comment.html.twig
| |-field--taxonomy-term-reference.html.twig
| |-maintenance-page.html.twig
| |-node.html.twig
| |-page.html.twig
| |-status-messages.html.twig