VSCode のテーマを Monokai Pro から GitHub Theme に変更したことを報告する。
「VSCode のテーマなにがいいだろ…」だったり「ソースコードが見ずらいような気がする…」など配色テーマに満足していないなら、このエントリーが一助となるかもしれない。
もくじ
はじめに
そもそも VSCode のテーマである Monokai Pro に不満はない。むしろ使い続けたいほどだ。なのに、なぜ長らく採用していた Monokai Pro を変更しようと思い至ったのかについて、まずは話しておこう。
Monokai Pro とは
Monokai Pro は、従来からの Monokai 配色を VSCode 用に再設計したカラースキームで、ソースコードの配色はもちろんのこと外観テーマやアイコンセットまで及ぶ妥協のない配色テーマになっている。
また Monokai 配色の生みの親（Wimer Hazenberg 氏）によるオリジナル製で “Monokai” を冠したカラースキームにおける本家本元として人気を博している。さまざまなコードエディタで Monokai の配色テーマを含まないものはないほどだ。
そもそも、Monokai の火付け役となったのが、Sublime Text （コードエディタ）にデフォルトテーマとして実装されたことから始まる。それまでのエディタと比べても、明らかなモダンぶりに魅了されたエンジニアは少なくないと思う。
わたし自身、Sublime Text 以降のエディタ遍歴のいずれにおいても Monokai 配色を頑なに採用してきた。
配色テーマを変更した動機
さて、そんな長い付き合いの Monokai を変更しようとした事由としては、OS側の外観モードとミスマッチではないかと感じたことに端を発する。
Mac、Windows に関わらずライトモードを採用していて、モニターの中の景色は白を基調として総じて明るい。そんななかコードエディタだけダーク風味であることに「あれっ？」となったわけだ。いまさら感の強い話ではあるけれど、気になってしまったらどうしようもない。
最近、目が霞むのも、こういった影響が有るのだろうか？ と調べてみると、
背景が暗いと、白字のテキストは光ってぼけることがありますし、黒を背景にした白字のテキストはコントラストが強すぎて、むしろ読みにくくなります。
また、ダークモードにしていると瞳孔が開くので、目は薄暗いところにいるときと同じ状態になります。
https://www.lifehacker.jp/2019/05/the-case-against-dark-mode.html
という具合の後押しする記事が見つかり、自己補強する形で配色テーマの変更に踏み切った次第だ。
候補にしたテーマ
ライトモードを有する配色テーマをひと通り眺めて、候補にするテーマを選出したのが以下の一覧だ。
選考基準としては、自然体であることとした。ソースコードを識別しやすい配色であることは言うまでもないが、主張激しく不自然であっては、かえって疲れる。
HTML ならば、タブと属性、値が一瞥で分かること、
CSS ならば、セレクタ名とプロパティ名、値が一瞥で分かること、
JavaScript ならば、キーワード名や構文、代入値が一瞥で分かること、
が望ましいけれど、コントラストの主張が激しすぎないものにしたい。
GitHub Theme
GitHub 謹製の配色テーマだ。GitHub Light Default を選べば、日頃から目にする馴染みある配色が用意されている。
https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme
Night Owl
夜更かしする人に向けた配色テーマだ。深夜にコーディングするのが好きな私たちのために設計されているとのこと。色覚異常に配慮しているところも評価できるポイントだろう。
https://marketplace.visualstudio.com/items?itemName=sdras.night-owl
Eva Theme
サイバー空間をイメージできる配色テーマだ。ネオンカラー風だけれど、コントラストは抑えられている。
https://marketplace.visualstudio.com/items?itemName=fisheva.eva-theme
Tokyo Night
東京の夜景をイメージした配色テーマだ。われわれ日本人による東京のイメージに反して落ち着きのあるクールな配色だと思う。
https://marketplace.visualstudio.com/items?itemName=enkia.tokyo-night
Slack Theme
Slack をイメージした配色テーマだ。外観を Slack の配色そのまんまに見せることができる。
https://marketplace.visualstudio.com/items?itemName=felipe-mendes.slack-theme
配色テーマの最終選考
最終的に GitHub Theme と Slack Theme に絞られた。理由は単純で、GitHub, Slack ともに日頃使い慣れたツールだからだ。やはり、いつも使っているツールの配色に、違和感を覚えないことが大きい。
Slack は、社内コミュニケーションツールとして用いていて、ツール外観も含めて Slack に似せることができる。外観を似せるアプローチは、レイアウトが近い Slack ならではだろう。
GitHub は、バージョン管理プラットフォームとして用いつつ、オープンソースのコードファイルを閲覧している。ソースコードの配色としては、もっとも目にしていて、違和感を覚えない。
さて、どうしたものか決め難いところだが、外観を似せること自体有益なのかといえば、必ずしもそうとは限らない。そこに誤認識が起こってはならないからだ。ともすれば GitHub Theme は、ライトモードにおいて、これ以上ない自然体を提供してくれるのではないだろうか。
そんなこんなで VSCode の配色テーマは、GitHub Theme の Light Default を採用することにした。
まとめ
以上、VSCode の配色テーマを変更した話だった。
どの配色テーマも、それぞれのコンセプトを持っていてユニークであることが感じられた。記事内にキャプチャ画像から雰囲気は得られると思うけれど、選択の材料にしないでほしい。できれば、ぜひ実際に VSCode へインストールして目視されることをおすすめする。
このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
