コードがはっきりと見やすくて、使いやすい Sublime Text 3 のテーマのまとめ

Web制作時などのコーディングの作業が捗る、コードがはっきりと見やすくて、使いやすい Sublime Text 3 のテーマを紹介します。

ダーク系をはじめ、ライト系、クリーム系、GitHubカラーもあります。

Sublime Text 3のテーマのキャプチャ

ayu -最近注目されてるニューテーマ

Sublime Text 2/3対応のテーマ。
ダークとライトの2種類のテーマがあり、タブやファイルツリーが小さめにデザインされています。

ayuのキャプチャ

ayu: Dark

ayuのキャプチャ

ayu: Light

ayu -GitHub

ayuのインストール

  1. Sublime Textを起動。
  2. 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
  3. ボックスに「install package」を入力して「Enter」キー。
  4. インストールするパッケージを指定するボックスが開きます。
  5. ボックスに「ayu」を入力して「Enter」キー。
  6. 下部のステータスバーにインストールの状況が表示されます。

ayuのセッティング

「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記を記述します。

タブの区切り線やUIの文字を小さくするには、下記を記述します。

DuoTone -美しくて見やすいテーマ

Sublime Text 3をはじめ、AtomとVimにも対応のカラースキーム。
DuoToneは2つの色相をベースに色調を変化させた7つのカラーで構成されています。
コードで重要な部分には強調したカラー、それほど重要ではない部分には和らいだカラーが適用され、はっきりとした見やすいテーマになっています。

DuoToneのキャプチャ

DuoTone: Dark

DuoToneのキャプチャ

DuoTone: 左上からSea, Space, Earth, Forest

DuoTone -GitHub

DuoToneのインストール

  1. Sublime Textを起動。
  2. 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
  3. ボックスに「install package」を入力して「Enter」キー。
  4. インストールするパッケージを指定するボックスが開きます。
  5. ボックスに「DuoTone」を入力して「Enter」キー。
  6. 下部のステータスバーにインストールの状況が表示されます。

DuoToneのセッティング

「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記の中からお好みのカラーを一つ記述します。

El Capitan -OS Xにはこれ!

Sublime Text 3対応のテーマ。
OS X Yosemiteにインスパイアされた明るいカラーをベースにしたデザインが美しいです。

El Capitanのキャプチャ

El Capitan

El Capitan -GitHub

El Capitanのインストール

  1. Sublime Textを起動。
  2. 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
  3. ボックスに「install package」を入力して「Enter」キー。
  4. インストールするパッケージを指定するボックスが開きます。
  5. ボックスに「Theme - El Capitan」を入力して「Enter」キー。
  6. 下部のステータスバーにインストールの状況が表示されます。

El Capitanのセッティング

「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記を記述します。

フォントがインストール済みであればSan FranciscoやHelveticaを使うことで、El Capitanをより堪能できます。使用するフォントを「false」から「true」に変更します。

Material -Material Designがかっこいい

Sublime Text 3対応のテーマ。
Material Designにインスパイアされたフラットなデザインが美しいテーマ。カラーはNormalとDarker、Lighterが揃っています。

Materialのキャプチャ

Material

Material -GitHub

Materialのインストール

  1. Sublime Textを起動。
  2. 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
  3. ボックスに「install package」を入力して「Enter」キー。
  4. インストールするパッケージを指定するボックスが開きます。
  5. ボックスに「Material Theme」を入力して「Enter」キー。
  6. 下部のステータスバーにインストールの状況が表示されます。

Materialのセッティング

「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記を記述します。

カラーを変更する時は、下記の中からお好みのカラーを一つ記述します。

Tech49 -ダーク系の定番

Sublime Text 2/3対応のテーマ。
ダーク系のテーマが使いやすい人にはこれがオススメ。使いやすいようにUIがカスタマイズされたOblivion FUIベースのデザインがかっこいいです。

Tech49のキャプチャ

Tech49

Tech49 -GitHub

Tech49のインストール

  1. Sublime Textを起動。
  2. 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
  3. ボックスに「install package」を入力して「Enter」キー。
  4. インストールするパッケージを指定するボックスが開きます。
  5. ボックスに「Theme - Tech 49”」を入力して「Enter」キー。
  6. 下部のステータスバーにインストールの状況が表示されます。

Tech49のセッティング

「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記を記述します。

Predawn -マットなブラックが目に馴染む

Sublime Text 2/3, Atom対応のテーマ。
ダークはダークでも、マットなブラックが目に馴染み、コードだとアイスブルーが多くなるので、非常に見やすいです。

Predawnのキャプチャ

Predawn

Predawn -GitHub

Predawnのインストール

  1. Sublime Textを起動。
  2. 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
  3. ボックスに「install package」を入力して「Enter」キー。
  4. インストールするパッケージを指定するボックスが開きます。
  5. ボックスに「Predawn」を入力して「Enter」キー。
  6. 下部のステータスバーにインストールの状況が表示されます。

Predawnのセッティング

「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記を記述します。

パネル・サイドバー・タブは、下記の項目がカスタマイズできます。

Soda SolarizedDark -ブルーがかった明るいダーク系

Sublime Text 2/3対応のテーマ。
ブルーがかかったちょっと明るいダーク系のデザイン。長い間、人気があるテーマです。

Soda SolarizedDarkのキャプチャ

Soda SolarizedDark

Soda SolarizedDark -GitHub

Soda SolarizedDarkのインストール

  1. Sublime Textを起動。
  2. 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
  3. ボックスに「install package」を入力して「Enter」キー。
  4. インストールするパッケージを指定するボックスが開きます。
  5. ボックスに「Theme - Soda SolarizedDark」を入力して「Enter」キー。
  6. 下部のステータスバーにインストールの状況が表示されます。

Soda SolarizedDarkのセッティング

「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記を記述します。

Solarized Space -クリーム系が好きな人に

Sublime Text 2/3対応のテーマ。
ライト系・ダーク系が揃ったSodarizedをベースにしたテーマです。Dark, Predawnもありますが、クリーム系のBrickがオススメです。

Solarized Spaceのキャプチャ

Solarized Space Brick

Solarized Space -GitHub

Solarized Spaceのインストール

  1. Sublime Textを起動。
  2. 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
  3. ボックスに「install package」を入力して「Enter」キー。
  4. インストールするパッケージを指定するボックスが開きます。
  5. ボックスに「Solarized Space」を入力して「Enter」キー。
  6. 下部のステータスバーにインストールの状況が表示されます。

Solarized Spaceのセッティング

「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記のいずれかを記述します。

下記の項目がカスタマイズできます。

Spacegray -Oceanのダーク系とライト系が爽やか

Sublime Text 2/3対応のテーマ。
定番テーマの一つと言ってよいでしょう。少し青みがかったOcean Dark, Ocean Light、マットなブラックのEightiesが揃っています。

Spacegrayのキャプチャ

Spacegray Ocean Light

Spacegray -GitHub

Spacegrayのインストール

  1. Sublime Textを起動。
  2. 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
  3. ボックスに「install package」を入力して「Enter」キー。
  4. インストールするパッケージを指定するボックスが開きます。
  5. ボックスに「Theme - Spacegray」を入力して「Enter」キー。
  6. 下部のステータスバーにインストールの状況が表示されます。

Spacegrayのセッティング

「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記を記述します。

Flatland -シンプルでフラットなデザイン

Sublime Text 2/3対応のテーマ。
ブルーをアクセントカラーにしたシンプルでフラットなデザインです。オプションでMonokaiに対応してます。

Flatlandのキャプチャ

Flatland

Flatland -GitHub

Flatlandのインストール

  1. Sublime Textを起動。
  2. 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
  3. ボックスに「install package」を入力して「Enter」キー。
  4. インストールするパッケージを指定するボックスが開きます。
  5. ボックスに「Theme - Flatland」を入力して「Enter」キー。
  6. 下部のステータスバーにインストールの状況が表示されます。

Flatlandのセッティング

「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記を記述します。

下記の項目がカスタマイズできます。

Inspired Git​Hub Color Scheme -GitHubのシンタックスカラー

Sublime Text 3対応のカラースキーム。
このシンタックスカラーに見慣れている人も多いのではないでしょうか。HTML, CSS, Sass/SCSS, JavaScript, PHP, RubyなどをGitHubのシンタックスカラーで表示します。

Inspired Git​Hub Color Schemeのキャプチャ

Inspired Git​Hub Color Scheme

Inspired Git​Hub Color Scheme -GitHub

Inspired Git​Hub Color Schemeのインストール

  1. Sublime Textを起動。
  2. 「cmd/ctrl + shift + p」キーでコマンドパレットを開きます。
  3. ボックスに「install package」を入力して「Enter」キー。
  4. インストールするパッケージを指定するボックスが開きます。
  5. ボックスに「Inspired Git​Hub Color Scheme」を入力して「Enter」キー。
  6. 下部のステータスバーにインストールの状況が表示されます。

Inspired Git​Hub Color Schemeのセッティング

「Preferences > Settings」を選択し、「Preferences.sublime-settins ——User」を開き、下記を記述します。

top of page

©2017 coliss