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#21252b
  • activityBar.border#282c34
  • activityBar.foreground#abb2bf
  • activityBar.inactiveForeground#59626f
  • activityBarBadge.background#2979ff
  • activityBarBadge.foreground#fffbf7
  • badge.background#2979ff
  • badge.foreground#fffbf7
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.background#282c34
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#c6c6c6
  • breadcrumbPicker.background#2f333d
  • button.background#2979ff
  • button.foreground#fffbf7
  • button.hoverBackground#2979ffcc
  • charts.blue#61aeef
  • charts.foreground#abb2bf
  • charts.green#98c379
  • charts.orange#d19a66
  • charts.purple#c679dd
  • charts.red#e06c75
  • charts.yellow#e5c17c
  • commandCenter.activeBackground#2c323c
  • commandCenter.activeForeground#fffbf7
  • commandCenter.background#21252b
  • commandCenter.border#3c4049
  • commandCenter.foreground#abb2bf
  • debugToolBar.background#21252b
  • debugToolBar.border#3c4049
  • descriptionForeground#9da5b4
  • diffEditor.diagonalFill#3a3f4b
  • diffEditor.insertedTextBackground#374b2c40
  • diffEditor.removedTextBackground#41454b40
  • dropdown.background#2c323c
  • dropdown.border#3c4049
  • dropdown.foreground#abb2bf
  • editor.background#282c34
  • editor.findMatchBackground#e5c17c40
  • editor.findMatchBorder#e5c17c80
  • editor.findMatchHighlightBackground#e5c17c20
  • editor.findRangeHighlightBackground#e5c17c10
  • editor.focusedStackFrameHighlightBackground#374b2c66
  • editor.foreground#abb2bf
  • editor.inactiveSelectionBackground#3e445180
  • editor.lineHighlightBackground#2c323c
  • editor.selectionBackground#3e4451
  • editor.stackFrameHighlightBackground#264b3366
  • editor.wordHighlightBackground#2979ff33
  • editor.wordHighlightBorder#00000000
  • editor.wordHighlightStrongBackground#2979ff4d
  • editor.wordHighlightStrongBorder#00000000
  • editorBracketHighlight.foreground1#abb2bf
  • editorBracketHighlight.foreground2#abb2bf
  • editorBracketHighlight.foreground3#abb2bf
  • editorBracketHighlight.foreground4#abb2bf
  • editorBracketHighlight.foreground5#abb2bf
  • editorBracketHighlight.foreground6#abb2bf
  • editorBracketHighlight.unexpectedBracket.foreground#ff6347
  • editorBracketMatch.background#3e445180
  • editorBracketMatch.border#61aeef
  • editorBracketPairGuide.activeBackground1#abb2bf30
  • editorBracketPairGuide.activeBackground2#abb2bf30
  • editorBracketPairGuide.activeBackground3#abb2bf30
  • editorBracketPairGuide.activeBackground4#abb2bf30
  • editorBracketPairGuide.activeBackground5#abb2bf30
  • editorBracketPairGuide.activeBackground6#abb2bf30
  • editorBracketPairGuide.background1#00000000
  • editorBracketPairGuide.background2#00000000
  • editorBracketPairGuide.background3#00000000
  • editorBracketPairGuide.background4#00000000
  • editorBracketPairGuide.background5#00000000
  • editorBracketPairGuide.background6#00000000
  • editorCodeLens.foreground#59626f
  • editorCursor.foreground#557ecf
  • editorError.foreground#e06c75
  • editorFoldBackground#282a36
  • editorGhostText.background#282c3400
  • editorGhostText.foreground#59626f
  • editorGroup.border#3c4049
  • editorGroup.emptyBackground#282c34
  • editorGroupHeader.border#282c34
  • editorGroupHeader.noTabsBackground#21252b
  • editorGroupHeader.tabsBackground#21252b
  • editorGutter.addedBackground#91b859
  • editorGutter.background#282c34
  • editorGutter.deletedBackground#f07178
  • editorGutter.modifiedBackground#61aeef
  • editorHint.foreground#98c379
  • editorIndentGuide.activeBackground#57b6c2
  • editorIndentGuide.background#3c4049
  • editorInfo.foreground#61aeef
  • editorInlayHint.background#21252b
  • editorInlayHint.foreground#979fad
  • editorLineNumber.activeForeground#c6c6c6
  • editorLineNumber.foreground#636d83
  • editorOverviewRuler.addedForeground#91b859
  • editorOverviewRuler.deletedForeground#f07178
  • editorOverviewRuler.errorForeground#e06c75
  • editorOverviewRuler.modifiedForeground#61aeef
  • editorOverviewRuler.warningForeground#f49810
  • editorRuler.foreground#3c4049
  • editorStickyScroll.background#21252b
  • editorStickyScrollHover.background#2c323c
  • editorSuggestWidget.background#2f333d
  • editorSuggestWidget.border#3c4049
  • editorSuggestWidget.focusHighlightForeground#2979ff
  • editorSuggestWidget.foreground#abb2bf
  • editorSuggestWidget.highlightForeground#2979ff
  • editorSuggestWidget.selectedBackground#3e4451
  • editorSuggestWidget.selectedForeground#fffbf7
  • editorSuggestWidgetStatus.foreground#59626f
  • editorWarning.foreground#f49810
  • editorWhitespace.foreground#2e3c43
  • errorForeground#e06c75
  • focusBorder#2979ff
  • foreground#abb2bf
  • gitDecoration.addedResourceForeground#91b859
  • gitDecoration.conflictingResourceForeground#ff6347
  • gitDecoration.deletedResourceForeground#59626f
  • gitDecoration.ignoredResourceForeground#9da5b4
  • gitDecoration.modifiedResourceForeground#e2c08d
  • gitDecoration.renamedResourceForeground#c679dd
  • gitDecoration.untrackedResourceForeground#91b859
  • input.background#2c323c
  • input.border#3c4049
  • input.foreground#abb2bf
  • input.placeholderForeground#59626f
  • inputOption.activeBackground#2979ff30
  • inputOption.activeBorder#2979ff
  • inputValidation.errorBackground#4b1515
  • inputValidation.errorBorder#e06c75
  • keybindingLabel.background#3a3f4b
  • keybindingLabel.border#3c4049
  • keybindingLabel.bottomBorder#3c4049
  • keybindingLabel.foreground#abb2bf
  • list.activeSelectionBackground#3e4451
  • list.activeSelectionForeground#fffbf7
  • list.deemphasizedForeground#9da5b4
  • list.errorForeground#e06c75
  • list.focusBackground#3e4451
  • list.focusForeground#fffbf7
  • list.highlightForeground#2979ff
  • list.hoverBackground#2c323c
  • list.hoverForeground#abb2bf
  • list.inactiveSelectionBackground#3c4049
  • list.inactiveSelectionForeground#abb2bf
  • list.warningForeground#f49810
  • menu.background#2f333d
  • menu.foreground#abb2bf
  • menu.selectionBackground#3e4451
  • menu.selectionForeground#fffbf7
  • menu.separatorBackground#3c4049
  • menubar.selectionBackground#3e4451
  • menubar.selectionForeground#fffbf7
  • minimap.errorHighlight#e06c75
  • minimap.findMatchHighlight#e5c17c80
  • minimap.selectionHighlight#3e4451
  • minimap.warningHighlight#f49810
  • minimapSlider.activeBackground#2979ff
  • minimapSlider.background#2979ff40
  • minimapSlider.hoverBackground#2979ff80
  • notificationLink.foreground#2979ff
  • notifications.background#282c34
  • notifications.foreground#abb2bf
  • notificationsErrorIcon.foreground#e06c75
  • notificationsInfoIcon.foreground#61aeef
  • notificationsWarningIcon.foreground#f49810
  • panel.background#282c34
  • panel.border#3c4049
  • panelTitle.activeBorder#2979ff
  • panelTitle.activeForeground#abb2bf
  • panelTitle.inactiveForeground#59626f
  • peekView.border#2979ff
  • peekViewEditor.background#21252b
  • peekViewEditor.matchHighlightBackground#e5c17c33
  • peekViewResult.background#21252b
  • peekViewResult.fileForeground#abb2bf
  • peekViewResult.lineForeground#59626f
  • peekViewResult.matchHighlightBackground#e5c17c26
  • peekViewResult.selectionBackground#3e4451
  • peekViewResult.selectionForeground#fffbf7
  • peekViewTitle.background#282c34
  • peekViewTitleDescription.foreground#59626f
  • peekViewTitleLabel.foreground#abb2bf
  • picker.background#2f333d
  • progressBar.background#2979ff
  • quickInput.background#2f333d
  • quickInput.foreground#abb2bf
  • quickInputList.focusBackground#3e4451
  • scrollbar.shadow#00000066
  • scrollbarSlider.activeBackground#2979ff
  • scrollbarSlider.background#2979ff80
  • scrollbarSlider.hoverBackground#2979ffc0
  • selection.background#3e4451
  • sideBar.background#21252b
  • sideBar.border#282c34
  • sideBar.foreground#abb2bf
  • sideBarSectionHeader.background#282c34
  • sideBarSectionHeader.foreground#abb2bf
  • sideBarTitle.foreground#979fad
  • statusBar.background#21252b
  • statusBar.border#282c34
  • statusBar.debuggingBackground#e06c75
  • statusBar.debuggingForeground#fffbf7
  • statusBar.foreground#abb2bf
  • statusBar.noFolderBackground#282c34
  • statusBarItem.activeBackground#2979ff60
  • statusBarItem.hoverBackground#2979ff40
  • tab.activeBackground#282c34
  • tab.activeBorderTop#2979ff
  • tab.activeForeground#abb2bf
  • tab.border#282c34
  • tab.hoverBackground#2c323c
  • tab.inactiveBackground#21252b
  • tab.inactiveForeground#7a8290
  • tab.unfocusedActiveBorderTop#2979ffc0
  • terminal.ansiBlack#282c34
  • terminal.ansiBlue#61aeef
  • terminal.ansiBrightBlack#59626f
  • terminal.ansiBrightBlue#61aeef
  • terminal.ansiBrightCyan#57b6c2
  • terminal.ansiBrightGreen#98c379
  • terminal.ansiBrightMagenta#c679dd
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#f8f8f0
  • terminal.ansiBrightYellow#e5c17c
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c679dd
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#abb2bf
  • terminal.ansiYellow#e5c17c
  • terminal.background#282c34
  • terminal.foreground#abb2bf
  • terminal.selectionBackground#3e4451
  • terminalCommandDecoration.defaultBackground#59626f
  • terminalCommandDecoration.errorBackground#e06c75
  • terminalCommandDecoration.successBackground#98c379
  • terminalCursor.foreground#557ecf
  • titleBar.activeBackground#21252b
  • titleBar.activeForeground#abb2bf
  • titleBar.inactiveBackground#282c34
  • titleBar.inactiveForeground#59626f
  • tooltip.background#3a3f4b
  • tooltip.foreground#abb2bf
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#59626fitalic
comment.block.documentation, comment.line.documentation#59626fitalic
keyword.other.documentation, storage.type.annotation, punctuation.definition.annotation#c679ddbold italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage, storage.type, storage.modifier#c679dditalic
string, string.quoted, string.template#98c379
string.quoted.docstring.multi.python, string.quoted.docstring.raw.multi.python#7f848eitalic
constant.character.escape, string.regexp#98c379
constant.numeric, constant.other.color#d19a66
constant, constant.language, variable.language.this, variable.language.self#c679dd
entity.name.type, entity.name.class#e5c17c
support.class, support.class.builtin#61aeefitalic
entity.other.inherited-class#98c379italic
entity.name.type.class, entity.name.namespace, meta.type-alias entity.name.type#abb2bf
support.type#61aeefitalic
entity.name.function, support.function, meta.function-call entity.name.function#61aeef
entity.name.function.static, meta.static entity.name.function#61aeefitalic
variable.parameter, meta.function.parameters variable#abb2bf
variable, variable.other.readwrite#d19a66
variable.other.property, variable.other.object.property, support.variable.property, variable.other.member#e06c75
variable.other.static, variable.other.constant#e06c75italic
variable.other.global#d19a66
entity.name.function.decorator, meta.decorator, punctuation.decorator#61aeef
keyword.operator#61aeef
punctuation, meta.brace, punctuation.definition.block, punctuation.definition.parameters, punctuation.separator.delimiter#a6b2c0
entity.name.tag, meta.tag#f07178
entity.other.attribute-name, meta.tag.attributes entity.other.attribute-name#e5c17citalic
meta.attribute string#98c379
support.type.property-name.css, meta.property-name#57b6c2
support.constant.property-value.css, meta.property-value#d19a66
entity.name.tag.css#f07178
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#e5c17c
keyword.other.important.css, keyword.other.unit.css#c679dditalic
constant.other.color.rgb-value.css#ffea7d
support.function.transform.css, support.function.misc.css#61aeef
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#eeffff
invalid, invalid.illegal#e06c75
invalid.deprecated#59626f
keyword.control.import, keyword.control.export, keyword.other.import#c679dditalic
entity.name.module, support.module#e5c17c
support.type.property-name.json#e06c75
string.quoted.double.json, string.quoted.single.json#98c379
markup.heading, entity.name.section#61aeefbold
markup.bold#abb2bfbold
markup.italic#abb2bfitalic
markup.inline.raw, markup.fenced_code.block#98c379
markup.underline.link, string.other.link#56b6c2
markup.quote#59626fitalic
markup.inserted#98c379
markup.deleted#e06c75
markup.changed#61aeef
variable.language.special.self.python, variable.language.special.cls.python#e06c75italic
support.function.builtin.python#61aeef
support.function.magic.python#61aeefitalic
meta.object-literal.key, meta.objectliteral string#e06c75
variable.language.this.js, variable.language.this.ts#e06c75italic
meta.type.annotation, meta.return.type, meta.type.parameters#c679dd
support.function.builtin.shell, entity.name.function.shell#4babb8italic
string.regexp#98c379
keyword.control.anchor.regexp, punctuation.definition.group.regexp, keyword.operator.quantifier.regexp#61aeef