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#1C1E26
  • activityBar.dropBackground#6C6F9366
  • activityBar.foreground#D5D8DACC
  • activityBarBadge.background#E95378
  • activityBarBadge.foreground#16161C
  • badge.background#2E303E
  • badge.foreground#D5D8DA
  • breadcrumbPicker.background#232530
  • button.background#2E303E
  • diffEditor.insertedTextBackground#09F7A01A
  • diffEditor.removedTextBackground#F43E5C1A
  • dropdown.background#232530
  • dropdown.listBackground#2E303E
  • editor.background#1C1E26
  • editor.findMatchBackground#6C6F9399
  • editor.findMatchHighlightBackground#6C6F9333
  • editor.findRangeHighlightBackground#6C6F931A
  • editor.hoverHighlightBackground#6C6F934D
  • editor.lineHighlightBackground#2E303E33
  • editor.rangeHighlightBackground#2E303E99
  • editor.selectionBackground#2E303EB3
  • editor.selectionHighlightBackground#6C6F9359
  • editor.wordHighlightBackground#6C6F9373
  • editor.wordHighlightStrongBackground#6C6F9373
  • editorBracketMatch.background#6C6F9366
  • editorBracketMatch.border#6C6F9300
  • editorCodeLens.foreground#6C6F9399
  • editorCursor.background#1C1E26
  • editorCursor.foreground#E95378
  • editorError.foreground#F43E5C
  • editorGroup.border#1A1C23
  • editorGroup.dropBackground#6C6F934D
  • editorGroupHeader.tabsBackground#1C1E26
  • editorGutter.addedBackground#09F7A0A6
  • editorGutter.deletedBackground#F43E5CB3
  • editorGutter.modifiedBackground#21BFC2B3
  • editorIndentGuide.activeBackground#2E303E
  • editorIndentGuide.background#2E303E99
  • editorLineNumber.activeForeground#D5D8DA73
  • editorLineNumber.foreground#D5D8DA1F
  • editorOverviewRuler.addedForeground#09f7a099
  • editorOverviewRuler.border#2E303EB3
  • editorOverviewRuler.bracketMatchForeground#D5D8DA66
  • editorOverviewRuler.deletedForeground#F43E5C99
  • editorOverviewRuler.errorForeground#F43E5CE6
  • editorOverviewRuler.findMatchForeground#6C6F93
  • editorOverviewRuler.modifiedForeground#21BFC299
  • editorOverviewRuler.warningForeground#27D79773
  • editorRuler.foreground#6C6F9333
  • editorSuggestWidget.highlightForeground#E95378
  • editorWarning.foreground#27D797CC
  • editorWidget.background#232530
  • editorWidget.border#232530
  • errorForeground#F43E5C
  • extensionButton.prominentBackground#E95378
  • extensionButton.prominentHoverBackground#E9436D
  • focusBorder#1A1C23
  • foreground#D5D8DA
  • gitDecoration.addedResourceForeground#27D797CC
  • gitDecoration.deletedResourceForeground#F43E5C
  • gitDecoration.ignoredResourceForeground#D5D8DA59
  • gitDecoration.modifiedResourceForeground#FAC39A
  • gitDecoration.untrackedResourceForeground#27D797
  • input.background#2E303E
  • inputOption.activeBorder#E9436D99
  • inputValidation.errorBackground#F43E5C80
  • inputValidation.errorBorder#F43E5C00
  • list.activeSelectionBackground#2E303E80
  • list.activeSelectionForeground#D5D8DA
  • list.dropBackground#6C6F9366
  • list.errorForeground#F43E5CE6
  • list.focusBackground#2E303E99
  • list.focusForeground#D5D8DA
  • list.highlightForeground#E95378
  • list.hoverBackground#2E303E99
  • list.hoverForeground#D5D8DA
  • list.inactiveFocusBackground#2E303E99
  • list.inactiveSelectionBackground#2E303E33
  • list.inactiveSelectionForeground#D5D8DA
  • list.warningForeground#27D797BF
  • panelTitle.activeBorder#E95378
  • peekView.border#1A1C23
  • peekViewEditor.background#232530
  • peekViewEditor.matchHighlightBackground#6C6F9399
  • peekViewResult.background#232530
  • peekViewResult.matchHighlightBackground#6C6F9399
  • peekViewResult.selectionBackground#2E303E80
  • peekViewTitle.background#232530
  • scrollbar.shadow#16161C
  • scrollbarSlider.activeBackground#6C6F9373
  • scrollbarSlider.background#6C6F931A
  • scrollbarSlider.hoverBackground#6C6F934D
  • selection.background#6C6F9380
  • sideBar.background#1C1E26
  • sideBar.dropBackground#6C6F934D
  • sideBar.foreground#D5D8DA99
  • sideBarSectionHeader.background#1C1E26
  • sideBarSectionHeader.foreground#D5D8DACC
  • statusBar.background#1C1E26
  • statusBar.debuggingBackground#FAB38E
  • statusBar.debuggingForeground#06060C
  • statusBar.foreground#D5D8DA80
  • statusBar.noFolderBackground#1C1E26
  • statusBarItem.hoverBackground#2E303E
  • statusBarItem.prominentBackground#2E303E
  • statusBarItem.prominentHoverBackground#6C6F93
  • tab.activeBorder#E95378
  • tab.border#1C1E2600
  • tab.inactiveBackground#1C1E26
  • terminal.ansiBlue#30AAD7
  • terminal.ansiBrightBlue#56C2EA
  • terminal.ansiBrightCyan#3CE8E6
  • terminal.ansiBrightGreen#0AF29D
  • terminal.ansiBrightMagenta#F360C4
  • terminal.ansiBrightRed#E06783
  • terminal.ansiBrightYellow#FAC39A
  • terminal.ansiCyan#1FDAD9
  • terminal.ansiGreen#14D386
  • terminal.ansiMagenta#E54EAF
  • terminal.ansiRed#E95478
  • terminal.ansiYellow#FAB795
  • terminal.foreground#D5D8DA
  • terminal.selectionBackground#6C6F934D
  • terminalCursor.background#D5D8DA
  • terminalCursor.foreground#6C6F9399
  • textLink.activeForeground#E9436D
  • textLink.foreground#E95378
  • titleBar.activeBackground#1C1E26
  • titleBar.inactiveBackground#1C1E26
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#D5D8DA66italic
string.quoted, string.template, punctuation.definition.string#FAB795E6
variable#E95678E6
variable.language#FAC29AE6italic
variable.parameteritalic
storage.type, storage.modifier#B877DBE6
constant#F09483E6
string.regexp#F09483E6
constant.numeric#F09483E6
constant.language#F09483E6
constant.character.escape#25B0BCE6
entity.name#FAC29AE6
entity.name.tag#E95678E6
punctuation.definition.tag#E95678A6
entity.other.attribute-name#F09483E6
entity.name.type#FAC29AE6
entity.other.inherited-class#FAB795E6
entity.name.function, variable.function#25B0BCE6
keyword#B877DBE6
keyword.control#B877DBE6
keyword.operator#BBBBBB
keyword.operator.new, keyword.operator.expression, keyword.operator.logical#B877DBE6
keyword.other.unit#F09483E6
support#FAC29AE6
support.function#25B0BCE6
support.variable#E95678E6
meta.object-literal.key, support.type.property-name#E95678E6
punctuation.separator.key-value#BBBBBB
punctuation.section.embedded#B877DBE6
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#B877DBE6
support.type.property-name.css#BBBBBB
constant.other.color#F09483E6
support.constant.font-name#F09483E6
entity.other.attribute-name.id#25B0BCE6
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#FAB795E6
support.function.misc.css#FAC29AE6
markup.heading, entity.name.section#E95678E6
markup.quote#BBBBBBCCitalic
beginning.punctuation.definition.list#E95678E6
markup.underline.link#FAB795E6
string.other.link.description#F09483E6
meta.function-call.generic.python#25B0BCE6
storage.type.cs#FAC29AE6
entity.name.variable.local.cs#E95678E6
entity.name.variable.field.cs, entity.name.variable.property.cs#E95678E6
source.cpp keyword.operator#B877DBE6