所有 Sencha 主题包都是更大主题层次结构的一部分。每个主题包都扩展了父主题或基础主题。创建自定义主题的下一步是选择要扩展的主题。Ext JS 为每个工具包提供了一些主题

现代工具包

经典工具包

您的自定义主题应该扩展哪个主题？对于现代工具包，我们建议使用 theme-material 或 theme-triton ，而对于经典工具包，我们建议使用 theme-triton 、 theme-crisp 或 theme-neptune 作为自定义主题的起点（或者在为平板电脑设置主题时使用 theme-neptune-touch 或 theme-crisp-touch ）。这些主题包含创建具有吸引力的开箱即用主题所需的所有代码。

theme-base 和（在经典中） theme-neutral 主题应被视为抽象主题，不应直接扩展。

在本教程中，我们将创建一个扩展 theme-triton 的自定义主题。第一步是使用扩展主题的名称配置您的自定义主题。这可以通过将 packages/local/my-theme/package.json 中的 extend 属性从其默认值更改为所需的值来完成

"extend": "theme-triton"

您的自定义主题现在已配置为使用 Triton 主题作为基础。您的自定义主题最初与默认的 Triton 主题相同。在接下来的步骤中，您将进行自己的更改以开始区分您的自定义主题。

构建主题将在您的主题包目录中创建一个 build 目录。在 my-theme/build/resources 中，您将找到一个名为 my-theme-all.css 的文件。此文件包含主题中所有 Ext JS 组件的所有样式规则。构建的主题文件包含所有 Ext JS 组件的所有样式，对于 不使用 Sencha Cmd 的应用程序很有用。

注意： 当该主题在 Sencha Cmd 应用程序中使用时，无需构建主题 。当 Sencha Cmd 构建应用程序时，它会直接从主题的源代码中合并所需的 .js 和 .scss 文件。

为了快速开发和测试自定义主题，我们需要将其托管在 Ext JS 应用程序中。应用程序应设置为使用现代或经典工具包，具体取决于您的需求。要创建应用程序，请从工作区目录运行以下命令

$ mkdir demo-app
$ cd demo-app
$ sencha app init --ext65 --modern App
  -- or --
$ sencha app init --ext65 --classic App

要将测试应用程序配置为使用您的自定义主题，请找到在 demo-app/app.json 中设置 "theme" 的行，并将其更改为

"theme": "my-theme",

Sencha Cmd 现在已在此子目录中生成了一个名为 App 的应用程序。接下来，我们将对主题和示例应用程序进行更改。我们希望 Sencha Cmd 检测到这些更改并自动将其编译到应用程序使用的输出 CSS 中。为此，请运行以下命令

$ sencha app watch --fashion

提醒： sencha app watch 命令需要 Java JRE 1.7 或更高版本。如果您无法运行 sencha app watch ，则需要在每次更改主题后运行 sencha app build --development 。为简洁起见，我们假设您正在运行 sencha app watch 。

运行 sencha app watch 后，您可以使用以下 URL 在浏览器中加载应用程序

http://localhost:1841/demo-app/

--fashion 开关将指示浏览器在您更改应用程序主题时刷新应用程序中的样式 - 通常不到一秒钟！

注意： 使用 --fashion 的实时更新仅在现代浏览器中受支持。对主题中样式的大多数更改将近乎实时更新，无需浏览器刷新。但是，修改组件尺寸的主题更改可能需要手动刷新浏览器。

Ext JS Classic 和 Modern 工具包对 API 的基本方法相同：它们定义变量来配置组件的默认外观，并提供可以生成自定义外观的 mixin。这些自定义外观被分配您选择的名称，这些名称使用 ui 配置属性应用于组件实例。由于与 ui 配置的关系，这些 mixin 通常被称为“UI mixin”或“主题 mixin”。

让我们从修改 $base-color 开始，这是一个值，许多 Ext JS 组件的颜色都是从该值派生的。由于在默认主题中使用了 $base-color ，因此对 $base-color 进行全局更改将对 Ext JS 库中的大多数组件产生影响。

创建文件 packages/local/my-theme/sass/src/Component.scss 并添加以下代码

$base-color: #317040;

默认情况下，所有必需的图像资源都从父主题继承，但在某些情况下，您可能需要覆盖图像。这可以通过将所需的图像放置在 my-theme/resources/images/ 中并赋予它与它要覆盖的基本主题中的图像相同的名称来轻松完成。

在许多现代主题（如 theme-triton ）中，几乎没有图像。这些主题使用矢量字体图标。因此，您可以用这种方式替换的图像取决于您选择的基主题。

如果您的主题需要与组件样式无关的函数或混合器（例如工具），则应将它们放置在主题的 my-theme/sass/etc 目录中。

您可以根据自己的喜好组织此目录中的文件，但 Sencha Cmd 在构建中包含的唯一文件是 my-theme/sass/etc/all.scss 。任何其他文件都必须由 all.scss 文件导入（ @import ）。有关遵循此模式的示例，请参见 ext/classic/theme-base/sass/etc/ 。

不与应用程序共享的样式应属于应用程序本身，而不是主题。Sencha Cmd 提供了一种简单的方法来添加应用程序级样式，允许您将样式直接组织在 JavaScript 代码旁边。

要编写与应用程序视图关联的 CSS 规则，请在与视图相同的文件夹中创建 .scss 文件，并使用与视图相同的基名称。例如，要为视图 App.view.main.Main 设置样式，您可以将 Main.scss 添加到该文件夹中

demo-app/
      view/
         main/
            Main.js
            Main.scss
            MainController.js
            MainModel.js

虽然添加任意 CSS 样式的能力提供了最大的灵活性，但最好避免直接为 Ext JS 组件拥有的元素设置样式。相反，应尽可能使用 Ext JS 主题 API 为其设置样式。使用主题 API 可以保护您的样式免受 Ext JS 未来版本中破坏性标记更改的影响。

应用程序充当主题层次结构中的最终级别。因此，应用程序可以更改主题变量。

让我们继续使用上面创建的 demo-app 应用程序，并在应用程序中覆盖主题的 $base-color 。创建 Application.scss 文件

demo-app/
      Application.js
      Application.scss

Application.scss 文件是全局设置的简单选项，因为它与 Application 类的全局性质相匹配。并将以下内容添加到此文件中

$base-color: #724289;

在浏览器中查看应用程序，您将看到基本颜色已更改为紫色。

要在应用程序中进行重要的主题工作，您应该以与主题相同的方式创建 sass 文件夹结构，并告知 Sencha Cmd 您的样式适用于所有命名空间（不仅仅是应用程序）。通常位于主题的 sass 文件夹中的代码可以放置在应用程序的 sass 文件夹中。

当 Sencha Cmd 构建您的样式时，它会查看应用程序中使用的所有 JavaScript 类。然后它会包含与这些类相一致的所有 .scss 文件。此过程使用 sass.namespace 将类名（如 Ext.button.Button ）与包、主题或应用程序的磁盘上的文件对齐。

例如，在主题中，您可能拥有文件 sass/var/button/Button.scss 以及文件 sass/src/button/Button.scss 。这些文件将被视为匹配，因为主题的默认 sass.namespace 是 Ext 。

但是，应用程序的默认 sass.namespace 是它自己的命名空间（ App ）。这意味着 Sencha Cmd 不会将 demo-app/sass/var/button/Button.scss 识别为 Ext.button.Button 类的匹配项。相反，它将匹配 App.button.Button 。要包含与所有命名空间匹配的文件，您需要在 app.json 中将 sass.namespace 设置为空字符串

"sass": {
    "namespace": ""

完成此更改后，Sencha Cmd 将 demo-app/sass/var/Ext/button/Button.scss 和 demo-app/sass/src/Ext/button/Button.scss 与 Ext.button.Button 匹配。

这意味着，如果您想使用 sass 文件夹来组织视图的样式，则需要使用 App 子文件夹。例如， sass/src/App/view/main/Main.scss 是与 App.view.main.Main 匹配的路径。虽然这是以前版本中的模式，并且仍然受支持，但将视图样式放置在与其 .js 文件相邻的 .scss 文件中（如前所述）是一种更易于维护的结构。