自己動手打造一款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。

插件頁面
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容