[Boxy] SublimeText3 2016年 俺的一押し おすすめ テーマの紹介・設定をさらす

16317 ワード
SublimeText SublimeText3 theme SublimeText テキストリンク

対象

  • SublimetText3を常用している方
  • テーマデザインの細かい調整をしたい方（細かい方こだわりがある方
  • 気分によってサクッと見た目を変えたい方
  • jsonファイルでの設定に嫌気がさしている方
  • 簡単に細かい見た目の調整をしたい方

また前提として、Package Controlのインストールは済んでいるものとします。

Boxy Theme

Githubより以下、引用

The most hackable theme for Sublime Text 3

The most hackableと...この言葉どおりのテーマだと思います。
2016/3にPacakage Controlに公開され、現在までGithubも活発に動いています。
また、動画による説明やGithubのwikiがとても充実しているのが素敵です。
ですが、wikiを読まなくても、各種設定を直観的に可能なのが、Boxy Themeの凄いところ。

インストール

  1. Ctrl+Shit+pで「Package Controll: Install Package」を選択
  2. 「Boxy Theme」を入力し、インストール
  3. SublimeText再起動
  4. Ctrl+Shit+pで「Package Control: Satisfy Dependencies」を選択
  5. SublimeText再起動

Boxy Theme:Activation

Boxy Theme:Activationでテーマの大枠を決定します。
普通のテーマであれば、ここでPreferences.sublime-settingsを編集しますが、ここからがBoxyの良い所

  1. Ctrl+Shit+pで「Boxy Theme:Activation」を選択
  2. カーソルに合わせてテーマが切り替わるので気に入ったものでEnter

設定ファイルをカリカリいじらなくていいので楽!!!

デモ

基本テーマ一覧

Boxy Yesterday

Boxy Tomorrow

僕は現在このテーマをベースに使ってます。色がどぎつくなくて見やすいです。

Boxy Ocean

Boxy Monokai

Boxy Theme:Presets

Activationで行った設定は主に背景色、文字色などのカラースキーマの変更です。
Boxy Theme:Presetsでは、タブやサイドメニュー、検索ウィンドウなどの見た目の大枠を変更できます。

デモ

プリセット一覧

  • Default
  • Atom
  • Predown
  • Material
  • Code

それぞれ、有名なエディターやサブSublimeのテーマを基にしたPresetですね。
Activation×Presetsでお気に入りの見た目を選びましょう！！

Boxy Theme:Configuration

Activation・Presetsまで決めても、また細かい点が気になる細かいこだわりがあるからはいませんか？
(Ex：タブが大きい、サイドバーのインデントが深い、ある場所の文字だけ大きくしたい etc...
このような細かい設定も、Boxy Theme:Configurationで設定ファイルをいじらずに画面上で調整が可能です。

デモ

タブのサイズ、サイドバーのインデントなどを調整しています。

Activation×Presets×Theme:Configurationで自分のお気に入りテーマに調整しましょう！！

推奨設定

公式ページからPreferences.sublime-settingsの推奨設定も乗っています。
コピペで貼り付けちゃいましょう。

{
    "always_show_minimap_viewport": true,
    "bold_folder_labels": true,
    "caret_extra_bottom": 1,
    "caret_extra_top": 1,
    "caret_extra_width": 1,
    "caret_style": "blink",
    "fade_fold_buttons": false,
    "indent_guide_options": ["draw_normal", "draw_active"],
    "line_padding_bottom": 2,
    "line_padding_top": 2,
    "overlay_scroll_bars": "enabled",
    "show_encoding": true,
    "show_line_endings": true
}

僕の設定例

Configurationなどでいじった内容はPreferences.sublime-settingsに反映されるので、 まわりに良さげな設定がいたらコピペでもらっちゃいましょう。
例として僕のをさらします。（Boxy関係ないのもちょこちょこありますが

{
    "always_show_minimap_viewport": true,
    "bold_folder_labels": true,
    "caret_extra_bottom": 1,
    "caret_extra_top": 1,
    "caret_extra_width": 1,
    "caret_style": "blink",
    "color_scheme": "Packages/Boxy Theme/schemes/Boxy Tomorrow.tmTheme",
    "default_encoding": "UTF-8",
    "default_line_ending": "unix",
    "draw_white_space": "all",
    "fade_fold_buttons": false,
    "fallback_encoding": "UTF-8",
    "font_face": "Myrica M",
    "font_size": 9,
    "hot_exit": false,
    "ignored_packages":
    [
        "Vintage"
    ],
    "indent_guide_options":
    [
        "draw_normal",
        "draw_active"
    ],
    "line_padding_bottom": 2,
    "line_padding_top": 2,
    "overlay_scroll_bars": "enabled",
    "remember_open_files": false,
    "show_encoding": true,
    "show_line_endings": true,
    "tab_size": 4,
    "theme": "Boxy Tomorrow.sublime-theme",
    "theme_accent_sky": true,
    "theme_autocomplete_item_selected_colored": true,
    "theme_button_rounded": true,
    "theme_find_panel_close_hidden": true,
    "theme_find_panel_materialized": true,
    "theme_grid_border_size_lg": true,
    "theme_icon_button_highlighted": true,
    "theme_icons_atomized": true,
    "theme_scrollbar_rounded": true,
    "theme_sidebar_disclosure": true,
    "theme_sidebar_highlight_selected_text_only": true,
    "theme_sidebar_indent_top_level_disabled": true,
    "theme_sidebar_indent_xl": true,
    "theme_sidebar_size_xxs": true,
    "theme_size_xs": true,
    "theme_tab_arrows_hidden": true,
    "theme_tab_selected_label_bold": true,
    "theme_tab_selected_underlined": true,
    "theme_tab_separator": true,
    "theme_tab_size_xs": true,
    "theme_tab_width_auto": true,
    "translate_tabs_to_spaces": true,
    "trim_trailing_white_space_on_save": false
}

最後に

Add-onにはファイルアイコンの追加分やLinter用のテーマも良いされています。
PackageResourceViewerを使って、カラースキーマレベルでのいじり方も公式ページで紹介されいます！
Boxy-wikiには情報がとても充実しているので、時間があれば読んでみるのをお勧めします！

エディターの見た目はコーディングのモチベーションに大きく左右しますよね。

皆さんもBoxyで素敵で快適な自分だけのSublimeTextに調整してみてはいかがでしょうか！