VScodeのデザインを変更しよう！

はじめに、

これは普通のVScodeですよね。

これだと何だか物足りない、、

ということで今回はVScodeのデザインをカスタマイズしたいと思います。

"setting"を開こう。

デザインを変更すためにまず、settingを開きます。

Ctrl + Shift + P を押し、settingと入力します。

基本設定:ユーザー設定を開く(JSON)をクリックし、出てきた画面に記述していきます。

デザインをしよう。

今回は、私の好きな緑をメインに作りました。

{
    "workbench.colorTheme": "Default Light Modern",
    "editor.fontSize": 13,
    "workbench.colorCustomizations": {
        //アクティビティバー
        "activityBar.background": "#b4d4b4", //アクティビティバーの背景
        "activityBar.activeBorder": "#537953", //アクティブなアクティビティバーの線
        "activityBar.border": "#F8F7F2", //アクティビティバーのボーダー
        "activityBar.activeBackground": "#a2c7a2", //アクティブなアクティブバーの背景
        "activityBar.foreground": "#000000", //アクティビティバーの文字
        "activityBarBadge.background": "#F8F7F2", //アクティビティバーのバッチの背景
        "activityBarBadge.foreground": "#000000", //アクティビティバーのバッチの文字
        //ボタン
        "button.foreground": "#ffffff", //文字
        "button.hoverBackground": "#709170", //ホバー
        "button.background": "#7b9c7b", //背景
        //エディター
        "editor.background": "#F8F7F2", //エディター背景
        "editor.foreground": "#000000", //エディター文字
        "editor.selectionBackground": "#afd8af", //選択背景
        "editor.lineHighlightBackground": "#e2f0e2", //選択行
        "editorCursor.foreground": "#000000", //カーソル
        "editorLineNumber.foreground": "#709170", //行数
        "editorLineNumber.activeForeground": "#398439", //選択行数
        "editorBracketMatch.background": "#b4d4b4", //括弧の組み合わせ
        "editorBracketMatch.border": "#b4d4b4", //括弧の組み合わせのボックス
        "editorError.foreground": "#e0587f", //エラー下線
        "editorWarning.foreground": "#e0587f", //警告下線
        //フォーカス
        "focusBorder": "#709170",
        //メニューバー
        "menu.selectionBackground": "#a2c7a2", //選択背景
        "menu.selectionForeground": "#000000", //選択文字
        "menu.separatorBackground": "#AAAAAA", //仕切り
        "menu.background": "#e2f0e2", //背景
        "menu.foreground": "#000000", //文字
        //パネル
        "panel.background": "#f8f7f2",
        "panelTitle.activeBorder": "#709170",
        //ステータスバー
        "statusBar.noFolderBackground": "#709170",
        "statusBar.background": "#709170", //下のステータスバー
        "statusBar.foreground": "#ffffff", //下のステータスバーの文字
        "statusBarItem.remoteBackground": "#709170", //左下のリモート背景
        "statusBarItem.remoteForeground": "#ffffff", //左下のリモート文字
        "statusBar.border": "#709170", //下のリモートとエディターの間
        //サイドバー
        "sideBarTitle.background": "#b4d4b4",
        "sideBarSectionHeader.background": "#b4d4b4",
        "sideBar.background": "#f8f7f2", //フォルダの背景
        "sideBar.foreground": "#000000", //フォルダの文字
        //スクロールバー
        "scrollbarSlider.activeBackground": "#99c299", //スクロールバー アクティブ
        "scrollbarSlider.hoverBackground": "#99c299", //スクロールバー ホバー
        "scrollbarSlider.background": "#afddaf", //スクロールバー
        //タブ
        "tab.activeBackground": "#cae8ca", //開いている 背景
        "tab.activeForeground": "#000000", //開いている 文字
        "tab.activeBorderTop": "#cae8ca", //開いている ボーダー
        "tab.inactiveBackground": "#d6ebd6", //開いていない 背景
        "tab.inactiveForeground": "#707070", //開いていない 文字
        "tab.hoverBackground": "#cae8ca",
        "tab.border": "#f8f7f2",
        "tab.unfocusedActiveBackground": "#d6ebd6",
        "tab.unfocusedInactiveBackground": "#e5f5e5",
        "tab.unfocusedHoverBackground": "#d6ebd6",
        //ターミナル
        "terminal.foreground": "#000000",
        "terminalCommandDecoration.defaultBackground": "#99c299",
        "terminalCommandDecoration.errorBackground": "#ff4d4d",
        "terminalCommandDecoration.successBackground": "#709170",
        "terminalCommandGuide.foreground": "#cde6cd",
        "terminalCursor.foreground": "#709170",
        "progressBar.background": "#709170",
        //タイトルバー
        "titleBar.activeBackground": "#f8f7f2",
    },
    "workbench.startupEditor": "none",
    "editor.tokenColorCustomizations": {
        "comments": "#008000",
        "strings": "#cf0030",
        "numbers": "#763166",
        "keywords": "#133463",
        "functions": "#c39043",
        "types": "#0083c6",
        "variables": "#2980af",
    }
}

長いですね、

これを入力して、保存すると画面が次のように変わります。

カラーコードを変えることで、自由にデザインできます。

ぜひ、やってみてください。