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#181825
  • activityBar.border#11111B
  • activityBar.foreground#CDD6F4
  • activityBar.inactiveForeground#585B70
  • activityBarBadge.background#89B4FA
  • activityBarBadge.foreground#1E1E2E
  • badge.background#89B4FA
  • badge.foreground#1E1E2E
  • button.background#89B4FA
  • button.foreground#1E1E2E
  • diffEditor.insertedTextBackground#A6E3A115
  • diffEditor.removedTextBackground#F38BA815
  • editor.background#1E1E2E
  • editor.findMatchBackground#F9E2AF40
  • editor.foreground#CDD6F4
  • editor.hoverHighlightBackground#89B4FA22
  • editor.lineHighlightBackground#313244
  • editor.selectionBackground#45475A
  • editor.wordHighlightBackground#89B4FA15
  • editorBracketMatch.background#89B4FA20
  • editorBracketMatch.border#89B4FA
  • editorCursor.foreground#F5C2E7
  • editorGroupHeader.tabsBackground#181825
  • editorGutter.addedBackground#A6E3A1
  • editorGutter.background#1E1E2E
  • editorGutter.deletedBackground#F38BA8
  • editorGutter.modifiedBackground#F9E2AF
  • editorIndentGuide.background#31324488
  • editorLineNumber.activeForeground#CDD6F4
  • editorLineNumber.foreground#585B70
  • editorLink.activeForeground#89B4FA
  • editorRuler.foreground#313244
  • editorSuggestWidget.foreground#CDD6F4
  • editorSuggestWidget.highlightForeground#89B4FA
  • editorSuggestWidget.selectedBackground#313244
  • focusBorder#89B4FA
  • foreground#CDD6F4
  • gitDecoration.addedResourceForeground#A6E3A1
  • gitDecoration.deletedResourceForeground#F38BA8
  • gitDecoration.ignoredResourceForeground#585B70
  • gitDecoration.modifiedResourceForeground#89B4FA
  • input.background#11111B
  • input.border#45475A
  • input.foreground#CDD6F4
  • list.activeSelectionBackground#313244
  • list.activeSelectionForeground#CDD6F4
  • list.highlightForeground#89B4FA
  • list.hoverBackground#313244
  • menu.background#181825
  • menu.border#11111B
  • menu.foreground#CDD6F4
  • menu.selectionBackground#313244
  • panel.background#181825
  • panel.border#11111B
  • panelTitle.activeBorder#89B4FA
  • panelTitle.activeForeground#CDD6F4
  • peekViewEditor.background#11111B
  • peekViewResult.background#181825
  • peekViewTitle.background#11111B
  • scrollbarSlider.background#45475A80
  • sideBar.background#181825
  • sideBar.border#11111B
  • sideBar.foreground#CDD6F4
  • sideBarSectionHeader.background#181825
  • sideBarSectionHeader.border#11111B
  • sideBarTitle.foreground#585B70
  • statusBar.background#181825
  • statusBar.border#11111B
  • statusBar.foreground#CDD6F4
  • statusBarItem.remoteBackground#89B4FA
  • statusBarItem.remoteForeground#1E1E2E
  • tab.activeBackground#1E1E2E
  • tab.activeBorderTop#89B4FA
  • tab.activeForeground#CDD6F4
  • tab.border#11111B
  • tab.inactiveBackground#181825
  • tab.inactiveForeground#585B70
  • terminal.ansiBlack#45475A
  • terminal.ansiBlue#89B4FA
  • terminal.ansiBrightBlack#585B70
  • terminal.ansiBrightWhite#CDD6F4
  • terminal.ansiCyan#89DCEB
  • terminal.ansiGreen#A6E3A1
  • terminal.ansiMagenta#CBA6F7
  • terminal.ansiRed#F38BA8
  • terminal.ansiWhite#BAC2DE
  • terminal.ansiYellow#F9E2AF
  • terminal.background#181825
  • terminal.foreground#CDD6F4
  • terminal.selectionBackground#45475A
  • titleBar.activeBackground#181825
  • titleBar.activeForeground#CDD6F4
  • titleBar.border#11111B
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block, comment.line, punctuation.definition.comment#585B70italic
string, string.quoted, string.quoted.single, string.quoted.double, punctuation.definition.string#A6E3A1
constant.character.escape#A6E3A1
constant.numeric#FAB387
constant.language#FAB387italic
constant.character, constant.other#FAB387
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#CBA6F7bold
keyword.other.tableextension.al, keyword.other.pageextension.al, keyword.other.reportextension.al, keyword.other.enumextension.al, keyword.other.interfaceextension.al, keyword.other.permissionsetextension.al#CBA6F7bold italic
entity.name.type.al, entity.name.class.al, entity.name.object.al#A6E3A1bold
entity.name.function.al, meta.function.al entity.name.function#89B4FAbold
entity.name.function.trigger.al, entity.name.trigger.al, support.function.trigger.al#89DCEBitalic
keyword.other.event.al, storage.type.event.al, keyword.other.eventsubscriber.al#89DCEBbold italic
entity.name.field.al, variable.other.field.al#94E2D5
support.type.property-name.al, entity.other.attribute-name.al#CDD6F4
variable.language.rec.al, variable.other.rec.al, variable.language.al#A6E3A1bold
support.type.al, storage.type.primitive.al#F9E2AF
constant.other.enum.al, variable.other.enummember.al#FAB387
storage.modifier.al, keyword.other.local.al#CBA6F7italic
keyword, keyword.control, keyword.other, storage.type, storage.modifier#CBA6F7
keyword.operator#BAC2DE
keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational#BAC2DE
punctuation#6C7086
variable.other#CDD6F4
variable.language.this#A6E3A1
variable.parameter#F38BA8
entity.name.function, support.function.any-method, variable.function#89B4FAbold
support.function#89B4FA
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#F9E2AF
entity.other.attribute-name#CDD6F4
support.type.property-name.json#CBA6F7
entity.name.tag.yaml#CBA6F7
entity.name.tag#CBA6F7
entity.name.namespace, entity.name.module#F9E2AF
invalid#F87171underline
markup.heading#CBA6F7bold
markup.underline.link#89B4FA
markup.boldbold
markup.italicitalic