1. 程式人生 > >Sublime Text自定義配色方案

Sublime Text自定義配色方案

先推薦介紹幾款非常好用的自定義主題:
https://github.com/aziz/tmTheme-Editor
http://tmtheme-editor.herokuapp.com/
這個可以線上修改配色方案,也可以上傳本地的方案修改.
https://github.com/LeonardoGentile/ColorSchemeEditorLive
隨意開啟一個文件然後shift+f12(開啟當前配色方案)
然後把佈局換成兩列(左側你的文件,右側配色方案)
這時當你點選左側文件中的程式碼,右側會跳到當前程式碼配色範圍中
https://github.com/MattDMo/Neon-color-scheme


這個配色方案支援很多很多很多很多…..語言的語法
這樣就不需要自己寫範圍了
把Neon color scheme裡面不需要的範圍刪掉,然後再用tmThemeEditor線上編輯,最後用Color Scheme Editor做小修改.
使用Seti_UI自定義主題
主題安裝
使用package control搜尋Seti_UI進行安裝,預設會將SetiUI-Icons裝上
檔案圖示
https://github.com/mrmartineau/SetiUI-Icons-Sublime
如果不想使用SetiUI而喜歡其圖示,可以單獨下載圖示進行安裝
修改主題
先看一下動大刑之後的sublime
這裡寫圖片描述

開始修改

在”首選項-設定”中開啟設定檔案,在使用者檔案中進行主題配置,seti有很多選項可以選擇。

{
    "Seti_ClosedFolder_anim": true,
    "Seti_SB_big": true,
    "Seti_SB_med": true,
    "Seti_accent_lime": true,
    "Seti_alt_tree_row": true,
    "Seti_bold_heading": true,
    "Seti_bold_slctdfile_labels": true,
    "Seti_bold_slctdtab_labels
": true, "Seti_lime_label": true, "Seti_lime_map": true, "Seti_lime_scrollbar": true, "Seti_lime_statusbar": true, "Seti_lime_tabclose": true, "Seti_no_blue_bar": true, "Seti_red_tab": true, "Seti_sb_small_padding": true, "Seti_sb_tree_miny": true, "Seti_show_group_arrows": true, "Seti_sidebar_font_size_12": true, "Seti_tab_font_12": true, "Seti_tabs_big": true, "Seti_tabs_med": true, "Seti_tabs_small": true, "Seti_top_heading_anim": true, "color_scheme": "Packages/my Color Scheme/Lyte-Solarized-Light (SL).tmTheme", "font_size": 16, "highlight_line": true, "ignored_packages": [ // 忽略的包 ], "mouse_wheel_tabswitch": true, "tab_size": 4, "theme": "Seti.sublime-theme", "translate_tabs_to_spaces": true }

在”首選項>瀏覽外掛目錄”進入sublime的外掛目錄,進入Seti_UI目錄。

目錄結構如下

Seti_UI                        
├─icons                    
│  ├─Langs                 
│  └─Prefs                 
├─Main                     
│  ├─accent                
│  │  ├─indigo             
│  │  │  └─orig            
│  │  ├─lime               
│  │  │  └─orig            
│  │  ├─purple             
│  │  │  └─orig            
│  │  ├─red                
│  │  │  └─orig            
│  │  ├─seablue            
│  │  │  └─orig            
│  │  ├─teal               
│  │  │  └─orig            
│  │  └─yellow             
│  │      └─orig           
│  ├─menu                  
│  └─sidebar               
├─messages                 
├─Resource                 
├─Widgets          
└─Seti.sublime-theme

使用sublime修改Seti.sublime-theme檔案,可以看到實時的介面更改
大概分為以下模組:

TABS (REGULAR)
TAB BUTTONS
TAB LABELS tab
TAB SCROLLING
FOLD BUTTONS
STANDARD SCROLLBARS
OVERLAY SCROLLBARS
EMPTY WINDOW BACKGROUND
GRID LAYOUT
MINI MAP
DIALOG
PROGRESS BAR
LABELS
TOOLTIP
STATUS BAR
SIDEBAR
SIDEBAR - OPEN FILE ICONS
SIDEBAR - GENERAL FILE ICONS
STANDARD TEXT BUTTONS
TEXT INPUT FIELD
PANEL BACKGROUNDS
MINI QUICK PANEL
QUICK PANEL
CODE COMPLETION DROPDOWN
BOTTOM PANEL BUTTONS
BOTTOM PANEL ICONS - GROUP 1
BOTTOM PANEL ICONS - GROUP 2
BOTTOM PANEL ICONS - GROUP 3
BOTTOM PANEL ICONS - GROUP 4
Accents

裡面的設定基本上可以見名知意,很容易修改。比如其中一段修改側邊欄樣式的程式碼

    {
        "class": "sidebar_container",
        "settings": ["Seti_top_heading_anim"],
        "layer0.tint": [255,255,204], //側邊欄背景顏色
        "layer0.inner_margin": [0, 54, 0, 0],
        "layer1.texture": {
            "keyframes": [
                "Seti_UI/Main/sidebar/sidebar_heading_alt-h8.png",
                "Seti_UI/Main/sidebar/sidebar_heading_alt-h7.png",
                "Seti_UI/Main/sidebar/sidebar_heading_alt-h6.png",
                "Seti_UI/Main/sidebar/sidebar_heading_alt-h5.png",
                "Seti_UI/Main/sidebar/sidebar_heading_alt-h4.png",
                "Seti_UI/Main/sidebar/sidebar_heading_alt-h3.png",
                "Seti_UI/Main/sidebar/sidebar_heading_alt-h2.png",
                "Seti_UI/Main/sidebar/sidebar_heading_alt-h1.png",
                "Seti_UI/Main/sidebar/sidebar_heading_alt-h0.png"
            ],
            "loop": false,
            "frame_time": 0.030
        },
        "layer1.opacity": { "target": 1.0, "speed": 10.0, "interpolation": "smoothstep" },
        "layer1.inner_margin": [120, 54, -120, 0],
        "content_margin": [0, 54, 0, 0]
    }

好了,可以動大刑改變自己的sublime了!