原文：https://docs.sencha.com/themer/1.3.1/guides/walkthrough.html
一、Prerequisites 先决条件
在开始之前，请确保已下载并安装以下资源
1. ExtJs
Themer需要Ext JS 6.0.1+用于Classic Toolkit，Ext JS 6.2用于Modern Toolkit。
您可以从支持门户网站下载Ext JS，也可以在专业包下载中找到它。
如果您无法访问Ext JS，可以下载30天的免费试用版。
注意：UI主题仅支持Ext JS 6.2+。
2. Sencha Cmd
Themer需要Sencha Cmd 6.5+。
Sencha Cmd是一个免费工具，可以通过下载页面获取。
如果您已经拥有Sencha Cmd，您还可以通过命令行通过发出以下命令来更新它：
sencha upgrade3. Themer
您可以在专业包下载中找到Themer。
如果您没有专业套餐，可以下载Sencha Themer 30天免费试用版
安装过程见start trial
二、设置应用程序
接下来，下载我们的Themer Contest应用程序
注意：您可以通过单击“克隆或下载”按钮从Github下载。然后只需单击“下载Zip”并将文件保存到您的计算机。
下载完成后，解压缩“themer-contest-app-master.zip”并将生成的目录移动到您希望应用程序存在的任何位置。
将应用程序放在需要的位置后，“cd”进入应用程序目录。
最后，发出以下命令将Ext JS复制到应用程序。
sencha app install --framework=/path/to/extjs/ 接下来，我们将使用Modern Toolkit创建一个主题
三、创建主题
从应用程序目录运行：
sencha app build
sencha app watch -fashion注意：您可能需要根据cmd版本运行“sencha app upgrade”。
如果是这样，Cmd将在运行“app watch”时提示您这样做。
“app watch”运行后，您可以在浏览器中打开该应用程序。
您将在运行应用程序监视所提供的地址中找到在完整桌面上运行的应用程序。
这通常是：http://localhost:1841
您的应用程序最初看起来像：
在演练结束时，应用程序将如下所示：
1. 创建一个新的主题
我们将创建一个自定义主题，它实际上是我们将使用Themer修改的现有框架主题的副本。
一旦Themer启动，请单击“Create Theme”创建主题 按钮。将您的自定义主题命名为“ContestApp”。
在应用程序或工作区字段中，选择最近解压缩的“themer-contest-app-master”目录。
选择“Triton”作为基本主题，然后单击“Create Theme”创建主题。
加载画布后，请确保选择了“Modern”按钮，您可以在组件列表的底部找到该按钮。
您现在应该看到一个代表 modern 视口的画布
2. 修改应用程序设置
我们将更改应用程序的基色。这是决定整个应用程序基色的颜色。
Base and Background Color
让我们在Theme Defaults主题默认值中将“Base Color”更改为“＃D32F2F”。
您可以通过几种不同的方式应用此十六进制。
如果您尚未使用它，您可能不会在第一个调色板中看到它。
但是，切换到第二个选项卡可提供材料批准的配色方案列表。
选择红点，然后您将看到700与“＃D32F2F”相关联。
您还可以单击第三个选项卡，在那里您将能够与我们大多数人都熟悉的颜色选择器输入进行交互。
在这种情况下，您只需粘贴十六进制值即可。
如果您正在观看您的应用程序，您应该会看到整个应用程序通过Fashion应用新的基色。
让我们做一些更改！
List Items
目前，如果我们点击列表项，我们将获得淡黄色选择状态。让我们通过调整列表项来使它更具吸引力！
单击左侧“Components”列表中的“List”。
向下滚动右侧的属性列表，直到达到“Selected Background Color”选定的背景颜色。
将其更改为“＃757575”。
提示：灰色材质点上的600。
这使得我们的文本阅读有点棘手，因此将“Selected Color”更改为“#FFFFFF”。
最后，我们将调整悬停颜色。
将列表项的悬停状态更改为背景颜色为“#EEEEEE”。
提示：灰色材质点上的100。
3. Using Google Fonts
Themer还允许您在应用程序中使用Google字体。在更改字体之前，您需要获取Google字体网址。
对于这个例子，我们将使用“Cinzel”。
- 转到相应的Google字体页面，单击“Select this Font”，然后从结果选择窗口（右下角）复制Web链接。
链接应该是：
https://fonts.googleapis.com/css?family=Cinzel- 现在，在Themer中，从左侧的组件树中选择“Theme Defaults”。
- 接下来，突出显示字体字段，然后单击字体菜单底部的“Manage Web Fonts”管理Web字体。
- 粘贴在Cinzel网址中，然后点击“Done”。
您的应用程序应该暂时更新。
4. Tree
左侧导航（在桌面视图中）现在有点奇怪。
单击左侧组件树中的“Tree”。让我们改变选定的颜色。
向下滚动到“Tree Item Selected”并将背景颜色更改为“＃FFCDD2”
提示：红色材质点上的100。
接下来，让我们改变一些红色更微妙。
向上滚动到Tree Item并将Icon Color和Expander Color更改为“＃424242”
提示：灰色材质点上的800。
5. Progress Bar Background (进度栏背景)
由于我们从蓝色变为红色，因此进度条有点难以评估。
背景颜色太靠近白色背景。
让我们通过点击左侧组件树中的“Progress Bar”来解决这个问题。
您将看到的第一个值是“Background Color”。
让我们把它改成更浅的红色调，这样就可以更清楚地突出进展。
我将使用“＃EF9A9A”。
提示：红色材质点上有200个。
6. Check Box (复选框)
单击左侧组件树中的“Form Fields”。
然后选择“Checkbox”。
将“Checked Color”更改为“＃EF9A9A”。
将“Text Color”更改为“＃EF9A9A”。
提示：红色材质点上有200个。
7. Device View 设备视图
这对桌面看起来很不错！让我们看看它在移动视图中的外观。打开Chrome inspector(Chrome检查器)，然后点击以下图标：
现在刷新浏览器查看移动视图。
Dashboard看起来不错，所以让我们点击Speakers。还不错！现在让我们点击speaker’s name。
看起来这个页面上的文字非常紧密。让我们在面板上添加一些top padding。
单击左侧组件树中的“Panel”。然后选择“Panel”子部分。
向下滚动到“Panel Body”并将所有边的top padding更改为“1em”。现在文本有一些空间可以呼吸！
四、导出主题
一旦您对Themer Contest应用程序的外观感觉满意，请导出新主题。
要导出主题，只需从顶部菜单中选择“Publish”，然后选择“Export Theme as Zip Archive”将主题导出为Zip存档。
您的主题现在可以与其他应用程序共享！