VS Code: Customizing the Bottom Status Bar

Last updated on September 23, 2021 A Goodman Loading... Post a comment

This article shows you how to show/hide the bottom status in VS Code (Visual Studio Code) as well as changing its color.

Show/Hide the Status Bar

Approach 1

1. Open your VS Code and head to the Settings page:

  • Mac: Code > Preferences > Settings (shortcut: Command + ,)
  • Windows: File > Preferences > Settings (hotkeys: Ctrl + ,)

2. Search for “status bar” and check/uncheck the checkbox in the “Workbench > Status Bar: Visible” section to show/hide the status bar, respectively.

Approach 2

If you want to use specific settings for a particular project then create a folder named .vscode in the root directory of that project then add a settings.json file inside that folder. Add the following to the settings.json file you’ve just created:

{
  "workbench.statusBar.visible": false, // set to "true" if you want the status bar to visible
}

Change The Status Bar Color

Approach 1

1. Open Command Palette (press “Command” + “Shift” + “P” on Mac and “Ctrl” + “Shift” + “P” on Windows), search for “settings.json” and select “Preferences: Open Settings (JSON)” from the result list.

2. Find the workbench.colorCustomizations block and set the background color for your status bar with statusBar.background, as follows:

"workbench.colorCustomizations": {
    "editorRuler.foreground": "#4093ff",
    "statusBar.background": "#3ec25b" 
  },

You can easily specify a color code by click on the small color box to open the VS Code’s built-in color picker:

Approach 2

If you want to change the background color of the status bar for a single project, create a folder named .vscode in the root directory of that project then add a settings.json file inside that folder (you can skip this step if it’s already there).

Add the following to that JSON file:

{
  "workbench.statusBar.visible": true,
  "workbench.colorCustomizations": {
    "statusBar.background": "#5f1515", // The color is totally up to you
     // Click on the small box next to the color code to see the built-in color picker of VS Code
  }
}

Screenshot:

Conclusion

We’ve done some settings to customize the bottom status bar in VS Code. If you’d like to explore more tips and tricks about using this awesome IDE, take a look at the following guides:

If you have a question, feel free to leave a comment. I’ll try my best to help. Happy coding!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles