sublime常用主题---

电玩女神 2022-06-10 12:12 188阅读 0赞

**1**

小编推荐：[掘金][Link 1]是一个高质量的技术社区，从 ECMAScript 6 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP，技术干货尽在掌握..

[![stuq-750.jpg][]][stuq-750.jpg 1]

2016年 package control 中最好的Sublime Text 3 主题。

![opflbzrhqkifaenrzckx\_scotch-featured-image-guidelines][opflbzrhqkifaenrzckx_scotch-featured-image-guidelines]

Sublime Text是一个强大的令人难以置信的编辑器。 它不仅具有大量的功能，而且还有很多主题，让他看起来很漂亮。 我们以前整理过[2014年的最好的主题][2014]; 让我们看看最新的Sublime Text 3主题。

### 安装主题 ###

要安装主题，请先先安装 [Package Control][]，接下来的步骤如下：

1.  ctrl + shift + p 或 cmd + shift + p
2.  查找 `Package Control: Install Package`
3.  搜索主题并按回车键（enter）
4.  查看 Preferences -> Settings – User 中的主题，如果要修改主题，只要编辑json中 `theme` 选项就可以了

js 代码:
      
       
        { 
        "theme": "Lanzhou.sublime-theme"
        }

注：下面主题截图中使用的是[Operator Mono][]字体。

--------------------

### Boxy ###

*  拥有四个高品质的主题和多个配色方案。
 *  各种各样的选项来调整编辑器的每个视觉细节。

[在 Package Control 中查看 Boxy][Package Control _ Boxy]

js 代码:
      
       
        { 
        // Boxy Yesterday
        "color_scheme": "Packages/Boxy Theme/schemes/Boxy Yesterday.tmTheme",
        "theme": "Boxy Yesterday.sublime-theme",
        }

![jb56ph5aqzs87lokau6h\_screen-shot-2016-05-06-at-8-46-23-am][jb56ph5aqzs87lokau6h_screen-shot-2016-05-06-at-8-46-23-am]

js 代码:
      
       
        { 
        // Boxy Tomorrow
        "color_scheme": "Packages/Boxy Theme/schemes/Boxy Tomorrow.tmTheme",
        "theme": "Boxy Tomorrow.sublime-theme",
        }

![rxx3hxnetf6tsavcmih5\_screen-shot-2016-05-06-at-8-39-00-am][rxx3hxnetf6tsavcmih5_screen-shot-2016-05-06-at-8-39-00-am]

js 代码:
      
       
        { 
        // Boxy Ocean
        "color_scheme": "Packages/Boxy Theme/schemes/Boxy Ocean.tmTheme",
        "theme": "Boxy Ocean.sublime-theme",
        }

![at5qqthnrefu2euv3viv\_screen-shot-2016-05-06-at-8-40-13-am][at5qqthnrefu2euv3viv_screen-shot-2016-05-06-at-8-40-13-am]

js 代码:
      
       
        { 
        // Boxy Monokai
        "color_scheme": "Packages/Boxy Theme/schemes/Boxy Monokai.tmTheme",
        "theme": "Boxy Monokai.sublime-theme",
        }

![p7olgkls1ccqqfekrv8a\_screen-shot-2016-05-06-at-7-07-04-am][p7olgkls1ccqqfekrv8a_screen-shot-2016-05-06-at-7-07-04-am]

### Material Theme ###

*  非常完善的文档和大量的选项用来自定义。
 *  作者创建了插件用于更多定制。
    
     *  [White panels and inputs][]
     *  [Appbar][]

[在 Package Control 中查看 Material Theme][Package Control _ Material Theme]

js 代码:
      
       
        { 
        // Default theme
        "theme": "Material-Theme.sublime-theme",
        "color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme"
        }

![i9kpqtnrvsrg1tbkohks\_screen-shot-2016-05-08-at-12-42-08-pm][i9kpqtnrvsrg1tbkohks_screen-shot-2016-05-08-at-12-42-08-pm]

js 代码:
      
       
        { 
        // Darker theme
        "theme": "Material-Theme-Darker.sublime-theme",
        "color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme"
        }

![kvucicmq2udq5nwt6rzy\_screen-shot-2016-05-08-at-12-45-36-pm][kvucicmq2udq5nwt6rzy_screen-shot-2016-05-08-at-12-45-36-pm]

js 代码:
      
       
        { 
        // Lighter theme
        "theme": "Material-Theme-Lighter.sublime-theme",
        "color_scheme": "Packages/Material Theme/schemes/Material-Theme-Lighter.tmTheme"
        }

![sncnl83rqcowzcxtvqog\_screen-shot-2016-05-08-at-12-46-26-pm][sncnl83rqcowzcxtvqog_screen-shot-2016-05-08-at-12-46-26-pm]

### Agila ###

*  文件树中间距很大的文件夹，以便于阅读。
 *  Agila Oceanic和流行的Spacegray主题有种类似的感觉。

[在 Package Control中查看Agila][Package Control_Agila]

js 代码:
      
       
        { 
        // Default theme
        "theme": "Agila.sublime-theme",
        "color_scheme": "Packages/Agila Theme/Agila Oceanic Next.tmTheme"
        }

![buaqi8r9e6xsziugdow5\_screen-shot-2016-05-06-at-7-21-47-am][buaqi8r9e6xsziugdow5_screen-shot-2016-05-06-at-7-21-47-am]

js 代码:
      
       
        { 
        // Classic theme
        "theme": "Agila Classic.sublime-theme",
        "color_scheme": "Packages/Agila Theme/Agila Classic Oceanic Next.tmTheme"
        }

![ddaze12js7clgoxytlw0\_screen-shot-2016-05-06-at-8-44-34-am][ddaze12js7clgoxytlw0_screen-shot-2016-05-06-at-8-44-34-am]

js 代码:
      
       
        { 
        // Light theme
        "theme": "Agila Light.sublime-theme",
        "color_scheme": "Packages/Agila Theme/Agila Light Solarized.tmTheme"
        }

![hwhlviqpt8ibcftezv0r\_screen-shot-2016-05-06-at-8-45-10-am][hwhlviqpt8ibcftezv0r_screen-shot-2016-05-06-at-8-45-10-am]

### Lanzhou ###

*  边栏和编辑器之间的良好对比，如果你使用暗颜色方案，和`Base16 Ocean Dark`类似。

[在Package Control中查看 Lanszhou][Package Control_ Lanszhou]

js 代码:
      
       
        { 
        "theme": "Lanzhou.sublime-theme",
        "color_scheme": "Packages/Theme - Lanzhou/base16-ocean.dark.tmTheme"
        }

![i1fpnnqyqh6utkh42p2g\_screen-shot-2016-05-06-at-7-13-40-am][i1fpnnqyqh6utkh42p2g_screen-shot-2016-05-06-at-7-13-40-am]

## Sunrise ##

[在Package Control中查看 Sunrise][Package Control_ Sunrise]

js 代码:
      
       
        { 
        "theme": "Sunrise.sublime-theme"
        }

![yugjf7wsq5qoj8bs3chs\_screen-shot-2016-05-06-at-7-16-32-am][yugjf7wsq5qoj8bs3chs_screen-shot-2016-05-06-at-7-16-32-am]

## Kronuz ##

*  基于 [Soda Dark][] 和 [Afterglow][].

[在Package Control中查看 Kronuz][Package Control_ Kronuz]

js 代码:
      
       
        { 
        "theme": "Theme - Kronuz.sublime-theme",
        "color_scheme": "Packages/Theme - Kronuz/Kronuz.tmTheme"
        }

![uvkphn4drgwautfcq3aj\_screen-shot-2016-05-09-at-7-56-31-am][uvkphn4drgwautfcq3aj_screen-shot-2016-05-09-at-7-56-31-am]

### Autumn ###

*  在文件树上有一种很酷的透视效果。
 *  看起来很像Monokai。

[在Package Control中查看 Autumn][Package Control_ Autumn]

js 代码:
      
       
        { 
        "theme": "Autumn.sublime-theme",
        "color_scheme": "Packages/Theme - Autumn/Autumn.tmTheme"
        }

![82nf1mfgr1ss0zs8r3zn\_screen-shot-2016-05-09-at-8-14-37-am-1][82nf1mfgr1ss0zs8r3zn_screen-shot-2016-05-09-at-8-14-37-am-1]

--------------------

### 选择主题的几个小建议 ###

*  每个人的眼睛看到的颜色是不同，找一个背景和文本之间有良好的对比主题。
 *  当你的眼睛累了，或者深夜的时候，你可以考虑使用[Flux][]类似的软件。
 *  试试[Colorsublime][]，它允许您在Sublime Text中立即更改当前的颜色方案。

![opsqbrhiqzcwyqxdgbh7\_1cc8d20def6ff58d8311b67c5e791c20bc15aa6e][opsqbrhiqzcwyqxdgbh7_1cc8d20def6ff58d8311b67c5e791c20bc15aa6e]

--------------------

### 结论 ###

到目前为止，我最喜欢的主题和配色方案是Boxy Monokai，第二个是Agila。还有，我发现这些主题的配色方案针对不同的文件（ES6, ReactJS/JSX, 或者 HTML）有不同的语法高亮。

[Link 1]: http://gold.xitu.io/welcome/frontend/?utm_source=css88&utm_medium=word&utm_content=ganhuo&utm_campaign=q3_personal
[stuq-750.jpg]: http://css88.b0.upaiyun.com/css88/2017/06/stuq-750.jpg
[stuq-750.jpg 1]: http://www.stuq.org/course/1194
[opflbzrhqkifaenrzckx_scotch-featured-image-guidelines]: http://css88.b0.upaiyun.com/css88/2016/10/OpFlBZrhQkifAenRZCKX_scotch-featured-image-guidelines.jpg
[2014]: https://scotch.io/bar-talk/the-best-sublime-text-3-themes-of-2014
[Package Control]: https://packagecontrol.io/installation
[Operator Mono]: http://www.typography.com/blog/introducing-operator
[Package Control _ Boxy]: https://packagecontrol.io/packages/Boxy%20Theme
[jb56ph5aqzs87lokau6h_screen-shot-2016-05-06-at-8-46-23-am]: http://css88.b0.upaiyun.com/css88/2016/10/jb56Ph5aQzS87LOKau6H_Screen-Shot-2016-05-06-at-8.46.23-AM.png
[rxx3hxnetf6tsavcmih5_screen-shot-2016-05-06-at-8-39-00-am]: http://css88.b0.upaiyun.com/css88/2016/10/Rxx3hXneTF6tSavCMIh5_Screen-Shot-2016-05-06-at-8.39.00-AM.png
[at5qqthnrefu2euv3viv_screen-shot-2016-05-06-at-8-40-13-am]: http://css88.b0.upaiyun.com/css88/2016/10/at5QqthnRefU2EuV3ViV_Screen-Shot-2016-05-06-at-8.40.13-AM.png
[p7olgkls1ccqqfekrv8a_screen-shot-2016-05-06-at-7-07-04-am]: http://css88.b0.upaiyun.com/css88/2016/10/p7oLgkLS1CcqQFeKrV8A_Screen-Shot-2016-05-06-at-7.07.04-AM.png
[White panels and inputs]: https://github.com/equinusocio/material-theme-white-panels
[Appbar]: https://github.com/equinusocio/material-theme-appbar
[Package Control _ Material Theme]: https://packagecontrol.io/packages/Material%20Theme
[i9kpqtnrvsrg1tbkohks_screen-shot-2016-05-08-at-12-42-08-pm]: http://css88.b0.upaiyun.com/css88/2016/10/i9KpQtnRVSrg1TbKOHKs_Screen-Shot-2016-05-08-at-12.42.08-PM.png
[kvucicmq2udq5nwt6rzy_screen-shot-2016-05-08-at-12-45-36-pm]: http://css88.b0.upaiyun.com/css88/2016/10/KVUCICmQ2uDq5nwt6RZY_Screen-Shot-2016-05-08-at-12.45.36-PM.png
[sncnl83rqcowzcxtvqog_screen-shot-2016-05-08-at-12-46-26-pm]: http://css88.b0.upaiyun.com/css88/2016/10/SNCNL83RQcOwzCxtVQog_Screen-Shot-2016-05-08-at-12.46.26-PM.png
[Package Control_Agila]: https://packagecontrol.io/packages/Agila%20Theme
[buaqi8r9e6xsziugdow5_screen-shot-2016-05-06-at-7-21-47-am]: http://css88.b0.upaiyun.com/css88/2016/10/buAqI8R9e6xszIUGDOw5_Screen-Shot-2016-05-06-at-7.21.47-AM.png
[ddaze12js7clgoxytlw0_screen-shot-2016-05-06-at-8-44-34-am]: http://css88.b0.upaiyun.com/css88/2016/10/dDaZE12JS7CLGoxYTlW0_Screen-Shot-2016-05-06-at-8.44.34-AM.png
[hwhlviqpt8ibcftezv0r_screen-shot-2016-05-06-at-8-45-10-am]: http://css88.b0.upaiyun.com/css88/2016/10/HwHlViQPT8ibcFTezV0R_Screen-Shot-2016-05-06-at-8.45.10-AM.png
[Package Control_ Lanszhou]: https://packagecontrol.io/packages/Theme%20-%20Lanzhou
[i1fpnnqyqh6utkh42p2g_screen-shot-2016-05-06-at-7-13-40-am]: http://css88.b0.upaiyun.com/css88/2016/10/i1fPNNQyQH6Utkh42P2g_Screen-Shot-2016-05-06-at-7.13.40-AM.png
[Package Control_ Sunrise]: https://packagecontrol.io/packages/Sunrise%20Theme
[yugjf7wsq5qoj8bs3chs_screen-shot-2016-05-06-at-7-16-32-am]: http://css88.b0.upaiyun.com/css88/2016/10/yUGjF7wsQ5qoJ8BS3chs_Screen-Shot-2016-05-06-at-7.16.32-AM.png
[Soda Dark]: https://github.com/buymeasoda/soda-theme
[Afterglow]: https://github.com/YabataDesign/afterglow-theme
[Package Control_ Kronuz]: https://packagecontrol.io/packages/Theme%20-%20Kronuz
[uvkphn4drgwautfcq3aj_screen-shot-2016-05-09-at-7-56-31-am]: http://css88.b0.upaiyun.com/css88/2016/10/Uvkphn4dRGWaUtFcQ3aj_Screen-Shot-2016-05-09-at-7.56.31-AM.png
[Package Control_ Autumn]: https://packagecontrol.io/packages/Theme%20-%20Autumn
[82nf1mfgr1ss0zs8r3zn_screen-shot-2016-05-09-at-8-14-37-am-1]: http://css88.b0.upaiyun.com/css88/2016/10/82nf1MfgR1Ss0Zs8R3Zn_Screen-Shot-2016-05-09-at-8.14.37-AM-1.png
[Flux]: https://justgetflux.com/
[Colorsublime]: https://packagecontrol.io/packages/Colorsublime
[opsqbrhiqzcwyqxdgbh7_1cc8d20def6ff58d8311b67c5e791c20bc15aa6e]: http://css88.b0.upaiyun.com/css88/2016/10/opsQBRHiQZCwyQXDgBH7_1cc8d20def6ff58d8311b67c5e791c20bc15aa6e.gif