ライトテーマのすすめ OS設定に合わせてカラースキームを切り替える
仕事環境に応じてカラースキームを変えてみて良かったという話をします。
「エディターのカラースキームは昔から変えていない」「ダークテーマ一択！」という方に是非見てもらいたい記事です！
概要
macOS の外観モード（ライト / ダーク）の設定に応じて各種開発ツールのカラースキームを変更する方法をまとめました。
VSCode / IntelliJ に関しては Windows / Linux(GNOME) でも使えるかも知れません。
ページ内リンク
経緯
私事ですが、最近 PC の画面を集中して見続けることができず少し悩まされていました。
画面を見ているとすぐに疲れてきて、目薬をさしたり気分転換したりを頻繁に行っていました。
この現象が起こるのは昼間だけで、夜になるにつれて開発に集中できるようになります。
私は夜行性タイプではありますが、前職では 9 時起きの 10 時出社で問題なく開発スタートを切れていたため、体質については一旦考えないことにしました。
そこで現職の株式会社アルファドライブに転職してからのフルリモート勤務による物理的な仕事環境の変化を疑いました。
今の仕事部屋は東と南から日光を取り入れることができるため、日当たりが良いです。
日差しに負けないように部屋の照明の明るさも最大にしています。
ここでディスプレイの明るさが部屋の明るさに対して負けていることに気づきました。[1]
おまけに私はダークモードを強く好み、白い背景は目に毒とばかりに普段使うアプリケーションは全て黒背景で統一していました。[2]
ディスプレイの明るさが弱い状態でダークモードを使用していることで画面が暗くなり、返って目を酷使してしまっている状況であると考えました。
そこでダークモードへの固執をやめ、ライトモードを使って明るい画面にしてみることにしました。
まだ実践してみて数日ほどで環境変化による一時的な効果の可能性も捨て切れませんが、今のところ良い影響があります。
ダークモードと比べて昼でも集中できるようになりました。
とはいえ夜になり部屋の明るさが下がってきた時にライトモードの明るい背景は目に刺激的です。
macOS には日の出・日の入りに応じて OS のダークモード・ライトモードの設定を自動的に変更する機能がありますので、これに応じてエディタや開発ツールのカラースキームも変更されるようにしました。
OS に合わせてダークモード・ライトモードを切り替える設定はデフォルトでは有効になっていないことが多いです。
自分の使用している主要な開発ツールでの設定方法を調べたので他の方にも設定してみて欲しくまとめました。
使用しているカラースキーム：Solarized
私は以下の理由から Solarized をメインのカラースキームとして使用しています。
- 配色が目に優しい
- 有名なカラースキームであり、どのエディターでもプリインストールされているか、拡張機能として公開されている（
[エディタ名] solarizedでググってみてください）
→ ターミナルと Vim などで背景色を揃えることができる
明るい背景の Solarized Light と暗い背景の Solarized Dark が用意されています。
初めは Solarized Dark の青い背景が少しキツく感じるかも知れませんが、すぐに慣れると思います。
Light の方は今まで興味ありませんでしたが、こちらも目に優しい配色となっているため今回使用しています。
OS の外観設定に合わせてカラースキームを切り替える
いよいよ macOS の設定に合わせてカラースキームを切り替える方法を記載します。
だいたいは公式の設定で対応できます。
iTerm2
本記事記載時点の iTerm2 3.4.14 (OS 10.14+) では機能として存在しませんでした。
Beta 版の iTerm2 3.5.0beta3 (OS 10.14+) では設定に "Use different colors for light mode and dark mode" という項目が追加されており、こちらで切り替えることができます。
iTerm2 のベータ版はこちらからダウンロードできます。
VSCode(Visual Studio Code)
設定ファイル ~/Library/Application Support/Code/User/settings.json に以下のように記述します。
{
"window.autoDetectColorScheme": true,
"workbench.preferredDarkColorTheme": "Solarized Custom Dark Italic",
"workbench.preferredLightColorTheme": "Solarized Custom Light Italic"
}
テーマ名はお好みのものに変更してください。
私が使っているものはこちら
IntelliJ IDEA
設定画面に Sync with OS という項目がありました。
Vim/NeoVim
こちらのみ拡張機能での対応になります。
vim-auto-color-switcher というプラグインがありましたのでこちらを使わせていただきました。
ダークモードの切り替えに応じて set background=dark set background=light を実行してくれます。
オプションでカラースキームの切り替えコマンドを実行させることもできるようです。
↓ 紹介記事
ただ、内部で使われている API が NeoVim と互換性がないようで少し調整を行う必要がありました。
こちらに関してまた PR を出したいと考えています。
追記：PR がマージされて NeoVim でも動作するようになりました 🎉
また、 vim での Solarized プラグインは vim-solarized8 がオススメです。
set background が light か dark かでテーマの切り替えを行ってくれるので、先程のプラグインとの相性も良いです。
最後に
各種開発ツールで OS の設定に合わせてカラースキームの切り替えを行う方法を紹介しました。
エディターのカラースキームは今回のように眼精疲労に影響したりすることもありますし、好みのカラースキームだとコーディングの調子が上がって生産性の向上にも幾分か効果が見られると思います。
年末休暇も近づいていますし、皆さんもこの機会にパフォーマンスの出せるテーマ・カラースキームの設定を考えてみてください！
Discussion