コードがはっきりと見やすくて、使いやすい Sublime Text 3 のテーマのまとめ
Post on:2016年10月13日
sponsors
Web制作時などのコーディングの作業が捗る、コードがはっきりと見やすくて、使いやすい Sublime Text 3 のテーマを紹介します。
ダーク系をはじめ、ライト系、クリーム系、GitHubカラーもあります。
- ayu -最近注目されてるニューテーマ
- DuoTone -美しくて見やすいテーマ
- El Capitan -OS Xにはこれ！
- Material -Material Designがかっこいい
- Tech49 -ダーク系の定番
- Predawn -マットなブラックが目に馴染む
- Soda SolarizedDark -ブルーがかった明るいダーク系
- Solarized Space -クリーム系が好きな人に
- Spacegray -Oceanのダーク系とライト系が爽やか
- Flatland -シンプルでフラットなデザイン
- Inspired GitHub Color Scheme -GitHubのシンタックスカラー
ayu -最近注目されてるニューテーマ
Sublime Text 2/3対応のテーマ。
ダークとライトの2種類のテーマがあり、タブやファイルツリーが小さめにデザインされています。
ayu: Dark
ayu: Light
ayu -GitHub
ayuのインストール
- Sublime Textを起動。
- 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
- ボックスに「install package」を入力して「Enter」キー。
- インストールするパッケージを指定するボックスが開きます。
- ボックスに「ayu」を入力して「Enter」キー。
- 下部のステータスバーにインストールの状況が表示されます。
ayuのセッティング
「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記を記述します。
|
1 2 |
"theme": "ayu.sublime-theme", "color_scheme": "Packages/ayu/ayu.tmTheme", |
|
1 2 |
"theme": "ayu-light.sublime-theme", "color_scheme": "Packages/ayu/ayu-light.tmTheme", |
タブの区切り線やUIの文字を小さくするには、下記を記述します。
|
1 2 |
"ui_separator": true, // separators between panels "ui_font_size_small": true, // smaller UI font size(sidebar, statusbar etc) |
DuoTone -美しくて見やすいテーマ
Sublime Text 3をはじめ、AtomとVimにも対応のカラースキーム。
DuoToneは2つの色相をベースに色調を変化させた7つのカラーで構成されています。
コードで重要な部分には強調したカラー、それほど重要ではない部分には和らいだカラーが適用され、はっきりとした見やすいテーマになっています。
DuoTone: Dark
DuoTone: 左上からSea, Space, Earth, Forest
DuoTone -GitHub
DuoToneのインストール
- Sublime Textを起動。
- 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
- ボックスに「install package」を入力して「Enter」キー。
- インストールするパッケージを指定するボックスが開きます。
- ボックスに「DuoTone」を入力して「Enter」キー。
- 下部のステータスバーにインストールの状況が表示されます。
DuoToneのセッティング
「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記の中からお好みのカラーを一つ記述します。
|
1 2 3 4 5 |
"color_scheme": "Packages/Duotones Colorschemes/duotone-dark.dark.tmTheme", "color_scheme": "Packages/Duotones Colorschemes/duotone-darkearth.dark.tmTheme", "color_scheme": "Packages/Duotones Colorschemes/duotone-darkforest.dark.tmTheme", "color_scheme": "Packages/Duotones Colorschemes/duotone-darksea.dark.tmTheme", "color_scheme": "Packages/Duotones Colorschemes/duotone-darkspace.dark.tmTheme", |
El Capitan -OS Xにはこれ！
Sublime Text 3対応のテーマ。
OS X Yosemiteにインスパイアされた明るいカラーをベースにしたデザインが美しいです。
El Capitan
El Capitan -GitHub
El Capitanのインストール
- Sublime Textを起動。
- 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
- ボックスに「install package」を入力して「Enter」キー。
- インストールするパッケージを指定するボックスが開きます。
- ボックスに「Theme - El Capitan」を入力して「Enter」キー。
- 下部のステータスバーにインストールの状況が表示されます。
El Capitanのセッティング
「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記を記述します。
|
1 |
"theme": "El Capitan.sublime-theme", |
フォントがインストール済みであればSan FranciscoやHelveticaを使うことで、El Capitanをより堪能できます。使用するフォントを「false」から「true」に変更します。
|
1 2 3 4 5 |
"el_capitan_font_default": false, "el_capitan_font_san_francisco": false, "el_capitan_font_helvetica_neue": false, "el_capitan_font_helvetica": false, "el_capitan_sidebar_blue_folders": false, |
Material -Material Designがかっこいい
Sublime Text 3対応のテーマ。
Material Designにインスパイアされたフラットなデザインが美しいテーマ。カラーはNormalとDarker、Lighterが揃っています。
Material
Material -GitHub
Materialのインストール
- Sublime Textを起動。
- 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
- ボックスに「install package」を入力して「Enter」キー。
- インストールするパッケージを指定するボックスが開きます。
- ボックスに「Material Theme」を入力して「Enter」キー。
- 下部のステータスバーにインストールの状況が表示されます。
Materialのセッティング
「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記を記述します。
|
1 2 |
"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme", "theme": "Material-Theme.sublime-theme", |
カラーを変更する時は、下記の中からお好みのカラーを一つ記述します。
|
1 2 3 |
"color_scheme": "Packages/Material Theme/schemes/OLD/Material-Theme.tmTheme", "color_scheme": "Packages/Material Theme/schemes/OLD/Material-Theme-Darker.tmTheme", "color_scheme": "Packages/Material Theme/schemes/OLD/Material-Theme-Lighter.tmTheme", |
Tech49 -ダーク系の定番
Sublime Text 2/3対応のテーマ。
ダーク系のテーマが使いやすい人にはこれがオススメ。使いやすいようにUIがカスタマイズされたOblivion FUIベースのデザインがかっこいいです。
Tech49
Tech49 -GitHub
Tech49のインストール
- Sublime Textを起動。
- 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
- ボックスに「install package」を入力して「Enter」キー。
- インストールするパッケージを指定するボックスが開きます。
- ボックスに「Theme - Tech 49”」を入力して「Enter」キー。
- 下部のステータスバーにインストールの状況が表示されます。
Tech49のセッティング
「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記を記述します。
|
1 2 |
"theme": "Tech49.sublime-theme", "color_scheme": "Packages/Theme - Tech49/Tech49.tmTheme" |
Predawn -マットなブラックが目に馴染む
Sublime Text 2/3, Atom対応のテーマ。
ダークはダークでも、マットなブラックが目に馴染み、コードだとアイスブルーが多くなるので、非常に見やすいです。
Predawn
Predawn -GitHub
Predawnのインストール
- Sublime Textを起動。
- 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
- ボックスに「install package」を入力して「Enter」キー。
- インストールするパッケージを指定するボックスが開きます。
- ボックスに「Predawn」を入力して「Enter」キー。
- 下部のステータスバーにインストールの状況が表示されます。
Predawnのセッティング
「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記を記述します。
|
1 2 |
"theme": "predawn.sublime-theme", "color_scheme": "Packages/Predawn/predawn.tmTheme", |
パネル・サイドバー・タブは、下記の項目がカスタマイズできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// Panel Options "predawn_findreplace_small": false, "predawn_quick_panel_small": false, // Sidebar Options "predawn_sidebar_arrows": false, "predawn_sidebar_large": false, "predawn_sidebar_medium": false, "predawn_sidebar_narrow": false, "predawn_sidebar_small": false, "predawn_sidebar_xlarge": false, "predawn_sidebar_xsmall": false, // Tabs Options "predawn_tabs_active_underline": false, "predawn_tabs_large": false, "predawn_tabs_medium": false, "predawn_tabs_small": false |
Soda SolarizedDark -ブルーがかった明るいダーク系
Sublime Text 2/3対応のテーマ。
ブルーがかかったちょっと明るいダーク系のデザイン。長い間、人気があるテーマです。
Soda SolarizedDark
Soda SolarizedDark -GitHub
Soda SolarizedDarkのインストール
- Sublime Textを起動。
- 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
- ボックスに「install package」を入力して「Enter」キー。
- インストールするパッケージを指定するボックスが開きます。
- ボックスに「Theme - Soda SolarizedDark」を入力して「Enter」キー。
- 下部のステータスバーにインストールの状況が表示されます。
Soda SolarizedDarkのセッティング
「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記を記述します。
|
1 |
"theme": "Soda SolarizedDark.sublime-theme", |
Solarized Space -クリーム系が好きな人に
Sublime Text 2/3対応のテーマ。
ライト系・ダーク系が揃ったSodarizedをベースにしたテーマです。Dark, Predawnもありますが、クリーム系のBrickがオススメです。
Solarized Space Brick
Solarized Space -GitHub
Solarized Spaceのインストール
- Sublime Textを起動。
- 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
- ボックスに「install package」を入力して「Enter」キー。
- インストールするパッケージを指定するボックスが開きます。
- ボックスに「Solarized Space」を入力して「Enter」キー。
- 下部のステータスバーにインストールの状況が表示されます。
Solarized Spaceのセッティング
「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記のいずれかを記述します。
|
1 2 3 4 |
"theme": "Solarized Space Light.sublime-theme", "theme": "Solarized Space Brick.sublime-theme", "theme": "Solarized Space Dark.sublime-theme", "theme": "Solarized Space Predawn.sublime-theme", |
下記の項目がカスタマイズできます。
|
1 2 3 4 5 |
"hide_sidebar_icons": true, "always_show_minimap_viewport": true, "bold_folder_labels": true, "enable_tab_scrolling": false, "overlay_scroll_bars": "enabled", |
Spacegray -Oceanのダーク系とライト系が爽やか
Sublime Text 2/3対応のテーマ。
定番テーマの一つと言ってよいでしょう。少し青みがかったOcean Dark, Ocean Light、マットなブラックのEightiesが揃っています。
Spacegray Ocean Light
Spacegray -GitHub
Spacegrayのインストール
- Sublime Textを起動。
- 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
- ボックスに「install package」を入力して「Enter」キー。
- インストールするパッケージを指定するボックスが開きます。
- ボックスに「Theme - Spacegray」を入力して「Enter」キー。
- 下部のステータスバーにインストールの状況が表示されます。
Spacegrayのセッティング
「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記を記述します。
|
1 2 3 4 5 6 7 8 9 10 11 |
//for Spacegray "theme": "Spacegray.sublime-theme", "color_scheme": "Packages/Theme - Spacegray/base16-ocean.dark.tmTheme", //for Spacegray Light "theme": "Spacegray Light.sublime-theme", "color_scheme": "Packages/Theme - Spacegray/base16-ocean.light.tmTheme", //for Spacegray Eighties "theme": "Spacegray Eighties.sublime-theme", "color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme", |
Flatland -シンプルでフラットなデザイン
Sublime Text 2/3対応のテーマ。
ブルーをアクセントカラーにしたシンプルでフラットなデザインです。オプションでMonokaiに対応してます。
Flatland
Flatland -GitHub
Flatlandのインストール
- Sublime Textを起動。
- 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
- ボックスに「install package」を入力して「Enter」キー。
- インストールするパッケージを指定するボックスが開きます。
- ボックスに「Theme - Flatland」を入力して「Enter」キー。
- 下部のステータスバーにインストールの状況が表示されます。
Flatlandのセッティング
「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記を記述します。
|
1 2 |
"theme": "Flatland Dark.sublime-theme", "color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme", |
下記の項目がカスタマイズできます。
|
1 2 3 |
"flatland_square_tabs": true, "color_scheme": "Packages/Theme - Flatland/Flatland Monokai.tmTheme", "flatland_sidebar_tree_xsmall" : true, |
Inspired GitHub Color Scheme -GitHubのシンタックスカラー
Sublime Text 3対応のカラースキーム。
このシンタックスカラーに見慣れている人も多いのではないでしょうか。HTML, CSS, Sass/SCSS, JavaScript, PHP, RubyなどをGitHubのシンタックスカラーで表示します。
Inspired GitHub Color Scheme
Inspired GitHub Color Scheme -GitHub
Inspired GitHub Color Schemeのインストール
- Sublime Textを起動。
- 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
- ボックスに「install package」を入力して「Enter」キー。
- インストールするパッケージを指定するボックスが開きます。
- ボックスに「Inspired GitHub Color Scheme」を入力して「Enter」キー。
- 下部のステータスバーにインストールの状況が表示されます。
Inspired GitHub Color Schemeのセッティング
「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記を記述します。
|
1 |
"color_scheme": "Packages/Inspired GitHub Color Scheme/InspiredGitHub.tmTheme", |
sponsors
