Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.background#21252B
  • activityBar.border#181A1F
  • activityBar.foreground#D7DAE0
  • activityBar.inactiveForeground#4B5263
  • activityBarBadge.background#56B6C2
  • activityBarBadge.foreground#21252B
  • badge.background#56B6C2
  • badge.foreground#21252B
  • button.background#56B6C2
  • button.foreground#21252B
  • diffEditor.insertedTextBackground#98C37915
  • diffEditor.removedTextBackground#E06C7515
  • editor.background#282C34
  • editor.findMatchBackground#E5C07B50
  • editor.foreground#ABB2BF
  • editor.hoverHighlightBackground#56B6C222
  • editor.lineHighlightBackground#2C313C
  • editor.selectionBackground#3E4451
  • editor.wordHighlightBackground#61AFEF15
  • editorBracketMatch.background#56B6C220
  • editorBracketMatch.border#56B6C2
  • editorCursor.foreground#56B6C2
  • editorGroupHeader.tabsBackground#21252B
  • editorGutter.addedBackground#98C379
  • editorGutter.background#282C34
  • editorGutter.deletedBackground#E06C75
  • editorGutter.modifiedBackground#E5C07B
  • editorIndentGuide.background#2C313C88
  • editorLineNumber.activeForeground#ABB2BF
  • editorLineNumber.foreground#495162
  • editorLink.activeForeground#61AFEF
  • editorRuler.foreground#2C313C
  • editorSuggestWidget.foreground#ABB2BF
  • editorSuggestWidget.highlightForeground#56B6C2
  • editorSuggestWidget.selectedBackground#3E4451
  • focusBorder#56B6C2
  • foreground#ABB2BF
  • gitDecoration.addedResourceForeground#98C379
  • gitDecoration.deletedResourceForeground#E06C75
  • gitDecoration.ignoredResourceForeground#4B5263
  • gitDecoration.modifiedResourceForeground#61AFEF
  • input.background#1D2026
  • input.border#3E4451
  • input.foreground#ABB2BF
  • list.activeSelectionBackground#3E4451
  • list.highlightForeground#56B6C2
  • list.hoverBackground#2C313C
  • menu.background#21252B
  • menu.border#181A1F
  • menu.foreground#ABB2BF
  • menu.selectionBackground#3E4451
  • panel.background#21252B
  • panel.border#181A1F
  • panelTitle.activeBorder#56B6C2
  • panelTitle.activeForeground#ABB2BF
  • peekViewEditor.background#1D2026
  • peekViewResult.background#21252B
  • peekViewTitle.background#1D2026
  • scrollbarSlider.background#4B526380
  • sideBar.background#21252B
  • sideBar.border#181A1F
  • sideBar.foreground#9DA5B4
  • statusBar.background#21252B
  • statusBar.border#181A1F
  • statusBar.foreground#ABB2BF
  • statusBarItem.remoteBackground#56B6C2
  • statusBarItem.remoteForeground#21252B
  • tab.activeBackground#282C34
  • tab.activeBorderTop#56B6C2
  • tab.activeForeground#D7DAE0
  • tab.border#181A1F
  • tab.inactiveBackground#21252B
  • tab.inactiveForeground#5C6370
  • terminal.ansiBlack#2D3139
  • terminal.ansiBlue#61AFEF
  • terminal.ansiBrightBlack#5C6370
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiCyan#56B6C2
  • terminal.ansiGreen#98C379
  • terminal.ansiMagenta#C678DD
  • terminal.ansiRed#E06C75
  • terminal.ansiWhite#ABB2BF
  • terminal.ansiYellow#E5C07B
  • terminal.background#21252B
  • terminal.foreground#ABB2BF
  • terminal.selectionBackground#3E4451
  • titleBar.activeBackground#21252B
  • titleBar.activeForeground#9DA5B4
  • titleBar.border#181A1F
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block, comment.line, punctuation.definition.comment#5C6370italic
string, string.quoted, string.quoted.single, string.quoted.double, punctuation.definition.string#98C379—
constant.character.escape#98C379—
constant.numeric#D19A66—
constant.language#D19A66italic
constant.character, constant.other#D19A66—
keyword.other.table.al, keyword.other.page.al, keyword.other.codeunit.al, keyword.other.report.al, keyword.other.xmlport.al, keyword.other.enum.al, keyword.other.interface.al, keyword.other.permissionset.al, keyword.other.object.al, storage.type.object.al, keyword.other.query.al, keyword.other.controladdin.al, keyword.other.entitlement.al, keyword.other.profile.al, keyword.other.requestpage.al#C678DDbold
keyword.other.tableextension.al, keyword.other.pageextension.al, keyword.other.reportextension.al, keyword.other.enumextension.al, keyword.other.interfaceextension.al, keyword.other.permissionsetextension.al#C678DDbold italic
entity.name.type.al, entity.name.class.al, entity.name.object.al#98C379bold
entity.name.function.al, meta.function.al entity.name.function#61AFEFbold
entity.name.function.trigger.al, entity.name.trigger.al, support.function.trigger.al#56B6C2italic
keyword.other.event.al, storage.type.event.al, keyword.other.eventsubscriber.al#56B6C2bold italic
entity.name.field.al, variable.other.field.al#56B6C2—
support.type.property-name.al, entity.other.attribute-name.al#ABB2BF—
variable.language.rec.al, variable.other.rec.al, variable.language.al#98C379bold
support.type.al, storage.type.primitive.al#E5C07B—
constant.other.enum.al, variable.other.enummember.al#D19A66—
storage.modifier.al, keyword.other.local.al#C678DDitalic
keyword, keyword.control, keyword.other, storage.type, storage.modifier#C678DD—
keyword.operator#56B6C2—
keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational#56B6C2—
punctuation#5C6370—
variable.other#ABB2BF—
variable.language.this#98C379—
variable.parameter#E06C75—
entity.name.function, support.function.any-method, variable.function#61AFEFbold
support.function#61AFEF—
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#E5C07B—
entity.other.attribute-name#ABB2BF—
support.type.property-name.json#C678DD—
entity.name.tag.yaml#C678DD—
entity.name.tag#C678DD—
entity.name.namespace, entity.name.module#E5C07B—
invalid#F87171underline
markup.heading#C678DDbold
markup.underline.link#61AFEF—
markup.bold—bold
markup.italic—italic