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.bold—bold
markup.italic—italic
ALchemy by Yahya Touil - VS Code Theme