Visual Studio Codeの配色テーマ(エディタなどの背景色)を変更する

開発環境のVisual Studio Code(VSCode)の配色テーマ(Color Thema)の設定変更について説明しています。

※ 本ページはプロモーションが含まれています。

目的と動作環境

最終更新日:2021/7/14

Visual Studio Code(以下、VSCode)の配色テーマ(エディタなどの背景色)の設定を変更する方法についてです。
最近、ワイヤレスのキーボードを買ったのですが、夜とか部屋の電気を消して暗い時に、背景色が黒のVSCodeを見ていると手元のキーボードが見にくいので、背景色を明るくしてみました。

■動作環境やバージョンは以下の通りです。
OS:macOS Big Sur(バージョン11.4)
Visual Studio Code:Version: 1.57.0

配色テーマ(Color Thema)の設定変更

配色テーマの変更は、設定画面でできます。設定画面を開くには、上部のメニューバーから「Code」->「基本設定(Preferences)」->「設定(Settings)」を選択します(ショートカットなら、command(⌘) + ,(カンマ))。

次に、設定画面の左サイドバーの「ワークベンチ(Workbench)」->「外観(Appearance)」を選択すると、メインページに「Color Thema(配色テーマ)」という箇所がありますので、そこで配色テーマの変更ができます。
(上の検索バーで、「配色」か「thema」と入力すると、すぐ見つかると思います。)
Visual Studio Codeの配色テーマ(背景色)の変更

また、設定画面を開かなくても、ショートカットで「"command(⌘) + K" + "command(⌘) + T"」を実行すると、配色テーマの選択ボックスが開くので、そこで変更する事もできます。

設定は以上です。明るくなって良かった。


その他のVisual Studio Code関連のページ

Visual Studio Codeが起動しない(The window has crashed)