スタイル・エッジLABO技術ブログ

士業集客支援/コンサルティングのスタイル・エッジグループ スタイル・エッジLABOのエンジニアによるブログです。

Visual Studio Codeをかわいく変身させたい!

f:id:styleedge_tech:20191204163229j:plain
Photo by Bruno Nascimento on Unsplash
はじめまして!スタイル・エッジLABOでインターンをしてます、MJです。

LABOでインターンを始めてはや2か月、ずっと思ってることがありました。
それはVisual Studio Codeをもっとかわいくさせたい、、!」ということ。
みなさまの中にもこんな考えを持った人いらっしゃるのではないでしょうか。

  • 見た目がかわいくないとテンションが上がらない

  • 見た目から入るタイプだ

  • 「カワイイはつくれる」

今回はそんなかわいい信者のエンジニアのために、Visual Studio Codeかわいくカスタマイズさせる方法についてご紹介します!
Visual Studio Codeにはたくさんの配色テーマがあり、その中にもかわいいものはたくさんありますが、わたしは配色テーマをさらにカスタマイズして自分好みのものに変えていきます。

カスタマイズ前

f:id:styleedge_tech:20191212141756p:plain かっこいいけど、もっとかわいさもほしい・・!ということで、まずはかわいい配色テーマを探していきます。

配色テーマのインストール

まず左下の歯車マークから配色テーマを選択します。 f:id:styleedge_tech:20191204123007p:plain

f:id:styleedge_tech:20191204123502p:plain
その他の色のテーマをインストールを選択すると、Marketplaceが表示されるので、その中から自分好みの配色テーマをインストールします。(かなりたくさんあるので、選ぶのも楽しいです!)

わたしは今回"Electron Color Theme"にしました! f:id:styleedge_tech:20191212141642p:plain
カラフルでかわいくなりましたが、タブや文字、カーソルの色などをもう少し変えたいので、ユーザー設定(settings.jsonファイル)から配色テーマを直接編集していきます。

settings.jsonの編集

ファイル > 基本設定 >設定 と進みます。 f:id:styleedge_tech:20191204125056p:plain
ワークベンチの中に、settings.jsonで編集があります。 f:id:styleedge_tech:20191204125541p:plain
それを選択すると、編集画面が表示されるので、直接編集します!

{
      "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" //変数
     }
}

設定を変更した後は以下のような見た目になりました。パステルカラーがかわいいです!! f:id:styleedge_tech:20191212141924p:plain
エディタがかわいいとコーディングも捗りそうです!ぜひお試しください。

最後に

スタイル・エッジLABOでは、一緒に働く仲間を募集しています。 もし興味を持っていただけましたら、ぜひ採用サイトものぞいてみてください!

株式会社スタイル・エッジLABO採用サイト