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.activeBorder#61afef
  • activityBar.background#1b1e25
  • activityBar.border#1b1e25
  • activityBar.foreground#abb2bf
  • activityBar.inactiveForeground#535c6c
  • activityBarBadge.background#61afef
  • activityBarBadge.foreground#1b1e25
  • badge.background#61afef
  • badge.foreground#1b1e25
  • breadcrumb.activeSelectionForeground#abb2bf
  • breadcrumb.focusForeground#abb2bf
  • breadcrumb.foreground#5B6270
  • breadcrumbPicker.background#22252e
  • button.background#61afef
  • button.foreground#1b1e25
  • button.hoverBackground#74baf2
  • button.secondaryBackground#434957
  • button.secondaryForeground#abb2bf
  • button.secondaryHoverBackground#535c6c
  • chat.requestBubbleBackground#2A2E3C
  • chat.requestBubbleHoverBackground#333847
  • debugConsole.errorForeground#e06c75
  • debugConsole.infoForeground#61afef
  • debugConsole.warningForeground#e5c07b
  • debugExceptionWidget.background#22252e
  • debugExceptionWidget.border#e06c75
  • debugToolBar.background#22252e
  • descriptionForeground#ADB4BF
  • diffEditor.diagonalFill#383d48
  • diffEditor.insertedTextBackground#98c37928
  • diffEditor.removedTextBackground#e06c7528
  • dropdown.background#22252e
  • dropdown.border#383d48
  • dropdown.foreground#abb2bf
  • dropdown.listBackground#22252e
  • editor.background#1b1e25
  • editor.findMatchBackground#98C37960
  • editor.findMatchHighlightBackground#98C37940
  • editor.findRangeHighlightBackground#33384266
  • editor.foldBackground#33384230
  • editor.foreground#abb2bf
  • editor.hoverHighlightBackground#61AFEF20
  • editor.inactiveSelectionBackground#5E6C8E66
  • editor.lineHighlightBackground#272b34
  • editor.lineHighlightBorder#272b34
  • editor.rangeHighlightBackground#22262eCC
  • editor.selectionBackground#5E6C8E
  • editor.selectionHighlightBackground#61AFEF30
  • editor.wordHighlightBackground#61AFEF48
  • editor.wordHighlightStrongBackground#C678DD48
  • editorBracketHighlight.foreground1#E8C870
  • editorBracketHighlight.foreground2#50D0A8
  • editorBracketHighlight.foreground3#B87858
  • editorBracketHighlight.foreground4#A4E068
  • editorBracketHighlight.foreground5#F0C4CC
  • editorBracketHighlight.foreground6#B4D0E8
  • editorBracketHighlight.unexpectedBracket.foreground#e06c75
  • editorBracketMatch.background#61AFEF30
  • editorBracketMatch.border#535c6c
  • editorCodeLens.foreground#717987
  • editorCursor.foreground#abb2bf
  • editorError.foreground#e06c75
  • editorGhostText.foreground#535c6c
  • editorGroup.border#1b1e25
  • editorGroup.dropBackground#3e445144
  • editorGroupHeader.noTabsBackground#1b1e25
  • editorGroupHeader.tabsBackground#1b1e25
  • editorGroupHeader.tabsBorder#1b1e25
  • editorGutter.addedBackground#98c379
  • editorGutter.deletedBackground#e06c75
  • editorGutter.foldingControlForeground#5B6270
  • editorGutter.modifiedBackground#61afef
  • editorHoverWidget.background#22252e
  • editorHoverWidget.border#383d48
  • editorHoverWidget.foreground#abb2bf
  • editorIndentGuide.activeBackground1#535c6c
  • editorIndentGuide.background1#383d48
  • editorInfo.foreground#61afef
  • editorInlayHint.background#33384280
  • editorInlayHint.foreground#5B6270
  • editorInlayHint.parameterBackground#33384280
  • editorInlayHint.parameterForeground#5B6270
  • editorInlayHint.typeBackground#33384280
  • editorInlayHint.typeForeground#5B6270
  • editorLightBulb.foreground#e5c07b
  • editorLightBulbAutoFix.foreground#61afef
  • editorLineNumber.activeForeground#7a818e
  • editorLineNumber.foreground#434957
  • editorOverviewRuler.border#1b1e25
  • editorOverviewRuler.currentContentForeground#98c379
  • editorOverviewRuler.errorForeground#e06c75
  • editorOverviewRuler.findMatchForeground#d19a6680
  • editorOverviewRuler.incomingContentForeground#61afef
  • editorOverviewRuler.infoForeground#61afef
  • editorOverviewRuler.warningForeground#e5c07b
  • editorRuler.foreground#383d48
  • editorStickyScroll.background#1b1e25
  • editorStickyScrollHover.background#272b34
  • editorSuggestWidget.background#22252e
  • editorSuggestWidget.border#383d48
  • editorSuggestWidget.foreground#abb2bf
  • editorSuggestWidget.highlightForeground#61afef
  • editorSuggestWidget.selectedBackground#5E6C8E
  • editorSuggestWidget.selectedForeground#D0D6E0
  • editorWarning.foreground#e5c07b
  • editorWhitespace.foreground#3e445180
  • editorWidget.background#22252e
  • editorWidget.border#383d48
  • editorWidget.foreground#abb2bf
  • errorForeground#e06c75
  • extensionBadge.remoteBackground#61afef
  • extensionBadge.remoteForeground#1b1e25
  • extensionButton.prominentBackground#61afef
  • extensionButton.prominentForeground#1b1e25
  • extensionButton.prominentHoverBackground#74baf2
  • focusBorder#61afef
  • foreground#abb2bf
  • gitDecoration.addedResourceForeground#98c379
  • gitDecoration.conflictingResourceForeground#e06c75
  • gitDecoration.deletedResourceForeground#5B6270
  • gitDecoration.ignoredResourceForeground#535c6c
  • gitDecoration.modifiedResourceForeground#61afef
  • gitDecoration.stageDeletedResourceForeground#5B6270
  • gitDecoration.stageModifiedResourceForeground#61afef
  • gitDecoration.untrackedResourceForeground#98c379
  • icon.foreground#ADB4BF
  • input.background#383d48
  • input.border#434957
  • input.foreground#abb2bf
  • input.placeholderForeground#535c6c
  • inputOption.activeBackground#61afef44
  • inputOption.activeBorder#61afef
  • inputValidation.errorBackground#22252e
  • inputValidation.errorBorder#e06c75
  • inputValidation.infoBackground#22252e
  • inputValidation.infoBorder#61afef
  • inputValidation.warningBackground#22252e
  • inputValidation.warningBorder#e5c07b
  • list.activeSelectionBackground#5E6C8E
  • list.activeSelectionForeground#D0D6E0
  • list.errorForeground#e06c75
  • list.focusBackground#5E6C8E
  • list.focusForeground#D0D6E0
  • list.highlightForeground#61afef
  • list.hoverBackground#1d202880
  • list.hoverForeground#abb2bf
  • list.inactiveSelectionBackground#5E6C8E66
  • list.inactiveSelectionForeground#C0C7D3
  • list.invalidItemForeground#e06c75
  • list.warningForeground#e5c07b
  • merge.border#1b1e25
  • merge.currentContentBackground#98c37930
  • merge.currentHeaderBackground#98c37944
  • merge.incomingContentBackground#61afef30
  • merge.incomingHeaderBackground#61afef44
  • minimap.errorHighlight#e06c75
  • minimap.findMatchHighlight#98C37980
  • minimap.selectionHighlight#61AFEFBB
  • minimap.warningHighlight#e5c07b
  • minimapGutter.addedBackground#98c379
  • minimapGutter.deletedBackground#e06c75
  • minimapGutter.modifiedBackground#61afef
  • minimapSlider.activeBackground#3e445160
  • minimapSlider.background#3e445120
  • minimapSlider.hoverBackground#3e445140
  • notificationCenter.border#383d48
  • notificationCenterHeader.background#22252e
  • notificationCenterHeader.foreground#abb2bf
  • notificationLink.foreground#61afef
  • notifications.background#383d48
  • notifications.border#434957
  • notifications.foreground#abb2bf
  • notificationsErrorIcon.foreground#e06c75
  • notificationsInfoIcon.foreground#61afef
  • notificationsWarningIcon.foreground#e5c07b
  • panel.background#1b1e25
  • panel.border#383d48
  • panelTitle.activeBorder#61afef
  • panelTitle.activeForeground#abb2bf
  • panelTitle.inactiveForeground#535c6c
  • peekView.border#61afef
  • peekViewEditor.background#1b1e25
  • peekViewEditor.matchHighlightBackground#98C37950
  • peekViewEditorGutter.background#1b1e25
  • peekViewResult.background#22252e
  • peekViewResult.fileForeground#abb2bf
  • peekViewResult.lineForeground#7a818e
  • peekViewResult.matchHighlightBackground#98C37950
  • peekViewResult.selectionBackground#5E6C8E
  • peekViewResult.selectionForeground#D0D6E0
  • peekViewTitle.background#22252e
  • peekViewTitleDescription.foreground#5B6270
  • peekViewTitleLabel.foreground#abb2bf
  • progressBar.background#61afef
  • quickInput.background#22252e
  • quickInput.foreground#abb2bf
  • quickInputList.focusBackground#5E6C8E
  • quickInputList.focusForeground#D0D6E0
  • quickInputTitle.background#22252e
  • sash.hoverBorder#61afef
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#566279BB
  • scrollbarSlider.background#56627966
  • scrollbarSlider.hoverBackground#56627999
  • selection.background#5E6C8E
  • settings.focusedRowBackground#1d202880
  • settings.headerForeground#abb2bf
  • settings.modifiedItemIndicator#61afef
  • sideBar.background#22252e
  • sideBar.border#1b1e25
  • sideBar.foreground#abb2bf
  • sideBarSectionHeader.background#2A2E39
  • sideBarSectionHeader.border#1b1e25
  • sideBarSectionHeader.foreground#B7BECA
  • sideBarTitle.foreground#B7BECA
  • statusBar.background#1b1e25
  • statusBar.border#1b1e25
  • statusBar.debuggingBackground#e06c75
  • statusBar.debuggingForeground#1b1e25
  • statusBar.foreground#7a818e
  • statusBar.noFolderBackground#1b1e25
  • statusBar.noFolderForeground#7a818e
  • statusBarItem.hoverBackground#383d48
  • statusBarItem.prominentBackground#61afef
  • statusBarItem.prominentForeground#1b1e25
  • statusBarItem.remoteBackground#61afef
  • statusBarItem.remoteForeground#1b1e25
  • tab.activeBackground#1b1e25
  • tab.activeBorderTop#61afef
  • tab.activeForeground#abb2bf
  • tab.border#1b1e25
  • tab.hoverBackground#22252e
  • tab.inactiveBackground#1b1e25
  • tab.inactiveForeground#5B6270
  • tab.lastPinnedBorder#383d48
  • tab.unfocusedActiveBackground#1b1e25
  • tab.unfocusedActiveForeground#5B6270
  • tab.unfocusedInactiveBackground#1b1e25
  • tab.unfocusedInactiveForeground#535c6c
  • terminal.ansiBlack#1b1e25
  • terminal.ansiBlue#61afef
  • terminal.ansiBrightBlack#5E6575
  • terminal.ansiBrightBlue#74baf2
  • terminal.ansiBrightCyan#6ac4cf
  • terminal.ansiBrightGreen#a9d18a
  • terminal.ansiBrightMagenta#d48be8
  • terminal.ansiBrightRed#e88389
  • terminal.ansiBrightWhite#c8cdd5
  • terminal.ansiBrightYellow#edce8e
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#98c379
  • terminal.ansiMagenta#c678dd
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#abb2bf
  • terminal.ansiYellow#e5c07b
  • terminal.background#1b1e25
  • terminal.border#22252E
  • terminal.dropBackground#61afef20
  • terminal.findMatchBackground#98c37960
  • terminal.findMatchBorder#98c379CC
  • terminal.findMatchHighlightBackground#98c37940
  • terminal.foreground#abb2bf
  • terminal.hoverHighlightBackground#61afef20
  • terminal.inactiveSelectionBackground#5E6C8E66
  • terminal.initialHintForeground#5E6575
  • terminal.selectionBackground#5E6C8E
  • terminal.tab.activeBorder#61afef
  • terminalCommandDecoration.defaultBackground#5E6575
  • terminalCommandDecoration.errorBackground#e06c75
  • terminalCommandDecoration.successBackground#98c379
  • terminalCommandGuide.foreground#5E657540
  • terminalCursor.background#1b1e25
  • terminalCursor.foreground#abb2bf
  • terminalOverviewRuler.cursorForeground#61afefBB
  • terminalOverviewRuler.findMatchForeground#98c37980
  • terminalStickyScroll.background#22252E
  • terminalStickyScrollHover.background#282B34
  • testing.iconErrored#e06c75
  • testing.iconFailed#e06c75
  • testing.iconPassed#98c379
  • testing.iconQueued#e5c07b
  • testing.iconSkipped#5B6270
  • testing.iconUnset#5B6270
  • textBlockQuote.background#22252e
  • textBlockQuote.border#61afef
  • textCodeBlock.background#383d48
  • textLink.activeForeground#74baf2
  • textLink.foreground#61afef
  • textPreformat.foreground#D19A66
  • titleBar.activeBackground#1b1e25
  • titleBar.activeForeground#abb2bf
  • titleBar.border#1b1e25
  • titleBar.inactiveBackground#1b1e25
  • titleBar.inactiveForeground#535c6c
  • tree.indentGuidesStroke#383d48
  • walkThrough.embeddedEditorBackground#1b1e25
  • welcomePage.background#1b1e25
  • widget.shadow#00000044

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#abb2bf
comment, punctuation.definition.comment#5B6270italic
comment.block.documentation, comment.block.javadoc#515662italic
comment.block.documentation keyword, comment.block.documentation storage.type, entity.name.type.instance.jsdoc, keyword.other.documentation, storage.type.class.jsdoc#8E7E6E
keyword, keyword.control, keyword.operator.delete, keyword.operator.expression, keyword.operator.instanceof, keyword.operator.new, keyword.operator.typeof, keyword.operator.void, storage, storage.modifier, storage.type#c678dd
keyword.control.conditional, keyword.control.flow, keyword.control.loop, keyword.control.trycatch#d183e8italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.bitwise, keyword.operator.comparison, keyword.operator.decrement, keyword.operator.increment, keyword.operator.relational, keyword.operator.ternary, punctuation.accessor, punctuation.separator, punctuation.terminator#828997
keyword.operator.logical, keyword.operator.logical.python#56b6c2
string, string.interpolated, string.quoted, string.template#98c379
constant.character.escape, string.template punctuation.definition.template-expression#d19a66
constant.numeric, constant.numeric.binary, constant.numeric.float, constant.numeric.hex, constant.numeric.integer, constant.numeric.octal#d19a66
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, support.constant, variable.language.self, variable.language.super, variable.language.this#d19a66italic
entity.name.function, meta.function-call entity.name.function, meta.method-call entity.name.function, support.function#61afef
entity.name.function.member, meta.function-call support.function#61afef
entity.name.type, entity.name.type.class, entity.name.type.enum, entity.name.type.interface, entity.name.type.struct, entity.other.inherited-class, support.class, support.type#56b6c2
entity.name.type.parameter, entity.name.type.type-parameter#7ee0cf
meta.parameter, variable, variable.other, variable.parameter#abb2bf
entity.name.tag.yaml, meta.object-literal.key, support.type.property-name, variable.other.object.property, variable.other.property#e06c75
variable.other.constant, variable.other.enummember#d19a66italic
meta.attribute, meta.decorator, meta.decorator entity.name.function, meta.decorator punctuation.decorator, punctuation.definition.annotation, storage.type.annotation#e5c07b
entity.name.module, entity.name.namespace, entity.name.type.module, entity.name.type.namespace#7a818e
meta.brace, punctuation.bracket, punctuation.definition.arguments, punctuation.definition.block, punctuation.definition.parameters, punctuation.section#828997
entity.name.tag, punctuation.definition.tag#e06c75
entity.name.tag.custom, entity.name.tag.other.custom, support.class.component#56b6c2
entity.other.attribute-name#e5c07b
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css#e5c07b
support.type.property-name.css, support.type.vendored.property-name.css#e06c75
constant.other.color.rgb-value.hex.css, support.constant.color.w3c-standard-color-name.css, support.constant.font-name.css, support.constant.property-value.css#d19a66
entity.name.tag.css#e06c75
keyword.other.unit.css#d19a66
variable.argument.css, variable.css#e06c75
support.type.property-name.json#e06c75
string.quoted.double.json, string.value.json#98c379
markup.heading, markup.heading entity.name#61afefbold
markup.bold#d19a66bold
markup.italicitalic
markup.underlineunderline
markup.fenced_code, markup.inline.raw, markup.raw#98c379
markup.quote#5B6270italic
punctuation.definition.quote.begin.markdown#98c379
punctuation.definition.list.begin.markdown#61afef
markup.underline.link#61afef
markup.inserted#98c379
markup.deleted#e06c75
markup.changed#61afef
constant.other.character-class.regexp, string.regexp, string.regexp.character-class#e06c75
keyword.control.anchor.regexp, keyword.operator.or.regexp, keyword.operator.quantifier.regexp, punctuation.definition.group.regexp#d19a66
keyword.other.class.cs, keyword.other.namespace.cs, keyword.other.using.cs, keyword.other.var.cs#c678dd
entity.name.variable.property.cs#e06c75
meta.preprocessor#5B6270
meta.preprocessor.numeric#d19a66
meta.preprocessor.string#98c379
meta.function-call.generic.python#61afef
support.function.builtin.python, support.function.magic.python#56b6c2
meta.function.decorator.identifier.python, meta.function.decorator.python#e5c07b
variable.parameter.function.language.special.self.python#d19a66italic
entity.name.type.alias.ts, entity.name.type.interface.ts#c8a2d6
variable.object.property.js, variable.object.property.jsx, variable.object.property.ts, variable.object.property.tsx#e06c75
entity.name.tag.yaml#e06c75
keyword.key.toml, support.type.property-name.table.toml#e06c75
variable.other.bracket.shell, variable.other.normal.shell, variable.other.positional.shell, variable.other.special.shell#e06c75
support.other.variable, support.variable#abb2bf
entity.name.label#828997
invalid, invalid.illegal#e06c75
invalid.deprecated#e06c75strikethrough