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

熟悉的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

制作过程

整个制作过程分为三部分

  • 查看官方SDK文档,了解插件开发基本知识
  • 制作IDE UI的配色
  • 制作代码Scheme Colors

IDE插件项目创建

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

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

image.png

主题制作

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

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

  • UI配色:就是IDE的面板,按钮,对话框,菜单,工具栏等等上的图标、背景、字体、边框的配色。

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

ui theme edit
  • 代码配色就很好理解了,最核心的内容,各种语言的关键字,方法,变量等等的字体颜色,大小,显示效果等等。

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

code color scheme edit

设计思路

Gruvbox 颜色卡-dark

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

  • 代码整体配色和Gruvbox保持一致
  • UI配色和代码配色贴近,整体风格统一
  • 针对Java语法特点进行调整,代码整体观感避免花花绿绿,配色使用尽量克制
  • 避免出现和默认主题颜色上的认知冲突,比如默认红色为错误和未知内容,所以所以Gruvbox的红色关键字配色就不能使用
  • 避免出现内容和背景颜色贴近,导致阅读困难或者引起视觉疲劳。这一点其实很重要,之前使用的很多三方主题都有类似的问题。

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

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

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

  • 接口(加粗)和类进行区分(在IDEA的默认配色中两者风格是一致的)
接口和类
  • 除了错误和警告,避免使用任何形式的下划线(很讨厌下划线,所以用在错误和警告上,这样一看见就会引起负面情绪,让我更想去删掉或者修复掉对应的内容)
错误和警告
  • 辅助语法提示颜色尽量和背景有明显区分但是不突出,避免影响编写代码时的注意力。打个比方,打开一个类,第一眼看过去肯定是方法申明和语法逻辑,而不是醒目的范型提示。
语法提示
  • 颜色使用上的克制。在Java中,需要强调的内容添加颜色,其余的全部保持默认。比如,类、this的字段、关键字、字符串、常量、注解这些需要强调的给予对应的颜色进行区分。其余的比如方法调用、变量、局部变量、静态方法、运算符等等都保持默认颜色。然后就是注释和编辑器的提示,全部都弱化,避免和代码主体混淆,但是仍然容易阅读。

  • 还有一些就是从其他地方借鉴的:比如静态都是斜体(方法和常量)。对于静态字段,在编写时一眼能看出来和普通常量的区别也很有用,所以颜色上也略深于普通变量。

静态与非静态

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

插件页面
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,219评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,363评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,933评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,020评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,400评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,640评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,896评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,597评论 0 199
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,327评论 1 244
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,581评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,072评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,399评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,054评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,083评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,849评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,672评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,585评论 2 270

推荐阅读更多精彩内容