HarmonyOS 鸿蒙Next 自定义DevEcoStudio的UI主题与代码样式

HarmonyOS 鸿蒙Next 自定义DevEcoStudio的UI主题与代码样式 该篇文档需要使用idea进行插件开发。其次由于博主也是初次接触插件开发, 以及对于DevEco Studio 的具体运行不太了解, 所以不能保证所开发的主题插件在其他电脑上是否可运行, 以及idea不同版本上的开发的插件对于DevEco Studio的兼容性。

本篇博客仅供参考, 无法保证会不会出现软件的不兼容, 冲突问题。在使用时请仔细参考对应的官方文档, 文中出现的代码也希望大家大胆复制, 小心粘贴。

在使用DevEco Studio时感觉其黑色主题以及代码配色不是很喜欢，了解其是基于idea的社区版进行开发，所以猜测idea的插件也能对其有效，所以参考idea的主题开发文档自己写了一个。

主要是想参与国人自己的系统的生态环境的建设, 但不是科班出身,到现在这个鸿蒙开发学习的也有点拉。所以就不发啥代码层面的东西了, 一看社区还没有主题相关的博客, 这就写了一个了。如有错误, 希望前辈们多多包容

这是最终的效果

image

使用idea创建一个插件项目.

官方的开发文档:

这里使用的是idea旗舰版, 官方的说法idea社区版也是可以进行插件的开发。

image

plugin.xml文件的介绍

image

配置好插件的相关说明之后, 开始自定义我们的UI了

image

这里提供一下我自己设置的UI代码

"colors": {
    "primaryBlack": "#171719",
    "secondBlack": "#232326",
    "secondBlack2": "#2a2a2f",
    "deepBlack": "#070806",
    "deepBlackBlue": "#001633",
    "hoverBg": "#111111",
    "actionBg": "#232325",
    "buttonActionBgColor": "#111111",
    "buttonActionBg": "#0066da",
    "buttonShadow": "#1e1e21",
    "primaryFg": "#b7b7b7",
    "selectFg": "#0066da",
    "primaryBorder": "#1E1E1F",
    "secondBorder": "#4d4d51",
    "keyYellow": "#fabd2f"
  },
"ui": {
    "*": {
      "background": "primaryBlack",
      "selectionBackground": "deepBlack",
      "selectionForeground": "selectFg",
      "hoverBackground": "hoverBg",
      "borderColor": "primaryBorder",
      "disabledBorderColor": "primaryBorder",
      "separatorColor": "secondBorder",
      "Borders.color": "primaryBorder"
    },
    "EditorTabs": {
      "underlineColor": "buttonActionBg",
      "underlineHeight": 2,
      "borderColor": "primaryBorder",
      "underlinedTabBackground": "buttonActionBgColor"
    },
    "Window.border": "1,1,1,1,555555",
    "ActionButton": {
      "hoverBackground": "deepBlackBlue"
    },
    "ToolWindow": {
      "Header": {
        "background": "secondBlack",
        "inactiveBackground": "secondBlack2"
      }
    },
    "Link": {
      "activeForeground": "keyYellow",
      "hoverForeground": "selectFg",
      "pressedForeground": "selectFg",
      "visitedForeground": "selectFg"
    },
    "Tree": {
      "selectionBackground": "selectFg",
      "selectionForeground": "primaryFg"
    },
    "Button": {
      "startBackground": "primaryBlack",
      "endBackground": "primaryBlack",
      "startBorderColor": "primaryBorder",
      "endBorderColor": "primaryBorder",
      "shadowColor": "buttonShadow",
      "default": {
        "foreground": "primaryFg",
        "startBackground": "buttonActionBg",
        "endBackground": "buttonActionBg",
        "startBorderColor": "primaryBorder",
        "endBorderColor": "primaryBorder"
      }
    }
  }

修改完编辑器的UI配色之后, 可以修改代码样式的主题颜色了。

image

获取了导出的代码样式文件之后, 需要将该文件放入我们的插件项目中。

image

现在可以生成对应的插件了。

image

image

将插件导入DevEco Studio中

image

在对应的 setting > appearance & Behavior > Appearance > Theme中选择我们自定义的主题

在setting > Editor > Color Schema > Schema选择自定义的代码样式。其次可以修改ArkTS的代码样式。


更多关于HarmonyOS 鸿蒙Next 自定义DevEcoStudio的UI主题与代码样式的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

好

更多关于HarmonyOS 鸿蒙Next 自定义DevEcoStudio的UI主题与代码样式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，自定义DevEco Studio的UI主题与代码样式可以通过以下步骤实现：

  1. 修改UI主题：

    • 打开DevEco Studio。
    • 进入“File”菜单，选择“Settings”。
    • 在“Settings”窗口中，导航到“Appearance & Behavior”下的“Appearance”。
    • 在“Theme”下拉菜单中，选择预设的“Darcula”或“Light”主题，或点击“Manage”安装其他主题插件。

  2. 自定义代码样式：

    • 在“Settings”窗口中，导航到“Editor”下的“Code Style”。
    • 选择对应的语言（如ArkTS），然后根据需要调整代码格式、缩进、空格等样式。
    • 可以导入或导出代码样式配置文件，方便团队统一风格。

  3. 字体和颜色方案：

    • 在“Editor”下的“Font”中，调整代码编辑器的字体大小和样式。
    • 在“Color Scheme”中，选择或自定义代码高亮配色方案，支持关键字、注释、字符串等的颜色调整。

  4. 保存和应用：

    • 完成设置后，点击“Apply”和“OK”保存更改并应用。

通过这些步骤，可以快速自定义DevEco Studio的UI主题和代码样式，提升开发体验。

回到顶部