我们很高兴地宣布，我们刚刚发布了VS Code的Indigo.Design代码生成器扩展的下一个版本。您可以在我们的网站Indigo.Design下载最新版本。只需登录并单击左下角的 “ Download Indigo.Design Assets ” 按钮。
以下是此版本的亮点:
主题化
我们在代码生成方面实现了主题生成。这意味着，当您生成代码时，不仅会获得渲染和布局Ignite UI for Angular所需的HTML和SCSS组件，而且现在还会获得额外的SCSS，其中包含设计器在Sketch中使用的调色板。以前我们没有生成这些主题文件，这意味着用户被卡住使用Ignite UI for Angular附带的默认主题。如果您的设计师更改了Sketch中使用的调色板，开发人员将不得不手动将这些相同的调色板实现到他们的应用程序中。
上一个输出: 
这不再是必要的，但是使用此功能有一个先决条件。请参阅下面的主题插件部分了解更多。
Indigo.Design主题插件
在这个版本中，我们还提供了一个Sketch插件，以帮助我们更容易生成主题。这个插件还将使设计师更容易调整Indigo.Design素描库中的调色板。设计师可以在这里阅读更多关于如何使用插件。对于代码生成，这个插件将插入一些元数据到草图文件中，然后我们在VS代码扩展中读取。此元数据包含有关该特定草图文件应使用的调色板颜色和字体信息的信息。从那里我们可以生成所需的scs，以将这些颜色应用于生成的组件。如果此插件不用于应用主题，则扩展将仅生成默认主题。
请注意
，以前我们有一个名为Indigo Sync的草图插件，但是这个插件已经与这个新的主题插件合并，以创建新的Indigo.Design Tools插件。这两个插件可以并排生活，但靛蓝同步插件不再是必要的。请从现在开始使用Indigo.Design工具插件。
应用主题全球
这些主题需要注意的一件事是，当它们生成时，它们将只限于生成的组件。幸运的是，采取生成的主题并在全球范围内应用它仍然非常容易。您可以在此处找到有关如何在全球范围内应用主题的更多信息，但是，下面您可以找到一个快速示例。
您需要做的第一件事是打开全局SCSS文件。styles.scss是Angular项目附带的默认文件。打开此文件并添加以下scs:
// 确保将 “themename” 替换为您的文件夹名称
// 生成的主题。
@导入 '~ igniteui-angular/lib/core/styles/themes/utilities';
// 这是生成的 _palette.scss文件。它有颜色
// 主题的信息。它还覆盖 $ default-palette。
@导入 './themes/themeName/palette';
@导入 '~ igniteui-angular/lib/core/styles/themes/index';
@包括igx-核心 ()；
@包括igx-主题 ($ default-调色板);
// 这是生成的 _typography.scss文件。
@导入 './themes/themeName/typography';
对igx-theme的调用为所有Ignite UI for Angular的组件设置了主题。最后一行设置了应用程序的排版，但是在将igx-typography CSS类添加到HTML之前，您不会在应用程序中看到任何排版更改。这通常在index.html中的body标记上完成。
< body class = "igx-typography" >
< app-root > </ app-root >
</ body >
就这样!您的整个应用程序现在使用生成的主题。
Ignite UI CLI
我们在此版本中添加的另一个功能虽然很小，但可以改善生成使用Ignite UI CLI创建的项目时的体验。通常，当您使用Ignite UI CLI创建一个新项目时，它会在其中创建一个非常小的演示应用程序。在这个演示中，您将看到一个已经为您提供的导航抽屉。
我们添加的这个新功能将允许代码生成的组件自动出现在这个导航抽屉中，这样你就可以快速导航到该组件并实时查看它。要查看此功能的实际操作，您首先需要在扩展设置中启用基本路由。
启用此设置后，将代码生成到使用Ignite UI CLI创建的Angular项目中。确保在扩展对话框中选择AppModule作为目标模块。代码生成完成后，如果使用了路由模块，您应该会看到app-routing.module.Module.ts或 .ts中添加了路由。现在，当您运行应用程序时，您应该看到新生成的组件显示在导航抽屉中。
注意
上面没有显示，但我需要将width: 100%添加到生成的组件CSS中，使其水平填充。Ignite UI CLI项目在路由器出口周围使用flex-box，不会自动让内容填充空间。我刚刚添加到组件css:: 主机{
宽度: 100%
}
结论
这个最新版本的Indigo.Design代码生成器将主题化您的应用程序带到一个全新的水平，使主题生成组件比以往任何时候都更容易。我们很高兴为您带来这些惊人的新功能，并希望您也是。
</p