idea插件开发文档

自定义UI主题

走着路睡觉大约 5 分钟

自定义UI主题

图标和用户界面控件

修改UI主题配置文件中的信息（$THEME_NAME$.theme.json）可以自定义主题

提示

插件 Color Highlighter Pluginopen in new window 可以在编辑器中预览颜色

UI主题配置文件语法

UI主题配置文件是json格式的文件。可以通过DevKit Theme向导获取初始的配置文件。

UI主题参考

可以从以下示例中参考配置文件的语法：

IntelliJ IDEA High Contrast Themeopen in new window

也可以在 插件市场open in new window 里搜索主题

Colors属性-定义全局颜色变量

$THEME_NAME$.theme.json文件中定义在 Colors中的颜色配置可以作为全局引用，如下所示：

{
  "name": "theme_basics",
  "dark": false,
  "author": "IntelliJ Platform SDK",
  "editorScheme": "/Lightning.xml",

  "colors": {
    "basicBackground": "#E1E1E1"  //定义颜色变量 basicBackground
  },
  "ui": { // ui部分的语法见下文
    "Panel.background": "basicBackground" //引用颜色变量 basicBackground
  }
}

自定义图标

$THEME_NAME$.theme.json文件中 "icons": {} 可以定义图标的颜色

覆盖图标的全局颜色

"ColorPalette": {} 定义了图标的全局颜色，

以下示例中，在 Light 主题中，操作（Action）的默认颜色为红色(#DB5860)，通过下图配置，可以把红色(#DB5860)修改为(#D61A26):

{
  "icons": {
    "ColorPalette": {
      "#DB5860": "#D61A26"
    }
  }
}

此颜色替换应用于整个 IDE UI。

修改某一种图标的颜色

Actions 和 Objects 单独定义了默认颜色

Actions 定义的是工具栏图标的颜色，例如，Compile, Run, or Debug.

Objects 定义的是列表或树的图标颜色，例如：files, symbols, 或 run 和 debug configurations.

JetBrains Platform UI 用Actions 和 Objects keys 为图标定义了默认颜色。

自定义 "Actions" 和 "Objects" 图标颜色

通过修改图标对应的key的颜色，即可修改对应的图标颜色

通过下面配置可以将工具栏中蓝色图标的颜色修改为**#5BC0DE**。

{
  "icons": {
    "ColorPalette": {
      "Actions.Blue": "#5BC0DE"
    }
  }
}

自定义图标

可以自定义图标来替换IntelliJ Platform UI的默认图标，图标需要是 SVG格式文件 ，图标的需要遵守JetBrains Platform UI Guideline for Icons open in new window 的设计规则，

通过以下配置指定图标：

{
  "icons": {
    "ColorPalette": {
      "Actions.Blue": "#5BC0DE"
    },
     "/actions/compile.svg": "/factory.svg" //自定义图标 ，key是图标的默认图片路径，value是新图标的图片路径（图片位于resources文件夹）
    
  }
}

通过 UI检查，可以看到某个图标对应的图片路径，如下图

自定义 UI 控件

大部分UI控件的外观支持修改，例如 labels, buttons, checkboxes, trees, lists, 和 menus.

通过 Platform theme colors — UI componentsopen in new window 文档可以查看相关介绍。

自定义 UI 控件颜色

控件颜色的key格式主要分为2部分： element.property

  • element 是控件的类型，例如 label, checkbox等

  • property 是控件哪部分的颜色，例如 foreground, background, 和 errorForeground.

注意：控件的颜色key 可能超过2部分，例如 Popup.Advertiser.foreground 或 ScrollBar.Mac.Transparent.thumbColor ，

在查找UI控件属性key 里可以查看如何查找对应的key

一个属性定义全部控件颜色

如下示例，通过 key "*" 可以修改全部控制的背景颜色

{
  "ui": {
    "*": {
      "background": "#AED7E3"
     }
  }
}

修改指定类型控件的颜色

{
  "ui": {
    "*": {
      "background": "#AED7E3"
    },
    "Label.background": "#F6E9C9"  //控件颜色的key格式主要分为2部分： **element.property** , element是控制类型，
                                  // 这个配置可以修改所有Label类型控件的背景颜色
  }
}

修改选项卡的颜色

IntelliJ Platform主要有2种选项卡

在查找UI控件属性key 里可以查看如何查找对应的key

下面示例中，是 IntelliJ Platform High Contrast Themeopen in new window 主题的一部分配置：

  • 前三个属性条目在版本 2019.1 可以被识别，后续版本已替换为新key

  • underlineColor 可以被所有版本识别

  • underlineHeight 2019.2之后的版本可以识别

  • underlinedTabBackground 2019.2之后的版本可以识别，在2019.1版本中可以使用 selectedBackground ，再早的版本无效

  • inactiveColoredFileBackground 2019.2之后的版本可以识别，在2019.1版本中可以使用 inactiveMaskColor ，再早的版本无效

{
  "ui": {
    "EditorTabs": {
      "selectedForeground": "#FFFFFF",
      "selectedBackground": "#0e5d73",
      "inactiveMaskColor": "#000000FF",

      "underlineColor": "#1AEBFF",
      "underlineHeight": 4,

      "underlinedTabBackground": "#000000",
      "inactiveColoredFileBackground": "#00000000"
    }
  }
}

自定义 UI 控件的边框

控件边框的颜色和开关的key格式主要分为2部分： element.property

  • element 是有边框的控件的类型，例如 window 或 popup menu.

  • property 定义边框的样式，例如：

    • border 定义边框的颜色，宽度
    • borderInsets 定义元素边缘到边框的距离，可以用 top, left, bottom, 和 right .

在查找UI控件属性key 里可以查看如何查找对应的key

定义指定控件的样式

{
  "ui": {
    "Window.border" : "4,4,4,4,E6E6E6"  //定义所有窗口的边框宽度和颜色
  }
}

查找UI控件属性key

在 IntelliJ Platform UI 里定义了数百个控件的key ,通过下面方法可以找到控件对应的key

利用代码补全

使用LaF

查看文档 ，打开搜索框，搜索就行。

上次编辑于:
贡献者: zhaojingbo
Loading...