Sublime Text 3のカラースキームの変更と作成

Sublime Text 3のカラースキームの変更と作成をしてみます。
installした状態では、デフォルトのカラースキームになっているかと思います。

![スクリーンショット 2016-11-15 17.07.48.png](https://qiita-image-store.s3.amazonaws.com/0/145420/25df9105-fbe6-02f6-204e-781c9cebc0a5.png)

## カラースキームの変更
カラースキームを変更する際にはSublime Textを開いている状態でメニュー部分から下記のように選択出来ます。
`Sublime Text -> Preferences -> Color Scheme -> Color Scheme - Default -> 好きなカラースキームを選択`

もしくは
`Sublime Text -> Preferences -> Settings - User`で`Preferences.sublime-settings`を開き下記を記述する事で変更出来ます。
`"color_scheme": "Packages/カラースキームのファイル"`

![スクリーンショット 2016-11-15 17.19.53.png](https://qiita-image-store.s3.amazonaws.com/0/145420/5a813af4-800e-60c0-6fc9-9035dcd0d9c4.png)

## カラースキームの自作
### カラースキーム用ファイルの設置場所
Packages以下に`.tmTheme`ファイルを置くことで変更出来ます。
`/Users/ユーザー名/Library/Application Support/Sublime Text 3/Packages`

`Sublime Text -> Preferences -> Browse Packages`を選択する事でもPackagesディレクトリを開くことが出来ます。

`.tmTheme`ファイルは新しくディレクトリを作成しても、そのまま置いてもメニューなどに表示されます。

```
Packages/sample.tmTheme
Packages/sampleTheme/sample.tmTheme
```
![スクリーンショット 2016-11-15 17.43.10.png](https://qiita-image-store.s3.amazonaws.com/0/145420/139893ad-7fdc-3f92-e342-749ad0f2c3df.png)


### カラースキーム用ファイル記述方法
詳しくは下記のサイトが参考になります。
[Sublime Text Unofficial Documentation](http://docs.sublimetext.info/en/latest/reference/color_schemes.html)
[Scope Naming – Sublime Text 3 Documentation](https://www.sublimetext.com/docs/3/scope_naming.html)

基本的には`<array>`以下に設定を記述していきます。
`uuid`とキーのセットは無くても動きます。

```
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>name</key>
  <string>名前</string>
  <key>settings</key>
  <array>
  </array>
  <key>uuid</key>
  <string>キー</string>
</dict>
</plist>
```

#### settings部分の指定場所と主な設定項目
##### 指定場所
`<array>`以下に設定項目と値を記述していきます。
色の設定はredやblueなどの形でも設定出来ます。

```
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>name</key>
  <string>名前</string>
  <key>settings</key>
  <array>
    <dict>
      <key>settings</key>
      <dict>
         <key>設定項目</key>
         <string>値</string>
      </dict>
    </dict>
  </array>
  <key>uuid</key>
  <string>キー</string>
</dict>
</plist>
```

##### foreground  
文字やスペース タブなどを押した際の色

##### background  
背景の色

![スクリーンショット 2016-11-15 18.05.36.png](https://qiita-image-store.s3.amazonaws.com/0/145420/173ebd6a-62c1-b17e-424f-6ff692e6886e.png)

##### caret
キャレットの色

##### bracketContentsForeground
括弧内部にキャレットがある時に括弧下線の色

##### bracketContentsOptions
括弧内部にキャレットがある時に括弧下線の種類

```
<key>bracketContentsForeground</key>
<string>#4d5aaf</string>
<key>bracketContentsOptions</key>
<string>stippled_underline</string>
```

![スクリーンショット 2016-11-16 11.29.20.png](https://qiita-image-store.s3.amazonaws.com/0/145420/83dd6960-5029-24e4-4b7a-e12c3a54e449.png)

##### bracketsForeground
括弧の隣にキャレットがある時の括弧下線の色

```
<key>bracketsForeground</key>
<string>red</string>
```

![スクリーンショット 2016-11-16 11.19.22.png](https://qiita-image-store.s3.amazonaws.com/0/145420/db434665-91ff-2962-da8d-7f1c3e898f65.png)

##### tagsForeground
タグの下線の色

##### tagsOptions
タグの下線の種類

```
<key>tagsForeground</key>
<string>#ea5506</string>
<key>tagsOptions</key>
<string>stippled_underline</string>
```

![スクリーンショット 2016-11-16 11.36.23.png](https://qiita-image-store.s3.amazonaws.com/0/145420/fc067f14-7139-cd68-211d-808d9ade33f6.png)

##### findHighlight
find時の背景の色

##### findHighlightForeground
find時の文字の色

##### inactiveSelection
find時に途中までしか見つからなかった場合の文字の背景の色

`aaで検索 -> aまでしか見つからない`

![スクリーンショット 2016-11-16 11.58.01.png](https://qiita-image-store.s3.amazonaws.com/0/145420/8e716bdb-a024-32a6-5471-077fade9737a.png)

##### gutter
ガター背景の色

##### gutterForeground
ガター文字の色

![スクリーンショット 2016-11-16 11.45.19.png](https://qiita-image-store.s3.amazonaws.com/0/145420/a3059791-76a7-614c-c59b-4b2db4cce54a.png)

##### selection
選択領域の背景の色

##### selectionForeground
選択領域の文字の色

##### selectionBorder
選択領域のボーダーの色

```
<key>selection</key>
<string>#ea5506</string>
<key>selectionForeground</key>
<string>#4d5aaf</string>
<key>selectionBorder</key>
<string>#ffff00</string>
```

![スクリーンショット 2016-11-16 11.52.45.png](https://qiita-image-store.s3.amazonaws.com/0/145420/be8fb713-b4ab-3b70-b31a-8e0c8eebd5da.png)

##### guide
ネストの際の縦線の色

![スクリーンショット 2016-11-16 13.03.53.png](https://qiita-image-store.s3.amazonaws.com/0/145420/472115a2-5d45-ca25-927c-db2706648cc0.png)

##### shadow
`Preferences.sublime-settings`に`"word_wrap": false`を設定した上でSublime Text幅よりもテキスト幅が長い場合に表示される影の色

##### shadowWidth
上記と同じ影の幅
33以上にすると影が表示されない場合があります。

![スクリーンショット 2016-11-16 13.25.07.png](https://qiita-image-store.s3.amazonaws.com/0/145420/3956a7d3-4af6-21db-b996-260940ccdaec.png)

#### scope部分の指定場所と主な設定項目 scope名
##### 指定場所
settingsとは別にscope用の`<dict>`以下に記述します。

```
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <key>name</key>
  <string>名前</string>
  <key>settings</key>
  <array>
    <dict>
      <key>settings</key>
      <dict>
         <key>設定項目1</key>
         <string>値1</string>
         <key>設定項目2</key>
         <string>値2</string>
      </dict>
    </dict>

    <dict>
      <key>name</key>
      <string>名前</string>
      <key>scope</key>
      <string>scope名(comment tagなど...)</string>
      <key>settings</key>
      <dict>
         <key>scope設定項目1</key>
         <string>scope値1</string>
         <key>scope設定項目2</key>
         <string>scope値2</string>
      </dict>
    </dict>
  </array>
  <key>uuid</key>
  <string>キー</string>
</dict>
</plist>
```

##### foreground
指定したscopeの文字の色

##### fontStyle
指定したscopeの文字の種類

##### background
指定したscopeの背景の色

```
<dict>
  <key>name</key>
  <string>Sample</string>
  <key>scope</key>
  <string>comment</string>
  <key>settings</key>
  <dict>
    <key>foreground</key>
    <string>#e8d3c7</string>
    <key>fontStyle</key>
    <string>bold</string>
    <key>background</key>
    <string>#6e7955</string>
  </dict>
</dict>
```

![スクリーンショット 2016-11-16 13.46.37.png](https://qiita-image-store.s3.amazonaws.com/0/145420/81da721a-4f63-fd6d-3e09-870e5838de30.png)

##### scope名
指定出来るscope名の詳細は下記に記載されております。
[Scope Naming – Sublime Text 3 Documentation](https://www.sublimetext.com/docs/3/scope_naming.html)

#### 注意点
`.tmTheme`ファイルを編集する際に下記の様に記述して適用させるとエラーでSublime Textが開けなくなります。

```
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
</dict>
</plist>
```

![スクリーンショット 2016-11-16 13.52.02.png](https://qiita-image-store.s3.amazonaws.com/0/145420/85c50dfa-00ab-dd69-eb9e-a6810d20c1c5.png)

![スクリーンショット 2016-11-16 13.52.12.png](https://qiita-image-store.s3.amazonaws.com/0/145420/412742ee-c894-294d-748b-f156b8d434ea.png)

その場合はメニューなどからカラースキームを変更した後にSublime Textを再起動すると起動出来るようになります。