Skip to content
DBCode

Color

Assigning custom colors to your connections in DBCode allows you to visually organize and quickly recognize different environments (e.g., development, staging, production).

Adding a Color to a Connection

Section titled “Adding a Color to a Connection”

  1. Open DBCode in Visual Studio Code:

    • Launch Visual Studio Code and click on the DBCode icon in the Activity Bar (typically on the left side).

  2. Select the Connection:

    • In the DBCode Explorer, locate the connection you want to color or create a new connection.

  3. Set a Connection Color:

    • Right-click the connection and choose Edit Connection from the context menu.

    • In the Edit Connection tab, scroll down to Choose a Color and select a color that represents the connection. Click Save to apply the settings.

    • Once set, this color will persist across Visual Studio Code restarts, providing a consistent visual indicator.

    Setting a connection color

    • The assigned color will appear in the following places, by default:

      • The connection item in the DB Explorer (including any status indicators like ☆ for default or ● for connected).

      • The primary key (PK) indicator for tables in the connected database.

      • The Editor tab associated with the connection.

      • The SQL file header associated with the connection.

    Color-coded editor tabs and SQL headers

Modifying Color Settings in the Extension Settings

Section titled “Modifying Color Settings in the Extension Settings”

To adjust default color settings for all connections, you can customize the DBCode extension settings in Visual Studio Code:

  1. Open Settings: Go to File > Preferences > Settings (or press Ctrl+,).

    VS Code settings

  2. Search for DBCode: In the settings search bar, type “DBCode.”

  3. Configure DBCode Settings: Under Extensions, expand DBCode and click on Connection Color. Adjust the color settings as needed.

    DBCode color settings

Additional Notes

Section titled “Additional Notes”

DBCode applies custom colors to the connection item in the DB Explorer, Editor tabs, and SQL file headers, maintaining a consistent look while aligning with brand guidelines by leaving primary connection icons unchanged. The color is applied to the connection name and any status indicators (☆ for workspace default, ● for connected).