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#16161E
  • activityBar.border#101014
  • activityBar.foreground#C0CAF5
  • activityBar.inactiveForeground#3B4261
  • activityBarBadge.background#E0AF68
  • activityBarBadge.foreground#16161E
  • badge.background#E0AF68
  • badge.foreground#16161E
  • button.background#E0AF68
  • button.foreground#16161E
  • diffEditor.insertedTextBackground#9ECE6A15
  • diffEditor.removedTextBackground#F7768E15
  • editor.background#1A1B26
  • editor.findMatchBackground#E0AF6840
  • editor.foreground#C0CAF5
  • editor.hoverHighlightBackground#E0AF6822
  • editor.lineHighlightBackground#1F213222
  • editor.selectionBackground#364A82
  • editor.wordHighlightBackground#7AA2F720
  • editorBracketMatch.background#E0AF6825
  • editorBracketMatch.border#E0AF68
  • editorCursor.foreground#E0AF68
  • editorGroupHeader.tabsBackground#16161E
  • editorGutter.addedBackground#9ECE6A
  • editorGutter.background#1A1B26
  • editorGutter.deletedBackground#F7768E
  • editorGutter.modifiedBackground#E0AF68
  • editorIndentGuide.background#1F213288
  • editorLineNumber.activeForeground#737AA2
  • editorLineNumber.foreground#3B4261
  • editorLink.activeForeground#7AA2F7
  • editorRuler.foreground#1F2132
  • editorSuggestWidget.foreground#C0CAF5
  • editorSuggestWidget.highlightForeground#E0AF68
  • editorSuggestWidget.selectedBackground#283457
  • focusBorder#E0AF68
  • foreground#A9B1D6
  • gitDecoration.addedResourceForeground#9ECE6A
  • gitDecoration.deletedResourceForeground#F7768E
  • gitDecoration.ignoredResourceForeground#3B4261
  • gitDecoration.modifiedResourceForeground#7AA2F7
  • input.background#101014
  • input.border#3B4261
  • input.foreground#C0CAF5
  • list.activeSelectionBackground#283457
  • list.activeSelectionForeground#C0CAF5
  • list.highlightForeground#E0AF68
  • list.hoverBackground#1F2132
  • menu.background#16161E
  • menu.border#101014
  • menu.foreground#A9B1D6
  • menu.selectionBackground#283457
  • panel.background#16161E
  • panel.border#101014
  • panelTitle.activeBorder#E0AF68
  • panelTitle.activeForeground#C0CAF5
  • peekViewEditor.background#101014
  • peekViewResult.background#16161E
  • peekViewTitle.background#101014
  • scrollbarSlider.background#3B426180
  • sideBar.background#16161E
  • sideBar.border#101014
  • sideBar.foreground#A9B1D6
  • sideBarSectionHeader.background#16161E
  • sideBarSectionHeader.border#101014
  • sideBarTitle.foreground#3B4261
  • statusBar.background#16161E
  • statusBar.border#101014
  • statusBar.foreground#A9B1D6
  • statusBarItem.remoteBackground#E0AF68
  • statusBarItem.remoteForeground#16161E
  • tab.activeBackground#1A1B26
  • tab.activeBorderTop#E0AF68
  • tab.activeForeground#C0CAF5
  • tab.border#101014
  • tab.inactiveBackground#16161E
  • tab.inactiveForeground#3B4261
  • terminal.ansiBlack#1D202F
  • terminal.ansiBlue#7AA2F7
  • terminal.ansiBrightBlack#414868
  • terminal.ansiBrightWhite#C0CAF5
  • terminal.ansiCyan#7DCFFF
  • terminal.ansiGreen#9ECE6A
  • terminal.ansiMagenta#BB9AF7
  • terminal.ansiRed#F7768E
  • terminal.ansiWhite#A9B1D6
  • terminal.ansiYellow#E0AF68
  • terminal.background#16161E
  • terminal.foreground#A9B1D6
  • terminal.selectionBackground#364A82
  • titleBar.activeBackground#16161E
  • titleBar.activeForeground#A9B1D6
  • titleBar.border#101014
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block, comment.line, punctuation.definition.comment#414868italic
string, string.quoted, string.quoted.single, string.quoted.double, punctuation.definition.string#9ECE6A
constant.character.escape#9ECE6A
constant.numeric#E0AF68
constant.language#E0AF68italic
constant.character, constant.other#E0AF68
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#BB9AF7bold
keyword.other.tableextension.al, keyword.other.pageextension.al, keyword.other.reportextension.al, keyword.other.enumextension.al, keyword.other.interfaceextension.al, keyword.other.permissionsetextension.al#BB9AF7bold italic
entity.name.type.al, entity.name.class.al, entity.name.object.al#9ECE6Abold
entity.name.function.al, meta.function.al entity.name.function#7AA2F7bold
entity.name.function.trigger.al, entity.name.trigger.al, support.function.trigger.al#7DCFFFitalic
keyword.other.event.al, storage.type.event.al, keyword.other.eventsubscriber.al#7DCFFFbold italic
entity.name.field.al, variable.other.field.al#73DACA
support.type.property-name.al, entity.other.attribute-name.al#A9B1D6
variable.language.rec.al, variable.other.rec.al, variable.language.al#9ECE6Abold
support.type.al, storage.type.primitive.al#FF9E64
constant.other.enum.al, variable.other.enummember.al#E0AF68
storage.modifier.al, keyword.other.local.al#BB9AF7italic
keyword, keyword.control, keyword.other, storage.type, storage.modifier#BB9AF7
keyword.operator#89DDFF
keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.relational#89DDFF
punctuation#3B4261
variable.other#C0CAF5
variable.language.this#9ECE6A
variable.parameter#F7768E
entity.name.function, support.function.any-method, variable.function#7AA2F7bold
support.function#7AA2F7
entity.name.type, entity.name.class, support.class, entity.other.inherited-class#FF9E64
entity.other.attribute-name#A9B1D6
support.type.property-name.json#BB9AF7
entity.name.tag.yaml#BB9AF7
entity.name.tag#BB9AF7
entity.name.namespace, entity.name.module#FF9E64
invalid#F87171underline
markup.heading#BB9AF7bold
markup.underline.link#7AA2F7
markup.boldbold
markup.italicitalic