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.boldbold
markup.italicitalic
ALchemy by Yahya Touil - VS Code Theme