genonymous

GenestreamのTechブログ

ターミナルとエディタとIDEとGitHubを目に優しい色にしよう

眩しい画面と高コントラストのシンタックスハイライトは疲れる

こんばんは徳山です。最近長時間モニターを見ていて目が疲れてると感じることが多いです。特に暗いエディタから明るいブラウザに移動した時や、白が基本のGitHubでコードレビューしている時にダメージが大きい気がします。どうにかできないかなーっと対策してみました。

基本的な方針は見ている時間が長いものを目に優しい色に設定します。

目に優しい色ということでこの2点をします。

  1. 眩しくないようにベースの色を暗いものにする
  2. コントラストなのにシンタックスハイライトがわかりやすいカラースキームのSolarizedを使う

エンジニアが長時間見ているものはターミナル、エディタ、IDEGitHubあたりじゃないでしょうか。 僕の場合だと、iTerm, Vim, Android Stuido, ChromeGitHub です。

以下で実際に設定していきます。

iTerm

iterm2-colors-solarized から Solarized Dark.itermcolors を入手します。 Preferences -> Profiles -> Colors -> Load Presets... -> Import... で先ほど保存した Solarized Dark.itermcolors を読み込みます。 読み込めたらリストにSolarized Darkが追加されていると思うので選択します。

Vim

Vim pluginを使って設定するのが簡単です。 altercation/vim-colors-solarized というVim pluginがあります。インストールしたらvimrcに以下を追加しvimrcを再読み込みします。

syntax enable
set background=dark
colorscheme solarized

Android Studio

Android Studioではまずテーマを黒ベースのDarculaにします。 Preferences -> Appearance -> Theme の所で Darcula を選択します。 OKを押すと再起動するか聞かれるので再起動します。

次にエディタ部分のカラースキーマを設定します。Solarized Colorscheme for IntelliJ IDEA - GitHub から Solarized Dark.icls をダウンロードして ~/Library/Preferences/AndroidStudio/colors に配置します。 Android Studioを再起動すると Preferences -> Editor -> Colors & Fonts の Scheme name に Solarized Dark が追加されているので選択しOKを押すと設定完了です。

f:id:genestream:20150304175259p:plain

ChromeGitHub

サイトごとにカスタムスタイルシートを適応できるChrome拡張のStylishを使います。 Stylish - Chrome Web Store からインストールできます。

StylishをインストールしたらGitHub用にスタイルシートを設定します。 GitHub Dark - userstyles.orgSyntax highlight theme を Solarized Darkにします。
他の項目も好みのものに変更し Update with Stylish を押すと設定完了です。GitHubのページをリロードするとスタイルシートが適応されています。

f:id:genestream:20150304174736p:plain

他のツール向けのもある

以上です。EmacsXcodeなど他のメジャーなツール向けは一通り用意されているのでぜひ設定してみてください。