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.activeBackground#2B3022
  • activityBar.background#161A11
  • activityBar.foreground#e21339
  • activityBar.inactiveForeground#960E27
  • activityBarBadge.background#e21339
  • activityBarBadge.foreground#FFFFFF
  • badge.background#2B3022
  • button.background#960E27
  • diffEditor.diagonalFill#2B3022
  • diffEditor.insertedTextBackground#69D4E230
  • diffEditor.removedTextBackground#91998530
  • dropdown.background#161A11
  • dropdown.listBackground#161A11
  • editor.background#161A11
  • editor.findMatchBackground#69D4E2B0
  • editor.findMatchHighlightBackground#69D4E280
  • editor.foldBackground#E0E2DF1B
  • editor.hoverHighlightBackground#E0E2DF1B
  • editor.lineHighlightBorder#2B3022
  • editor.selectionBackground#960E27B0
  • editor.selectionHighlightBackground#960E2780
  • editor.wordHighlightBackground#E0E2DF1B
  • editor.wordHighlightStrongBackground#E0E2DF1B
  • editorBracketMatch.background#960E271B
  • editorBracketMatch.border#e21339
  • editorCursor.foreground#E0E2DF
  • editorGroup.border#2B3022
  • editorGroup.dropBackground#2B302280
  • editorGroupHeader.noTabsBackground#2B3022
  • editorGroupHeader.tabsBackground#2B3022
  • editorGutter.addedBackground#69D4E2B0
  • editorGutter.deletedBackground#919985B0
  • editorGutter.modifiedBackground#E2C200B0
  • editorHoverWidget.background#161A11
  • editorHoverWidget.border#919985
  • editorHoverWidget.foreground#E0E2DF
  • editorHoverWidget.statusBarBackground#161A11
  • editorIndentGuide.activeBackground#919985
  • editorIndentGuide.background#404533
  • editorLineNumber.activeForeground#e21339
  • editorLineNumber.foreground#960E27
  • editorOverviewRuler.border#2B3022
  • editorOverviewRuler.bracketMatchForeground#e21339B0
  • editorOverviewRuler.findMatchForeground#69D4E2B0
  • editorOverviewRuler.rangeHighlightForeground#E0E2DFB0
  • editorOverviewRuler.selectionHighlightForeground#960E27B0
  • editorOverviewRuler.wordHighlightForeground#E0E2DFB0
  • editorOverviewRuler.wordHighlightStrongForeground#E0E2DFB0
  • editorSuggestWidget.background#161A11
  • editorSuggestWidget.border#919985
  • editorSuggestWidget.foreground#E0E2DF
  • editorSuggestWidget.highlightForeground#e21339
  • editorSuggestWidget.selectedBackground#960E27B0
  • editorWhitespace.foreground#404533
  • errorForeground#FF94A4
  • focusBorder#919985
  • foreground#E0E2DF
  • gitDecoration.addedResourceForeground#69D4E2
  • gitDecoration.conflictingResourceForeground#d1bae5
  • gitDecoration.deletedResourceForeground#919985
  • gitDecoration.ignoredResourceForeground#919985
  • gitDecoration.modifiedResourceForeground#E2C200
  • gitDecoration.stageDeletedResourceForeground#919985
  • gitDecoration.stageModifiedResourceForeground#E2C200
  • gitDecoration.untrackedResourceForeground#69D4E2
  • list.activeSelectionBackground#960E27B0
  • list.dropBackground#161A1180
  • list.focusBackground#960E27
  • list.hoverBackground#960E27
  • list.inactiveSelectionBackground#960E27B0
  • menu.border#919985
  • menu.separatorBackground#919985
  • merge.currentContentBackground#69D4E230
  • merge.currentHeaderBackground#69D4E268
  • merge.incomingContentBackground#d1bae530
  • merge.incomingHeaderBackground#d1bae568
  • minimap.background#2B3022
  • minimap.findMatchHighlight#69D4E2B0
  • minimap.selectionHighlight#960E27B0
  • minimapGutter.addedBackground#69D4E2B0
  • minimapGutter.modifiedBackground#E2C200B0
  • minimapSlider.activeBackground#960E27B0
  • minimapSlider.background#960E2780
  • minimapSlider.hoverBackground#960E2780
  • panel.background#2B3022
  • panel.border#2B3022
  • peekView.border#960E27
  • peekViewEditor.background#960E271B
  • peekViewResult.background#161A11
  • peekViewResult.selectionBackground#960E27B0
  • peekViewTitle.background#960E271B
  • peekViewTitleDescription.foreground#E0E2DF
  • peekViewTitleLabel.foreground#E0E2DF
  • pickerGroup.foreground#E0E2DF
  • quickInput.background#161A11
  • scrollbarSlider.activeBackground#960E27B0
  • scrollbarSlider.background#960E2768
  • scrollbarSlider.hoverBackground#960E2780
  • selection.background#960E27B0
  • settings.modifiedItemIndicator#960E27
  • sideBar.background#2B3022
  • sideBar.border#2B3022
  • sideBarSectionHeader.background#2B3022
  • statusBar.background#2B3022
  • statusBar.debuggingBackground#2B3022
  • statusBar.debuggingForeground#E0E2DF
  • statusBar.foreground#E0E2DF
  • statusBar.noFolderBackground#2B3022
  • tab.activeBackground#161A11
  • tab.activeForeground#E0E2DF
  • tab.border#2B3022
  • tab.inactiveBackground#2B3022
  • tab.inactiveForeground#E0E2DF
  • titleBar.activeBackground#960E27
  • titleBar.activeForeground#E0E2DF

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, variable.other.property, entity.name.scope-resolution, variable, meta.paragraph, entity.name.section#E5D7D8
entity.name.tag#E5D7D8
markup.italic, punctuation.definition.italic#E5D7D8italic
markup.bold, punctuation.definition.bold#E5D7D8bold
comment, punctuation.definition.comment#919985
punctuation, storage.modifier.pointer, storage.modifier.reference, meta.brace#E5D7D8
keyword.operator#E5D7D8
entity.name.function.operator#E5D7D8
variable.parameter, variable.other.enummember#E5D7D8
keyword, keyword.operator.cast, keyword.operator.delete, keyword.operator.new, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.alignas, constant.language, variable.language.this, entity.other.attribute, storage, meta.preprocessor, punctuation.definition.directive, entity.name.function.preprocessor, variable.language.special.self, variable.parameter.function.language.special.self, keyword.operator.expression.typeof, keyword.operator.expression.in, keyword.operator.expression.of#69D4E2
entity.name.type, support.type#ED755A
punctuation.definition.decorator#ED755A
entity.name.function, support.function#E2C200
constant.numeric, keyword.other.unit, keyword.other.unit.suffix, string, constant.character, constant.other, punctuation.definition.string, markup.inline.raw.string, punctuation.definition.raw#d1bae5
fenced_code.block.language, punctuation.definition.markdown#d1bae5
support.type.property-name, punctuation.support.type.property-name#E2C200
entity.name.section.markdown, punctuation.definition.heading, markup.heading.setext#E2C200
meta.separator#E5D7D8