JetBrains插件制作------主题（二）
通过在主题的描述文件中添加内容，我们可以覆写原有的主题，从而实现主题的自定义
1. 了解主题描述文件的语法
主题描述文件的语法遵循JSON文件格式
最小有效默认文件是 DevKit 主题向导的输出，添加键值对可自定义主题
主题键值对通常使用颜色作为值，颜色由六位 RGB 或八位 RGBA 十六进制表示法定义
2. 定义命名的颜色
颜色始终可以单独定义为六位 RGB 或八位 RGBA 十六进制表示法
但是，主题定义通常在多个位置使用相同的颜色 ，如果命名颜色作为 *.theme.json 文件的一部分在 "colors":{} 块中全局定义，则维护主题更易于管理
之后，可以使用"命名颜色"代替颜色的十六进制描述，例如，定义 Named Color basicBackground，然后使用它来设置面板的背景颜色
简言之，就是有意义的命名好过十六进制的颜色值，方便到处引用以及后期统一修改
json
{
"name": "My_theme",
"author": "Minos.cpp",
"dark": true,
"colors": {
"primaryRed": "#821010"
},
"ui": {
"Button.background": "primaryRed"
}
}以上是我们目前的主题my_theme.theme.json，可以看到，"colors":{}里面定义了一个颜色值，key为primaryRed（这便是命名），而value为十六进制表示的#821010，而在下面的"ui":{}中，直接使用key去给一个UI控件指定了颜色，那么这就是一个命名颜色使用的实践
json
{
"name": "My_theme",
"author": "Minos.cpp",
"dark": true,
"colors": {
"buttonColor": "#afdaff"
},
"ui": {
"Button.default.startBackground": "buttonColor",
"Button.default.endBackground": "buttonColor"
}
}比如我只想#afdaff这个颜色作为按钮的颜色，那我就设置key为buttonColor，那么之后按钮位置要使用，直接按照key去找就好了，但是看了下好像按钮默认是支持渐变的，因此Button.default.startBackground和Button.default.endBackground配成一样的应该是个纯色
3. 自定义Icon
通过编辑主题描述文件可以修改Icon的颜色或是使用自己的Icon去替换IDE原有的Icon
在主题描述文件中添加 "icons":{} 部分可以实现Icon的自定义
3.1. 覆写全局Icon颜色
默认全局图标颜色是通过向"ColorPalette":{} 部分添加键值对来自定义的，ColorPalette 必须插入到"icons":{}中
json
"icons": {
"ColorPalette": {
"Checkbox.Background.Default.Dark": "#afdaff",
"Checkbox.Border.Default.Dark": "#FFFFFF",
"Checkbox.Foreground.Selected.Dark": "#6e3bf8"
}
}这次是使用ColorPalette全局替换了Checkbox的样式
运行看下是否都批量替换了
3.2. 自定义图标调色板颜色
Icon调色板是预定义 的主题颜色Key，用于描述Actions或Objects上下文中的单个颜色
IntelliJ 平台具有为Actios和Objects上下文定义的默认图标颜色
Actions是指显示在工具栏上下文中的图标的主题Key，表示编译、运行或调试等操作Objects是出现在列表和文件树的上下文中的图标的主题Key，表示文件、符号或运行和调试配置等实体
Actions
Objects
图标设计规范
Icons | IntelliJ Platform UI Guidelines (jetbrains.design)
通过向主题描述文件中的"ColorPalette":{}部分添加Actions或ObjectsKey和自定义颜色值来自定义图标调色板颜色
可用的Actions和ObjectsKey列表由IDE的提示弹框提供
尝试修改下Objects的内容
3.3. 自定义Icon
自定义的图标需要svg格式
图标替换在主题描述文件的"icons":{}部分中描述，并且图标替换键值对应显示在ColorPalette部分之外
对于图标替换，Key是默认图标图像的路径 ，此路径派生自AllIcons.[Group].[IconName]，通过UI Inspector可以查看
要使用UI Inspector就需要先启用内部模式
添加一个K-V对
csharp
idea.is.internal=true
编译完重新启动IDEA，现在可以找到UI Inspector了
按住Ctrl + Alt，然后点击需要查看的UI控件，就可以查看到对应的信息
比如，我们如果想要把Run图标改掉就可以直接点击它
然后查看icon属性下的资源信息
找到svg文件路径，然后我们修改一下
将Run的图标改为项目默认的插件logo，运行看一下效果
替换图标的颜色优先于任何
ColorPalette覆盖
4. 自定义UI控件
主题可以更改 IntelliJ Platform UI 很多通用组件的外观，这些控件的包括标签、按钮、复选框、树、列表和菜单等
Platform theme colors | IntelliJ Platform UI Guidelines (jetbrains.design)
4.1. 自定义UI控件的颜色
UI控件的自定义颜色是通过向主题说明文件的"ui":{}部分添加键值对来指定的
UI 控件Key具有复合格式element.property，其中：
-
element是 UI 控件的类型（标签、复选框等） -
property是颜色的应用方式（e.g.foreground,background）
但是，也并非全部Key都是二级结构，可能会有多级，不过都可以按照element和property将其拆分成两个部分
其实，熟悉CSS的小伙伴应该能够了解这就是找到元素并匹配赋值的过程
4.1.1. 自定义具有相同属性的所有 UI 控件颜色
具有相同Key属性部分的所有 UI 控件都可以设置为相同的颜色，使用主题描述文件中的通配符"*":{}部分可以批量上色
4.1.2. 自定义特定UI控件类型的颜色
指定类型的颜色会覆盖通配符
4.1.3. 自定义UI选项卡的颜色
IntelliJ平台中有两种选项卡的实现：
尝试修改一下编辑器选项卡的样式，包括选项卡的下划线以及背景
4.2. 自定义UI控件的边框
边框键的格式也是element.property，其中：
element是包含边框（如窗口或弹出菜单）的UI控件的类型property是所需的边框外观
border是指定为顶部、左侧、底部和右侧宽度的边框宽度（以像素为单位），边框颜色也可指定为十六进制RGB，不过不用加#
borderInsets是从元素边缘到边框的插入距离（以像素为单位）
我们给Window四周加入4像素的描边
5. 找到UI控件的属性Key
IntelliJ Platform UI中定义了数百个UI控件element.property的Key，怎么才能快速找到我们需要的呢？
5.1. 在编辑器中使用代码完成查找UI控件键
查找UI控件键的首选方法是使用编辑器中的"代码补全"功能
另外，直接悬停可以查看快速文档
5.2. 使用Laf默认UI查找UI控件键
使用 LaF 默认值检查器，输入Key的元素部分，LaF 默认值检查器将提示UI控件键及其默认颜色列表
Internal Actions - LaF Defaults | IntelliJ Platform Plugin SDK (jetbrains.com)
通过这些工具的组合使用，可以快速设置我们需要的各个组件的主题样式