Visual Studioでエディタやウィンドウなどの配色を変更するには？：.NET TIPS

連載目次

　Visual Studioは、エディタの色などをきめ細かく設定できる。さらに、その設定をエクスポート／インポートできる。本稿ではそれらの方法を紹介する。特定の方法をすぐに知りたいという方は以下のリンクを活用してほしい。

　なお、本稿に掲載した画像は、Visual Studio 2017 Community Editionのものである。

エディタの文字色／背景色を変更するには？

　テキストエディタやXAMLデザイナー、あるいはビルド中の出力ウィンドウやデバッグ中のイミディエイトウィンドウなどの各種ペインは、その中に表示する文字の前景色／背景色を設定できる。

　変更するには、メニューバーで［ツール］−［オプション］を選択して［オプション］ダイアログを出し、その左側のツリーを展開して［環境］−［フォントおよび色］を選んで行う（次の画像）。

［オプション］ダイアログの［フォントおよび色］
ここではテキストエディタのコメント行の色を変えようとしている。この［前景色］／［背景色］／［太字］を変更した結果は、次の画像に示す。

　この画面の右側で、［設定の表示］ドロップダウンから変更したいペインを選び、中央下部の［表示項目］リストで変更したい項目を選んで、右の［前景色］／［背景色］ドロップダウンで色を選ぶ。そのドロップダウンに表示されない色を使いたいときは、右にある［カスタム］ボタンで自由な色を指定することもできる。

　ここでは文字色の他に、フォントの種類／サイズ／文字の線の太さも選択できる。

　例として、コメント行の背景を濃いオレンジ色に、その文字を白色の太字に変更したソースコードエディタを次の画像に示す。

コメント行の背景をオレンジ色にしたエディタ

　上の画像では緑色（既定値）のコメントが残っている（27行目）。ここは普通のコメント行ではなくてXMLコメントなので、［表示項目］リストで［XML ドキュメント コメント］／［XML ドキュメント コメント - エンティティ参照］／［XML ドキュメント コメント - テキスト］の3項目の色を設定しないと変わらない。また、コメント行でもハイパーリンクの文字が青色のままだが、それは［表示項目］リストで［URL ハイパーリンク］を選んで設定する。このように設定する箇所がとても細かく分類されているので、思い通りに設定するにはちょっと根気が必要かもしれない。

ウィンドウの配色テーマを切り替えるには？

　最近のVisual Studioは既定で3種類の配色テーマを持っていて、切り替えられる（テーマを作ったり追加したりする方法は後述）。

　切り替えるには、メニューバーで［ツール］−［オプション］を選択して［オプション］ダイアログを出し、その左側のツリーを展開して［環境］−［全般］を選び、右側の［配色テーマ］ドロップダウンで選択する（次の画像）。

［オプション］ダイアログの［環境］−［全般］
配色テーマは、既定では［青］（Blue）／［淡色］（Light）／［濃色］（Dark）の3種類（かっこ内は英語版での表記）。

　3種類の配色テーマに切り替えたVisual Studioを次の画像に示す。

Visual Studioの3種類の配色テーマ
上から順に、ペインの枠に濃い青色をあしらった［青］テーマ、白を基調とした［淡色］テーマ、そして黒を基調とする［濃色］テーマである。

色設定をエクスポート／インポートするには？

　Visual Studioのさまざまな設定内容は、ファイルに書き出せる。色の設定だけをエクスポートするには、次のようにする。

　まず、メニューバーで［ツール］−［設定のインポートとエクスポート］を選択して［設定のインポートとエクスポート ウィザード］ダイアログを出し、［選択された環境設定をエクスポート］ラジオボタンを選び、［次へ］ボタンをクリックする（次の画像）。

［設定のインポートとエクスポート ウィザード］ダイアログ（その1）

　次の［エクスポートする設定の選択］では、［すべての設定］−［オプション］−［環境］−［フォントおよび色］だけにチェックが付いた状態にして、次へ進める（次の画像）。最初はほとんど全ての項目にチェックが付いているのだが、ツリーの先頭にある［すべての設定］でチェックを外すと全ての項目のチェックが外れるので、それから［フォントおよび色］を探してチェックを付けると簡単だ。

［設定のインポートとエクスポート ウィザード］ダイアログ（その2）
色設定だけをエクスポートするには、［フォントおよび色］だけにチェックが付いた状態にして、次へ進める。

　最後の画面で保存するファイル名とフォルダを指定して、完了だ。エクスポートしたファイルの拡張子は「.vssettings」になる。

　なお、「.vssettings」ファイルには全ての設定が保存されているわけではない。配色テーマのIDと、そこからの差分だけが書き込まれている。そのため、後述する独自の配色テーマを使っているときは注意が必要だ。「.vssettings」ファイルをインポートするときに元と同じ配色テーマがインストールされていないと、配色テーマが適用されずに中途半端な復元になってしまうのだ。

　色設定をインポートするには、次のようにする。

　［設定のインポートとエクスポート ウィザード］ダイアログをエクスポートするときと同様に出して、今度は［選択された環境設定をインポート］ラジオボタンを選んで次へ進める。すると［現在の設定の保存］画面になる。保存せずに進めることもできるが、現在の設定をバックアップとして保存しておくのがおすすめだ。

　次の［インポートする設定コレクションの選択］画面で、［参照］ボタンを使って「.vssettings」ファイルを指定する（次の画像）。最後の［インポートする設定の選択］画面では、不要な（インポートしたくない）設定を外すこともできる。

［設定のインポートとエクスポート ウィザード］ダイアログ（その3）
「.vssettings」ファイルをインポートするには、この画面で［参照］ボタンを使う。

　インポートした設定が反映されないときには、VSを再起動してみよう。

Color Theme Editorを使って独自の配色テーマを作るには？

　ウィンドウ全体の色を変えるには配色テーマを切り替えるのだが、前述したように既定の配色テーマは3種類しかない（青／淡色／濃色）。

　配色テーマを増やすには、「Color Theme Editor」（カラーテーマエディタ）拡張機能を使う。拡張機能はCommunityエディション以上で利用できる（Expressエディションでは利用できない）。

　Color Theme Editorは、Visual Studioのバージョンごとに分かれている。それぞれをダウンロードできるWebサイトへのリンクを次に示す。

　ちなみに、Visual Studio 2017用のColor Theme Editorのソースコードが、最近になってGitHubで公開されている。

　Color Theme Editorをインストールするには、上記のWebページからダウンロードしてきた「.vsix」ファイルを実行すればよい（次の画像）。あるいは、Visual Studioのメニューバーで［ツール］−［拡張機能と更新プログラム］を選び、出てきた［拡張機能と更新プログラム］のダイアログでオンラインから「Color Theme Editor」を検索してインストールしてもよい。

Color Theme Editorをインストール
ご覧の通り、Communityエディションにもインストールできる。

　インストール後、次にVisual Studioを起動したときからColor Theme Editorが有効になる。Visual Studio 2017の場合は、メニューバーの［ツール］−［Customize Colors］を選ぶと、Color Theme Editorの画面が出てくる（次の画像）。

Color Theme Editor
12種類の配色テーマが並んでいる。既定のテーマであるBlue（青）／Dark（濃色）／Light（淡色）3種類に加えて、新しい配色テーマが9種類ある。
それぞれのタイルをクリックすると、その配色テーマが適用される。この画像はRedテーマを適用したものだ。
それぞれのタイルの右上には、マウスをホバーすると出てくる［Create Copy of Theme］アイコンがある（赤丸内）。これを使って独自の配色を作る（後述）。

　Color Theme Editorの画面に並んだ配色テーマのタイルをクリックすると、そのテーマが適用される。12種類あるので、まずはその中から自分の好みに近いスタイルを探してみてほしい。

　組み込みの配色テーマでは物足りなかったら、カスタマイズもできる。Visual Studio 2017の場合は、組み込みの配色テーマのコピーを作ってからカスタマイズする。

　配色テーマのコピーを作るには、Visual Studio 2017ではタイルの右上にマウスをホバーさせて出てくる［Create Copy of Theme］アイコンをクリックする（前の画像）。

　コピーした配色テーマは「Custom Themes」としてColor Theme Editorの下の段に表示される。これをカスタマイズするには、タイル右上の3つのアイコンの中央、［Edit Theme］をクリックする。するとその配色テーマのエディタ画面に切り替わる（次の画像）。

配色テーマを編集する
Color Theme Editor（左側のペイン）の下段［Custom Themes］セクションの配色テーマは編集可能だ。

• タイルの右上にマウスをホバーすると出てくる3つのアイコン（赤丸内）の中央のものをクリックすると、その配色テーマのエディタが開く。この画像では手動で右側のペインに移動している。
• 配色テーマのエディタで自由に色を変更する（右側のペイン）。
• 変更し終わったら、配色テーマのエディタの左上に6個並んでいるアイコン（赤枠内）の左から2番目をクリックして、新しいテーマを保存するとともに適用する。

　配色テーマのエディタで色を変えたら、配色テーマのエディタの左上に並んだアイコンの左から2番目［Save and Apply Theme］をクリックすると、変更した配色テーマが保存されるとともにVisual Studioに適用される。また、左から3番目のアイコン［Export Theme］で、カスタマイズした配色テーマをファイルにエクスポートすることもできる。書き出されるファイルの拡張子は「.vstheme」か「.pkgdef」になる。

まとめ

　親しみやすく使いやすいと感じる環境は、開発者の生産性も向上させる。Visual Studioには、文字色やウィンドウの色など、細部にわたってカスタマイズできる機能が備わっている。ぜひ活用していただきたい。

「.NET TIPS」