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#303841
  • activityBar.foreground#e6e6e6
  • activityBarBadge.background#2e3238cc
  • activityBarBadge.foreground#e6e6e6
  • badge.background#454b54
  • badge.foreground#e6e6e6
  • button.background#72787E
  • button.foreground#e6e6e6
  • button.hoverBackground#545B62
  • diffEditor.insertedTextBackground#a3ce9e40
  • diffEditor.removedTextBackground#ee6a6f40
  • dropdown.background#343d46
  • dropdown.listBackground#343d46
  • editor.background#303841
  • editor.findMatchBackground#cfebfd21
  • editor.findMatchHighlightBackground#cfebfd21
  • editor.findRangeHighlightBackground#cfebfd21
  • editor.foreground#d8dee9
  • editor.hoverHighlightBackground#cfebfd21
  • editor.inactiveSelectionBackground#4c5863ff
  • editor.lineHighlightBackground#303841
  • editor.lineHighlightBorder#303841
  • editor.rangeHighlightBackground#cfebfd21
  • editor.selectionBackground#4c5863
  • editor.selectionHighlightBackground#4c5863ff
  • editor.selectionHighlightBorder#647382
  • editor.wordHighlightBackground#00000000
  • editor.wordHighlightStrongBackground#00000000
  • editorCursor.foreground#f9ae58
  • editorError.border#00000000
  • editorError.foreground#ee6a6f
  • editorGroup.border#303841
  • editorGroup.dropBackground#303841
  • editorGroupHeader.noTabsBackground#303841
  • editorGroupHeader.tabsBackground#4f565e
  • editorGutter.addedBackground#a3ce9e
  • editorGutter.deletedBackground#ee6a6f
  • editorGutter.modifiedBackground#ebcb8b
  • editorIndentGuide.background#cfebfd21
  • editorInfo.foreground#a3ce9e
  • editorLineNumber.activeForeground#bfc5d0
  • editorLineNumber.foreground#848b95
  • editorOverviewRuler.addedForeground#a3ce9e
  • editorOverviewRuler.border#303841
  • editorOverviewRuler.bracketMatchForeground#cfebfd3d
  • editorOverviewRuler.currentContentForeground#cfebfd3d
  • editorOverviewRuler.deletedForeground#ee6a6f
  • editorOverviewRuler.errorForeground#ee6a6f
  • editorOverviewRuler.findMatchForeground#cfebfd3d
  • editorOverviewRuler.incomingContentForeground#cff4fd3d
  • editorOverviewRuler.infoForeground#cfebfd3d
  • editorOverviewRuler.modifiedForeground#ebcb8b
  • editorOverviewRuler.rangeHighlightForeground#cfebfd3d
  • editorOverviewRuler.selectionHighlightForeground#cfebfd3d
  • editorOverviewRuler.warningForeground#ebcb8b
  • editorOverviewRuler.wordHighlightForeground#cfebfd3d
  • editorOverviewRuler.wordHighlightStrongForeground#cfebfd3d
  • editorSuggestWidget.background#404954
  • editorWarning.border#00000000
  • editorWarning.foreground#fab763
  • editorWhitespace.foreground#cfebfd3d
  • editorWidget.background#404954
  • editorWidget.border#cfebfd3d
  • extensionButton.prominentBackground#454b54
  • extensionButton.prominentForeground#e6e6e6
  • extensionButton.prominentHoverBackground#454b5470
  • focusBorder#cfebfd3d
  • foreground#e6e6e6
  • gitDecoration.conflictingResourceForeground#ee6a6f
  • gitDecoration.deletedResourceForeground#ee6a6f
  • gitDecoration.modifiedResourceForeground#ebcb8b
  • gitDecoration.submoduleResourceForeground#ffffff70
  • gitDecoration.untrackedResourceForeground#ffffff70
  • input.background#343d46
  • input.border#cfebfd21
  • input.foreground#e6e6e6
  • input.placeholderForeground#ffffff70
  • list.activeSelectionBackground#cfebfd21
  • list.activeSelectionForeground#e6e6e6
  • list.dropBackground#cfebfd21
  • list.errorForeground#ee6a6f
  • list.focusBackground#cfebfd21
  • list.focusForeground#e6e6e6
  • list.highlightForeground#e6e6e6
  • list.hoverBackground#cfebfd14
  • list.hoverForeground#e6e6e6
  • list.inactiveSelectionBackground#cfebfd14
  • list.inactiveSelectionForeground#e6e6e6
  • list.warningForeground#fab763
  • menu.background#2b2a29
  • merge.currentContentBackground#fab76340
  • merge.currentHeaderBackground#fab76370
  • merge.incomingContentBackground#a3ce9e40
  • merge.incomingHeaderBackground#a3ce9e70
  • minimap.selectionHighlight#687785
  • minimapSlider.activeBackground#696c6f59
  • minimapSlider.background#696c6f59
  • minimapSlider.hoverBackground#696c6f59
  • notificationCenterHeader.background#23292e
  • notificationCenterHeader.foreground#e6e6e6
  • panel.background#454b54
  • panel.border#cfebfd21
  • panelTitle.activeBorder#e7e7e7
  • peekView.border#6699cc
  • peekViewEditor.background#23292e
  • peekViewEditor.matchHighlightBackground#cfebfd3d
  • peekViewEditorGutter.background#23292e
  • peekViewResult.background#343d46
  • peekViewTitle.background#23292e
  • pickerGroup.border#6699cc
  • pickerGroup.foreground#6699cc
  • progressBar.background#23292e
  • scrollbar.shadow#30384100
  • scrollbarSlider.activeBackground#bdc0c366
  • scrollbarSlider.background#61666d66
  • scrollbarSlider.hoverBackground#5c626bb3
  • selection.background#ffffff80
  • sideBar.background#303841
  • sideBar.foreground#EBEDEF
  • sideBarSectionHeader.background#303841
  • sideBarSectionHeader.foreground#EBEDEF
  • sideBarTitle.foreground#3A3A3A
  • statusBar.background#303841
  • statusBar.border#cfebfd00
  • statusBar.debuggingBackground#007acc
  • statusBar.debuggingForeground#e6e6e6
  • statusBar.foreground#e6e6e6
  • statusBar.noFolderBackground#303841
  • statusBar.noFolderForeground#e6e6e6
  • statusBarItem.activeBackground#cfebfd21
  • statusBarItem.hoverBackground#cfebfd14
  • statusBarItem.prominentBackground#cfebfd21
  • statusBarItem.prominentHoverBackground#cfebfd14
  • tab.activeBackground#303841
  • tab.activeBorder#303841
  • tab.activeBorderTop#303841
  • tab.activeForeground#e6e6e6
  • tab.border#414950
  • tab.hoverBackground#40474fe8
  • tab.inactiveBackground#4f565e80
  • tab.inactiveForeground#ffffff70
  • tab.unfocusedActiveBorder#303841
  • tab.unfocusedActiveBorderTop#4f565e
  • tab.unfocusedActiveForeground#ffffff70
  • tab.unfocusedInactiveForeground#ffffff70
  • terminal.ansiBlack#e6e6e6
  • terminal.ansiBlue#6699cc
  • terminal.ansiBrightBlack#e6e6e6
  • terminal.ansiBrightBlue#6699cc
  • terminal.ansiBrightCyan#6699cc
  • terminal.ansiBrightGreen#a3ce9e
  • terminal.ansiBrightMagenta#c594c5
  • terminal.ansiBrightRed#ee6a6f
  • terminal.ansiBrightYellow#fab763
  • terminal.ansiCyan#6699cc
  • terminal.ansiGreen#a3ce9e
  • terminal.ansiMagenta#c594c5
  • terminal.ansiRed#ee6a6f
  • terminal.ansiWhite#d8dee9
  • terminal.ansiYellow#fab763
  • terminal.background#454b54
  • terminal.selectionBackground#ffffff30
  • terminalCursor.background#ffffff30
  • terminalCursor.foreground#e6e6e6
  • textLink.activeForeground#6699cc
  • textLink.foreground#6699cc
  • textPreformat.foreground#6699cc
  • titleBar.activeBackground#303841
  • titleBar.activeForeground#e6e6e6
  • titleBar.inactiveBackground#303841
  • titleBar.inactiveForeground#7f7f7f
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A6ACB9
string.quoted.single, string.quoted.double#99C794
punctuation.definition#5FB4B4
constant.numeric#F9AE58
constant.language#f08288italic
constant.character, constant.other#C695C6
variable.member, variable.other.constant.property#f08288
keyword.operator.word, keyword.control, keyword.operator.new#C695C6
string.template, meta.template.expression, meta.embedded.line#99C794
variable.other.object.property#d8dee9
keyword.operator#fa977b
punctuation.separator, punctuation.terminator#A6ACB9
punctuation.section#d8dee9
punctuation.accessor#A6ACB9
punctuation.definition.annotation#5FB4B4
variable.other.dollar.only, variable.other.object.dollar.only, variable.type.dollar.only, support.class.dollar.only#5FB4B4
storage.data.table.abl#698ab5
meta.define.class.abl#698ab5
variable.other.abl#d7dade
string.double.complex.abl#a1aebf
source.abl#86B9EB
keyword.other.abl#ae95c6
storage.type.abl#f08288
entity.name.function.abl#86b9eb
meta.object-literal.key#6699CC
entity.other.inherited-class#5FB4B4italic underline
variable.parameter#F9C669
variable.language#f08288italic
entity.name.tag#f08288
entity.other.attribute-name#C594C5
variable.function, variable.annotation#6699CC
support.function, support.macro#6699CCitalic
support.constant#C594C5italic
support.type, support.class#86b9eb
support.type.object.moduleitalic
invalid#FFFFFF70
invalid.deprecated#d8dee9
entity.name.tag.yaml#5FB4B4
source.yaml string.unquoted#d8dee9
markup.headingbold
markup.heading punctuation.definition.heading#f08288
markup.heading.1 punctuation.definition.heading#f08288
string.other.link, markup.underline.link#6699CC
markup.boldbold
markup.italicitalic
markup.italic markup.bold | markup.bold markup.italicbold italic
punctuation.definition.thematic-break#FAB763
markup.list.numbered.bullet#A3CE9E
markup.quote punctuation.definition.blockquote, markup.list punctuation.definition.list_item#F9C669
(text punctuation.definition.italic | text punctuation.definition.bold)#C594C5
meta.diff, meta.diff.header#C594C5
markup.deleted#f08288
markup.inserted#99C794
markup.changed#EBCB8B
support.type.property-name#6796E6
constant.numeric.line-number.match#f08288
message.error#f08288
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6