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#08090A
  • activityBar.dropBackground#6C6F9380
  • activityBar.foreground#D5D8DAB3
  • activityBarBadge.background#7168D3
  • activityBarBadge.foreground#06060C
  • badge.background#2E303E
  • badge.foreground#D5D8DA
  • breadcrumbPicker.background#232530
  • button.background#2E303E
  • debugToolBar.background#050505
  • diffEditor.insertedTextBackground#09F7A01A
  • diffEditor.removedTextBackground#F43E5C1A
  • dropdown.background#1b1c25
  • dropdown.listBackground#2E303E
  • editor.background#050505
  • editor.findMatchBackground#6C6F9380
  • editor.findMatchHighlightBackground#6C6F934D
  • editor.findRangeHighlightBackground#6C6F931A
  • editor.hoverHighlightBackground#6C6F934D
  • editor.lineHighlightBackground#2E303E4D
  • editor.rangeHighlightBackground#2E303E80
  • editor.selectionBackground#2E303EB3
  • editor.selectionHighlightBackground#6C6F934D
  • editor.wordHighlightBackground#6C6F9380
  • editor.wordHighlightStrongBackground#6C6F9380
  • editorBracketMatch.background#6C6F9380
  • editorBracketMatch.border#6C6F9300
  • editorCodeLens.foreground#6C6F9380
  • editorCursor.background#050505
  • editorCursor.foreground#7168D3
  • editorError.foreground#F43E5C
  • editorGroup.border#22252e
  • editorGroup.dropBackground#6C6F934D
  • editorGroupHeader.tabsBackground#050505
  • editorGutter.addedBackground#09F7A0B3
  • editorGutter.deletedBackground#F43E5CB3
  • editorGutter.modifiedBackground#21BFC2B3
  • editorIndentGuide.activeBackground#2E303E
  • editorIndentGuide.background#2E303E80
  • editorLineNumber.activeForeground#D5D8DA80
  • editorLineNumber.foreground#D5D8DA1A
  • editorOverviewRuler.addedForeground#09F7A080
  • editorOverviewRuler.border#2E303EB3
  • editorOverviewRuler.bracketMatchForeground#D5D8DA80
  • editorOverviewRuler.deletedForeground#F43E5C80
  • editorOverviewRuler.errorForeground#F43E5CE6
  • editorOverviewRuler.findMatchForeground#6C6F93
  • editorOverviewRuler.modifiedForeground#21BFC280
  • editorOverviewRuler.warningForeground#27D79780
  • editorRuler.foreground#6C6F934D
  • editorSuggestWidget.highlightForeground#7168D3
  • editorWarning.foreground#27D797B3
  • editorWidget.background#1b1c25
  • editorWidget.border#1b1c25
  • errorForeground#F43E5C
  • extensionButton.prominentBackground#7168D3
  • extensionButton.prominentHoverBackground#E9436D
  • focusBorder#22252e
  • foreground#D5D8DA
  • gitDecoration.addedResourceForeground#27D797B3
  • gitDecoration.deletedResourceForeground#F43E5C
  • gitDecoration.ignoredResourceForeground#D5D8DA4D
  • gitDecoration.modifiedResourceForeground#E07267
  • gitDecoration.untrackedResourceForeground#27D797
  • input.background#2E303E
  • inputOption.activeBorder#E9436D80
  • inputValidation.errorBackground#F43E5C80
  • inputValidation.errorBorder#F43E5C00
  • list.activeSelectionBackground#2E303E80
  • list.activeSelectionForeground#D5D8DA
  • list.dropBackground#6C6F9380
  • list.errorForeground#F43E5CE6
  • list.focusBackground#2E303E80
  • list.focusForeground#D5D8DA
  • list.highlightForeground#7168D3
  • list.hoverBackground#7168D380
  • list.hoverForeground#D5D8DA
  • list.inactiveFocusBackground#2E303E80
  • list.inactiveSelectionBackground#2E303E4D
  • list.inactiveSelectionForeground#D5D8DA
  • list.warningForeground#27D797B3
  • notifications.background#14151B
  • panelTitle.activeBorder#7168D3
  • peekView.border#1A1C23
  • peekViewEditor.background#1b1c25
  • peekViewEditor.matchHighlightBackground#6C6F9380
  • peekViewResult.background#1b1c25
  • peekViewResult.matchHighlightBackground#6C6F9380
  • peekViewResult.selectionBackground#2E303E80
  • peekViewTitle.background#1b1c25
  • pickerGroup.foreground#7168D3E6
  • progressBar.background#7168D3
  • scrollbar.shadow#16161C
  • scrollbarSlider.activeBackground#6C6F9380
  • scrollbarSlider.background#6C6F931A
  • scrollbarSlider.hoverBackground#7168D34D
  • selection.background#6C6F9380
  • sideBar.background#08090A
  • sideBar.dropBackground#6C6F934D
  • sideBar.foreground#D5D8DA80
  • sideBarSectionHeader.background#08090A
  • sideBarSectionHeader.foreground#D5D8DAB3
  • statusBar.background#050505
  • statusBar.debuggingBackground#E07267
  • statusBar.debuggingForeground#06060C
  • statusBar.foreground#D5D8DA80
  • statusBar.noFolderBackground#050505
  • statusBarItem.hoverBackground#2E303E
  • statusBarItem.prominentBackground#2E303E
  • statusBarItem.prominentHoverBackground#6C6F93
  • tab.activeBorder#7168D3
  • tab.border#1C1E2600
  • tab.inactiveBackground#050505
  • terminal.ansiBlue#26BBD9
  • terminal.ansiBrightBlue#3FC4DE
  • terminal.ansiBrightCyan#6BE4E6
  • terminal.ansiBrightGreen#3FDAA4
  • terminal.ansiBrightMagenta#F075B5
  • terminal.ansiBrightRed#EC6A88
  • terminal.ansiBrightYellow#FBC3A7
  • terminal.ansiCyan#59E1E3
  • terminal.ansiGreen#29D398
  • terminal.ansiMagenta#EE64AC
  • terminal.ansiRed#E95678
  • terminal.ansiYellow#FAB795
  • terminal.foreground#D5D8DA
  • terminal.selectionBackground#6C6F934D
  • terminalCursor.background#D5D8DA
  • terminalCursor.foreground#6C6F9380
  • textLink.activeForeground#E9436D
  • textLink.foreground#7168D3
  • titleBar.activeBackground#050505
  • titleBar.inactiveBackground#050505
  • walkThrough.embeddedEditorBackground#1b1c25
  • widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6b6b6bitalic
constant#cfbe9a
constant.numeric#bb4541
constant.character.escape#55a385
entity.name#FAC29AE6
entity.name.function#55a385
entity.name.tag#d8c9c9e6normal
entity.name.type, storage.type.cs#FAC29AE6
entity.other.attribute-name#cfbe9aitalic
entity.other.inherited-class#da9188
entity.other.attribute-name.id#55a385
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#da9188
entity.name.variable, variable#d8c9c9e6
keyword#918bceitalic
keyword.operator#BBBBBB
keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.delete#918bce
keyword.other.unit#cfbe9a
markup.quote#FAB795B3italic
markup.heading, entity.name.section#d8c9c9e6
markup.bold#918bcebold
markup.italic#55a385italic
markup.inline.raw, markup.fenced_code.block#cfbe9a
markup.underline.link#da9188
storage#918bceitalic
string.quoted, string.template#da9188
string.regexp#cfbe9a
string.other.link#cfbe9a
support#E9C9A7E6
support.function#55a385
support.variable#d8c9c9e6
support.type.property-name, meta.object-literal.key#d8c9c9e6
support.type.property-name.css#BBBBBB
variable.language#FAC29AE6italic
variable.parameteritalic
string.template meta.embedded#BBBBBB
punctuation.definition.tag#E95678B3normal
punctuation.separator#BBBBBB
punctuation.definition.template-expression#918bce
punctuation.section.embedded#918bce
punctuation.definition.list#cfbe9a