Intellij IDEA纵横研究院后端基础技术专题社区IntelliJ IDEA 专注

自己动手打造一款intelliJ IDEA的主题-MyGruvb

2019-09-19  本文已影响0人  比轩

熟悉的vim的同学大多都用过的一个配色Gruvbox,整体给人感觉沉稳、清晰,对眼睛也十分友好,没有过于暗或者亮的地方,也不花里胡哨。正重要的是,微微泛黄,在晚上看起来也很舒服。

gruvbox-vim

除了vim之外,我其实有一半的时间都在jetbrains的IDE里干活,比如IntelliJ IDEA 和 DataGrip,在2019.1版本之后,jetbrains也全家桶支持自定义主题了,但是一直到今天其实都没有找到用起来舒服的 配色,有几款喜欢的也都是这里或者那里不太舒服,所以决定自己打造一款基于gruvbox的主题配色。

最终效果图大概是这个样子,插件目前已经审核通过,可以直接在jetbrains任何编辑器中下载使用

MyGruvbox Java效果

除了Java配色之外,还花了些时间调整了下其他和Jvm方言和前端技术栈语言的配色,比如这些:

JSX & Javascript

JSX & Javascript

DataGrip-SQL

DataGrip-SQL

CSS&HTML

CSS&HTML

制作过程

整个制作过程分为三部分

IDE插件项目创建

之前没有接触过IDE插件的开发,所以先花时间阅读了下官方文档。我个人其实就阅读了三个部分:

创建项目其实很简单,IDEA旗舰版本默认是安装DevKit的,所以可以直接基于DevKit创建和开发插件项目。

image.png

主题制作

主要说说主题制作部分,其他内容都可以参考官方文档学习。

主题分为两部分:UI配色代码配色

UI配色文件在一个josn文件里进行编辑和调整,可以点击上面的按钮随时预览和调整,也可以实施编辑和预览。

ui theme edit

代码的配色调整官方建议是使用setting面板里面Color Scheme编辑功能进行设计 ,最后使用导出功能添加到工程项目里即可。

code color scheme edit

设计思路

Gruvbox 颜色卡-dark

整套主题配色都是基于Gruvbox的,然后针对IDE和Java的特点进行调整。我给自己设立几个目标和需要注意的点:

基于以上目标,其实第一版的设计很快就完成了,但是细节上的颜色搭配其实调整了很久,尤其是为了满足最后一点,没少折腾。

关于代码配色的设计,其实是一件很有意思的事情,整个过程下来,也是我更理解代码配色对于编码编写和阅读的重要性。

关于代码配色的设计和制作其实整体还是蛮简单的,直接拿着IDEA的默认黑色主题Dracula进行复制,然后在上面进行修改就可以了。第一步是设置背景和其他Gruvbox的颜色,然后调整警告,错误,文本等等基础内容的颜色。第二步就是专门针对Java语言调整,这一步也是最重要的一步。整个过程当然也不是从0开始的,借鉴了大量我之前使用的主题的设计思路,然后使用相近的Gruvbox配色进行替换。

接口和类 错误和警告 语法提示 静态与非静态

当然,整个代码配色的设计过程中还有大量的内容,很多都是借鉴了其他我比较喜欢的主体的设计思路,最终完成了对于我个人比较满意的一套配色。我相信,对于大部分Java开发的同学,这套配色应该都是相对比较有好的,欢迎大家在IDEA的插件仓库中下载使用,有任何使用问题也欢迎提Issues。

插件页面
上一篇 下一篇

猜你喜欢

热点阅读