Customize syntax coloring in VSCode

[cnagel-wti]

Latest version of VSCode broke the syntax colors provided by the dbdiagram VSCode Extension. Now everything is in shades of orange.

Version: 1.116.0
Commit: 560a9dba96f961efea7b1612916f89e5d5d4d679
Date: 2026-04-15T00:28:13Z (1 wk ago)
Electron: 39.8.7
ElectronBuildId: 13797146
Chromium: 142.0.7444.265
Node.js: 22.22.1
V8: 14.2.231.22-electron.0
OS: Darwin arm64 25.4.0

[cnagel-wti]

Also broken in VSCode-Insiders

Version: 1.118.0-insider
Commit: 102df5b59f1c706f14aee2259d4ec60a6acee55c
Date: 2026-04-22T11:25:25Z
Electron: 39.8.8
ElectronBuildId: 13870025
Chromium: 142.0.7444.265
Node.js: 22.22.1
V8: 14.2.231.22-electron.0
OS: Darwin arm64 25.4.0

[xuantho573]

Hi @cnagel-wti,

It seems that the issue is caused by the color theme of VSCode (Dark 2026). Please try changing the theme to see if the issue resolve.

[ChrisMiami]

Very true - that was the root cause. Thank you! I like the theme generally, so I added this to settings.json. I might wish there were more fine-grained access to the tokens (tableName, columnName, schemaName, enumItem, etc), but the extension isn't open-source so I'll leave that to you guys. Thanks again!

  "editor.tokenColorCustomizations": {
    "[Dark 2026]": {
      "textMateRules": [
        {
          "scope": "keyword.type.dbml",
          "settings": {
            "foreground": "#95c6ff",
            // "fontStyle": "bold"
          }
        },
        {
          "scope": "entity.name.dbml",
          "settings": {
            "foreground": "#d2d7e1"
          }
        },
        {
          "scope": "source.dbml",
          "settings": {
            "foreground": "#eda6a6"
          }
        },
        {
          "scope": "string.quoted.double.dbml",
          "settings": {
            "foreground": "#8ebc6e"
          }
        },
        {
          "scope": "string.quoted.single.dbml",
          "settings": {
            "foreground": "#80a665d5",
            "fontStyle": "italic"
          }
        },
        {
          "scope": "comment.line.double-slash.dbml",
          "settings": {
            "foreground": "#5dca8c",
            "fontStyle": "italic"
          }
        },
        {
          "scope": "comment.block.dbml",
          "settings": {
            "foreground": "#84efc9e1",
            "fontStyle": "italic"
          }
        },
        {
          "scope": "constant.numeric.dbml",
          "settings": {
            "foreground": "#e5b05b",
            // "fontStyle": "bold"
          } 
        },
        {
          "scope": "punctuation.definition.bracket.dbml",
          "settings": {
            "foreground": "#e88cfa"
          }
        },
        {
          "scope": "keyword.operator.dbml",
          "settings": {
            "foreground": "#ecaff8"
          }
        }
      ]
    }
  }