熟悉的vim的同學大多都用過的一個配色Gruvbox,整體給人感覺沉穩、清晰,對眼睛也十分友好,沒有過于暗或者亮的地方,也不花里胡哨。正重要的是,微微泛黃,在晚上看起來也很舒服。
除了vim之外,我其實有一半的時間都在jetbrains的IDE里干活,比如IntelliJ IDEA 和 DataGrip,在2019.1版本之后,jetbrains也全家桶支持自定義主題了,但是一直到今天其實都沒有找到用起來舒服的 配色,有幾款喜歡的也都是這里或者那里不太舒服,所以決定自己打造一款基于gruvbox的主題配色。
最終效果圖大概是這個樣子,插件目前已經審核通過,可以直接在jetbrains任何編輯器中下載使用。
除了Java配色之外,還花了些時間調整了下其他和Jvm方言和前端技術棧語言的配色,比如這些:
JSX & Javascript
DataGrip-SQL
CSS&HTML
制作過程
整個制作過程分為三部分
- 查看官方SDK文檔,了解插件開發基本知識
- 制作IDE UI的配色
- 制作代碼Scheme Colors
IDE插件項目創建
之前沒有接觸過IDE插件的開發,所以先花時間閱讀了下官方文檔。我個人其實就閱讀了三個部分:
創建項目其實很簡單,IDEA旗艦版本默認是安裝DevKit的,所以可以直接基于DevKit創建和開發插件項目。
主題制作
主要說說主題制作部分,其他內容都可以參考官方文檔學習。
主題分為兩部分:UI配色和代碼配色。
- UI配色:就是IDE的面板,按鈕,對話框,菜單,工具欄等等上的圖標、背景、字體、邊框的配色。
UI配色文件在一個josn文件里進行編輯和調整,可以點擊上面的按鈕隨時預覽和調整,也可以實施編輯和預覽。
- 代碼配色就很好理解了,最核心的內容,各種語言的關鍵字,方法,變量等等的字體顏色,大小,顯示效果等等。
代碼的配色調整官方建議是使用setting面板里面Color Scheme編輯功能進行設計 ,最后使用導出功能添加到工程項目里即可。
設計思路
整套主題配色都是基于Gruvbox的,然后針對IDE和Java的特點進行調整。我給自己設立幾個目標和需要注意的點:
- 代碼整體配色和Gruvbox保持一致
- UI配色和代碼配色貼近,整體風格統一
- 針對Java語法特點進行調整,代碼整體觀感避免花花綠綠,配色使用盡量克制
- 避免出現和默認主題顏色上的認知沖突,比如默認紅色為錯誤和未知內容,所以所以Gruvbox的紅色關鍵字配色就不能使用
- 避免出現內容和背景顏色貼近,導致閱讀困難或者引起視覺疲勞。這一點其實很重要,之前使用的很多三方主題都有類似的問題。
基于以上目標,其實第一版的設計很快就完成了,但是細節上的顏色搭配其實調整了很久,尤其是為了滿足最后一點,沒少折騰。
關于代碼配色的設計,其實是一件很有意思的事情,整個過程下來,也是我更理解代碼配色對于編碼編寫和閱讀的重要性。
關于代碼配色的設計和制作其實整體還是蠻簡單的,直接拿著IDEA的默認黑色主題Dracula進行復制,然后在上面進行修改就可以了。第一步是設置背景和其他Gruvbox的顏色,然后調整警告,錯誤,文本等等基礎內容的顏色。第二步就是專門針對Java語言調整,這一步也是最重要的一步。整個過程當然也不是從0開始的,借鑒了大量我之前使用的主題的設計思路,然后使用相近的Gruvbox配色進行替換。
- 接口(加粗)和類進行區分(在IDEA的默認配色中兩者風格是一致的)
- 除了錯誤和警告,避免使用任何形式的下劃線(很討厭下劃線,所以用在錯誤和警告上,這樣一看見就會引起負面情緒,讓我更想去刪掉或者修復掉對應的內容)
- 輔助語法提示顏色盡量和背景有明顯區分但是不突出,避免影響編寫代碼時的注意力。打個比方,打開一個類,第一眼看過去肯定是方法申明和語法邏輯,而不是醒目的范型提示。
顏色使用上的克制。在Java中,需要強調的內容添加顏色,其余的全部保持默認。比如,類、this的字段、關鍵字、字符串、常量、注解這些需要強調的給予對應的顏色進行區分。其余的比如方法調用、變量、局部變量、靜態方法、運算符等等都保持默認顏色。然后就是注釋和編輯器的提示,全部都弱化,避免和代碼主體混淆,但是仍然容易閱讀。
還有一些就是從其他地方借鑒的:比如靜態都是斜體(方法和常量)。對于靜態字段,在編寫時一眼能看出來和普通常量的區別也很有用,所以顏色上也略深于普通變量。
當然,整個代碼配色的設計過程中還有大量的內容,很多都是借鑒了其他我比較喜歡的主體的設計思路,最終完成了對于我個人比較滿意的一套配色。我相信,對于大部分Java開發的同學,這套配色應該都是相對比較有好的,歡迎大家在IDEA的插件倉庫中下載使用,有任何使用問題也歡迎提Issues。