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#F0F0F0
  • activityBar.foreground#494B52
  • activityBar.inactiveForeground#B0B0B0
  • activityBarBadge.background#0184BC
  • activityBarBadge.foreground#FFF
  • badge.background#0184BC
  • badge.foreground#FFF
  • button.background#0184BC
  • button.foreground#FFF
  • editor.background#FAFAFA
  • editor.foreground#383A42
  • editor.lineHighlightBackground#EBEBEB
  • editor.selectionBackground#C8D1E0
  • editorBracketMatch.background#0184BC20
  • editorBracketMatch.border#0184BC
  • editorCursor.foreground#0184BC
  • editorGroupHeader.tabsBackground#F0F0F0
  • editorGutter.addedBackground#50A14F
  • editorGutter.background#FAFAFA
  • editorGutter.deletedBackground#E45649
  • editorGutter.modifiedBackground#C18401
  • editorIndentGuide.background#EBEBEB
  • editorLineNumber.activeForeground#383A42
  • editorLineNumber.foreground#B0B0B0
  • focusBorder#0184BC
  • foreground#383A42
  • gitDecoration.addedResourceForeground#50A14F
  • gitDecoration.deletedResourceForeground#E45649
  • gitDecoration.ignoredResourceForeground#B0B0B0
  • gitDecoration.modifiedResourceForeground#0184BC
  • input.background#FFF
  • input.border#CBCBCB
  • input.foreground#383A42
  • list.activeSelectionBackground#D0D8E8
  • list.highlightForeground#0184BC
  • list.hoverBackground#EBEBEB
  • menu.background#FFF
  • menu.foreground#383A42
  • menu.selectionBackground#D0D8E8
  • panel.background#F0F0F0
  • panel.border#E0E0E0
  • panelTitle.activeBorder#0184BC
  • scrollbarSlider.background#CBCBCB80
  • sideBar.background#F0F0F0
  • sideBar.border#E0E0E0
  • sideBar.foreground#494B52
  • statusBar.background#F0F0F0
  • statusBar.border#E0E0E0
  • statusBar.foreground#494B52
  • statusBarItem.remoteBackground#0184BC
  • statusBarItem.remoteForeground#FFF
  • tab.activeBackground#FAFAFA
  • tab.activeBorderTop#0184BC
  • tab.activeForeground#383A42
  • tab.border#E0E0E0
  • tab.inactiveBackground#F0F0F0
  • tab.inactiveForeground#9D9D9F
  • terminal.background#F0F0F0
  • terminal.foreground#383A42
  • titleBar.activeBackground#F0F0F0
  • titleBar.activeForeground#494B52

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block, comment.line, punctuation.definition.comment#9D9D9Fitalic
string, string.quoted, string.quoted.single, string.quoted.double, punctuation.definition.string#50A14F
constant.character.escape#50A14F
constant.numeric#986801
constant.language#986801italic
constant.character, constant.other#986801
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#A626A4bold
keyword.other.tableextension.al, keyword.other.pageextension.al, keyword.other.reportextension.al, keyword.other.enumextension.al, keyword.other.interfaceextension.al, keyword.other.permissionsetextension.al#A626A4bold italic
entity.name.type.al, entity.name.class.al, entity.name.object.al#50A14Fbold
entity.name.function.al, meta.function.al entity.name.function#0184BCbold
entity.name.function.trigger.al, entity.name.trigger.al, support.function.trigger.al#4078F2italic
keyword.other.event.al, storage.type.event.al, keyword.other.eventsubscriber.al#4078F2bold italic
entity.name.field.al, variable.other.field.al#0184BC
support.type.property-name.al, entity.other.attribute-name.al#383A42
variable.language.rec.al, variable.other.rec.al, variable.language.al#50A14Fbold
support.type.al, storage.type.primitive.al#C18401
constant.other.enum.al, variable.other.enummember.al#986801
storage.modifier.al, keyword.other.local.al#A626A4italic
keyword, keyword.control, keyword.other, storage.type, storage.modifier#A626A4
keyword.operator#383A42
keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational#383A42
punctuation#9D9D9F
variable.other#383A42
variable.language.this#50A14F
variable.parameter#E45649
entity.name.function, support.function.any-method, variable.function#0184BCbold
support.function#0184BC
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#C18401
entity.other.attribute-name#383A42
support.type.property-name.json#A626A4
entity.name.tag.yaml#A626A4
entity.name.tag#A626A4
entity.name.namespace, entity.name.module#C18401
invalid#F87171underline
markup.heading#A626A4bold
markup.underline.link#0184BC
markup.boldbold
markup.italicitalic