LABOでインターンを始めてはや2か月、ずっと思ってることがありました。
それは「Visual Studio Codeをもっとかわいくさせたい、、！」ということ。
みなさまの中にもこんな考えを持った人いらっしゃるのではないでしょうか。
見た目がかわいくないとテンションが上がらない
見た目から入るタイプだ
「カワイイはつくれる」
今回はそんなかわいい信者のエンジニアのために、Visual Studio Codeをかわいくカスタマイズさせる方法についてご紹介します！
Visual Studio Codeにはたくさんの配色テーマがあり、その中にもかわいいものはたくさんありますが、わたしは配色テーマをさらにカスタマイズして自分好みのものに変えていきます。
カスタマイズ前
かっこいいけど、もっとかわいさもほしい・・！ということで、まずはかわいい配色テーマを探していきます。
配色テーマのインストール
まず左下の歯車マークから配色テーマを選択します。
その他の色のテーマをインストールを選択すると、Marketplaceが表示されるので、その中から自分好みの配色テーマをインストールします。（かなりたくさんあるので、選ぶのも楽しいです！）
わたしは今回"Electron Color Theme"にしました！
カラフルでかわいくなりましたが、タブや文字、カーソルの色などをもう少し変えたいので、ユーザー設定（settings.jsonファイル）から配色テーマを直接編集していきます。
settings.jsonの編集
ファイル > 基本設定 >設定 と進みます。
ワークベンチの中に、settings.jsonで編集があります。
それを選択すると、編集画面が表示されるので、直接編集します！
{ "workbench.colorCustomizations"{ "設定項目":"値" } }
このように、カラーの設定を変更したい場合は、"workbench.colorCustomizations"の中に書き込みます。（配色以外にも様々な設定を編集することができます）
カラーを設定できる要素の一覧は、リンク先から見ることができます。
Theme Color | Visual Studio Code Extension API
カスタマイズ後
{ "workbench.colorCustomizations": { "editorCursor.foreground": "#eaf4fc" //エディタカーソルの前景色 "tab.activeBackground": "#88b5d3" //アクティブなタブの背景色 "tab.activeBorder": "#88b5d3" //アクティブなタブの下罫線 "activityBar.background": "#8384f5" //アクティビティバーの背景色 "statusBar.noFolderBackground": "#ffadff" //フォルダーが開かれていないときのステータスバーの背景色 "statusBar.background": "#ffadff" //標準ステータスバーの背景色 "statusBar.noFolderForeground": "#ffffff" //フォルダーが開かれていないときのステータスバーの前景色 "statusBar.foreground": "#ffffff" //標準ステータスバーの前景色 } "editor.tokenColorCustomizations": { //配色テーマの文字カラー設定 "[Electron]": { "comments": "#626063" //コメント "strings": "#fdeff2" //文字列 "functions": "#99ccff" //関数 "variables": "#ffadd6" //変数 } }
設定を変更した後は以下のような見た目になりました。パステルカラーがかわいいです！！
エディタがかわいいとコーディングも捗りそうです！ぜひお試しください。
最後に
スタイル・エッジLABOでは、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください！
