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#EAEAEA
  • activityBar.foreground#343B58
  • activityBar.inactiveForeground#9699A3
  • activityBarBadge.background#8C4351
  • activityBarBadge.foreground#F5F5F5
  • badge.background#8C4351
  • badge.foreground#FFF
  • button.background#8C4351
  • button.foreground#FFF
  • editor.background#F5F5F5
  • editor.foreground#343B58
  • editor.lineHighlightBackground#EAEAEA
  • editor.selectionBackground#B6C3E8
  • editorBracketMatch.background#8C435120
  • editorBracketMatch.border#8C4351
  • editorCursor.foreground#8C4351
  • editorGroupHeader.tabsBackground#EAEAEA
  • editorGutter.addedBackground#485E30
  • editorGutter.background#F5F5F5
  • editorGutter.deletedBackground#8C4351
  • editorGutter.modifiedBackground#965027
  • editorIndentGuide.background#EAEAEA
  • editorLineNumber.activeForeground#343B58
  • editorLineNumber.foreground#9699A3
  • focusBorder#8C4351
  • foreground#343B58
  • gitDecoration.addedResourceForeground#485E30
  • gitDecoration.deletedResourceForeground#8C4351
  • gitDecoration.ignoredResourceForeground#9699A3
  • gitDecoration.modifiedResourceForeground#34548A
  • input.background#FFF
  • input.border#D5D6D8
  • input.foreground#343B58
  • list.activeSelectionBackground#B6C3E8
  • list.highlightForeground#8C4351
  • list.hoverBackground#EAEAEA
  • menu.background#FFF
  • menu.foreground#343B58
  • menu.selectionBackground#B6C3E8
  • panel.background#EAEAEA
  • panel.border#D5D6D8
  • panelTitle.activeBorder#8C4351
  • scrollbarSlider.background#D5D6D880
  • sideBar.background#EAEAEA
  • sideBar.border#D5D6D8
  • sideBar.foreground#343B58
  • statusBar.background#EAEAEA
  • statusBar.border#D5D6D8
  • statusBar.foreground#343B58
  • statusBarItem.remoteBackground#8C4351
  • statusBarItem.remoteForeground#F5F5F5
  • tab.activeBackground#F5F5F5
  • tab.activeBorderTop#8C4351
  • tab.activeForeground#343B58
  • tab.border#D5D6D8
  • tab.inactiveBackground#EAEAEA
  • tab.inactiveForeground#9699A3
  • terminal.background#EAEAEA
  • terminal.foreground#343B58
  • titleBar.activeBackground#EAEAEA
  • titleBar.activeForeground#343B58

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block, comment.line, punctuation.definition.comment#9699A3italic
string, string.quoted, string.quoted.single, string.quoted.double, punctuation.definition.string#485E30—
constant.character.escape#485E30—
constant.numeric#965027—
constant.language#965027italic
constant.character, constant.other#965027—
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#5A4A78bold
keyword.other.tableextension.al, keyword.other.pageextension.al, keyword.other.reportextension.al, keyword.other.enumextension.al, keyword.other.interfaceextension.al, keyword.other.permissionsetextension.al#5A4A78bold italic
entity.name.type.al, entity.name.class.al, entity.name.object.al#485E30bold
entity.name.function.al, meta.function.al entity.name.function#34548Abold
entity.name.function.trigger.al, entity.name.trigger.al, support.function.trigger.al#0F4B6Eitalic
keyword.other.event.al, storage.type.event.al, keyword.other.eventsubscriber.al#0F4B6Ebold italic
entity.name.field.al, variable.other.field.al#0F4B6E—
support.type.property-name.al, entity.other.attribute-name.al#343B58—
variable.language.rec.al, variable.other.rec.al, variable.language.al#485E30bold
support.type.al, storage.type.primitive.al#8C4351—
constant.other.enum.al, variable.other.enummember.al#965027—
storage.modifier.al, keyword.other.local.al#5A4A78italic
keyword, keyword.control, keyword.other, storage.type, storage.modifier#5A4A78—
keyword.operator#343B58—
keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational#343B58—
punctuation#9699A3—
variable.other#343B58—
variable.language.this#485E30—
variable.parameter#8C4351—
entity.name.function, support.function.any-method, variable.function#34548Abold
support.function#34548A—
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#8C4351—
entity.other.attribute-name#343B58—
support.type.property-name.json#5A4A78—
entity.name.tag.yaml#5A4A78—
entity.name.tag#5A4A78—
entity.name.namespace, entity.name.module#8C4351—
invalid#F87171underline
markup.heading#5A4A78bold
markup.underline.link#34548A—
markup.bold—bold
markup.italic—italic