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.

  • actionBar.toggledBackground#808080
  • activityBar.activeBackground#898989
  • activityBar.activeBorder#11111100
  • activityBar.background#8f8f8f
  • activityBar.border#505050
  • activityBar.foreground#111111
  • activityBar.inactiveForeground#202020
  • activityBarBadge.background#7490a6
  • activityBarBadge.foreground#111111
  • activityBarTop.activeBackground#898989
  • activityBarTop.activeBorder#11111100
  • activityBarTop.background#8f8f8f
  • activityBarTop.foreground#111111
  • activityBarTop.inactiveForeground#202020
  • badge.background#7490a6
  • badge.foreground#111111
  • breadcrumb.activeSelectionForeground#111111
  • breadcrumb.background#969696
  • breadcrumb.focusForeground#111111
  • breadcrumb.foreground#202020
  • breadcrumbPicker.background#9f9f9f
  • button.background#7490a6
  • button.border#505050
  • button.foreground#111111
  • button.hoverBackground#7490a6
  • button.secondaryBackground#898989
  • button.secondaryBorder#505050
  • button.secondaryForeground#111111
  • button.secondaryHoverBackground#808080
  • charts.blue#000d5a
  • charts.foreground#111111
  • charts.green#002b00
  • charts.lines#505050
  • charts.orange#460001
  • charts.purple#2d0036
  • charts.red#5e0241
  • charts.yellow#442900
  • checkbox.background#969696
  • checkbox.border#505050
  • checkbox.foreground#000d5a
  • commandCenter.activeBackground#808080
  • commandCenter.activeBorder#11111100
  • commandCenter.activeForeground#111111
  • commandCenter.background#8f8f8f
  • commandCenter.border#505050
  • commandCenter.debuggingBackground#81628de0
  • commandCenter.foreground#202020
  • commandCenter.inactiveBorder#11111100
  • commandCenter.inactiveForeground#202020
  • debugIcon.continueForeground#002b00
  • debugIcon.disconnectForeground#5e0241
  • debugIcon.pauseForeground#442900
  • debugIcon.restartForeground#000d5a
  • debugIcon.startForeground#002b00
  • debugIcon.stepBackForeground#000d5a
  • debugIcon.stepIntoForeground#000d5a
  • debugIcon.stepOutForeground#000d5a
  • debugIcon.stepOverForeground#000d5a
  • debugIcon.stopForeground#5e0241
  • debugToolBar.background#9f9f9f
  • debugToolBar.border#505050
  • descriptionForeground#202020
  • diffEditor.border#505050
  • diffEditor.diagonalFill#666666
  • diffEditor.insertedLineBackground#78976e70
  • diffEditor.insertedTextBackground#78976e94
  • diffEditor.removedLineBackground#a3708370
  • diffEditor.removedTextBackground#a3708394
  • diffEditor.unchangedCodeBackground#969696
  • diffEditor.unchangedRegionBackground#8f8f8f
  • diffEditor.unchangedRegionForeground#202020
  • diffEditorGutter.insertedLineBackground#11111100
  • diffEditorGutter.removedLineBackground#11111100
  • disabledForeground#202020
  • dropdown.background#9f9f9f
  • dropdown.border#505050
  • dropdown.foreground#111111
  • dropdown.listBackground#9f9f9f
  • editor.background#969696
  • editor.findMatchBackground#604d66d1
  • editor.findMatchBorder#505050
  • editor.findMatchHighlightBackground#604d66b8
  • editor.findRangeHighlightBackground#808080b8
  • editor.foldBackground#969696b8
  • editor.foreground#111111
  • editor.hoverHighlightBackground#898989b8
  • editor.inactiveLineHighlightBackground#969696
  • editor.inactiveSelectionBackground#898989b8
  • editor.inlineValuesBackground#8f8f8f
  • editor.inlineValuesForeground#26008b
  • editor.lineHighlightBackground#604d663d
  • editor.lineHighlightBorder#11111100
  • editor.linkedEditingBackground#808080
  • editor.rangeHighlightBackground#898989b8
  • editor.rangeHighlightBorder#11111100
  • editor.selectionBackground#7490a6
  • editor.selectionForeground#111111
  • editor.selectionHighlightBackground#898989b8
  • editor.selectionHighlightBorder#11111100
  • editor.symbolHighlightBackground#808080b8
  • editor.symbolHighlightBorder#11111100
  • editor.wordHighlightBackground#604d66b8
  • editor.wordHighlightBorder#11111100
  • editor.wordHighlightStrongBackground#604d66c7
  • editor.wordHighlightStrongBorder#11111100
  • editor.wordHighlightTextBackground#604d66b3
  • editor.wordHighlightTextBorder#11111100
  • editorBracketHighlight.foreground1#26008b
  • editorBracketHighlight.foreground2#26008b
  • editorBracketHighlight.foreground3#26008b
  • editorBracketHighlight.foreground4#26008b
  • editorBracketHighlight.foreground5#26008b
  • editorBracketHighlight.foreground6#26008b
  • editorBracketHighlight.unexpectedBracket.foreground#5e0241
  • editorBracketMatch.background#898989
  • editorBracketMatch.border#505050
  • editorBracketPairGuide.activeBackground1#181818
  • editorBracketPairGuide.background1#666666
  • editorCodeLens.foreground#181818
  • editorCursor.background#969696
  • editorCursor.foreground#000d5a
  • editorError.background#11111100
  • editorError.border#505050
  • editorError.foreground#5e0241
  • editorGroup.border#505050
  • editorGroup.dropBackground#7490a6
  • editorGroup.emptyBackground#969696
  • editorGroupHeader.border#505050
  • editorGroupHeader.noTabsBackground#969696
  • editorGroupHeader.tabsBackground#969696
  • editorGroupHeader.tabsBorder#505050
  • editorGutter.addedBackground#78976e
  • editorGutter.background#969696
  • editorGutter.commentRangeForeground#202020
  • editorGutter.deletedBackground#a37083
  • editorGutter.itemBackground#969696
  • editorGutter.modifiedBackground#7490a6
  • editorHint.border#505050
  • editorHint.foreground#002b00
  • editorHoverWidget.background#9f9f9f
  • editorHoverWidget.border#505050
  • editorHoverWidget.foreground#111111
  • editorHoverWidget.statusBarBackground#8f8f8f
  • editorIndentGuide.activeBackground1#181818
  • editorIndentGuide.background1#666666
  • editorInfo.background#11111100
  • editorInfo.border#505050
  • editorInfo.foreground#000d5a
  • editorLightBulb.foreground#460001
  • editorLightBulbAutoFix.foreground#002b00
  • editorLineNumber.activeForeground#26008b
  • editorLineNumber.dimmedForeground#181818
  • editorLineNumber.foreground#181818
  • editorOverviewRuler.addedForeground#002b00
  • editorOverviewRuler.background#969696
  • editorOverviewRuler.border#11111100
  • editorOverviewRuler.deletedForeground#5e0241
  • editorOverviewRuler.errorForeground#5e0241
  • editorOverviewRuler.findMatchForeground#604d66b8
  • editorOverviewRuler.infoForeground#000d5a
  • editorOverviewRuler.modifiedForeground#000d5a
  • editorOverviewRuler.rangeHighlightForeground#898989b8
  • editorOverviewRuler.selectionHighlightForeground#7490a6c2
  • editorOverviewRuler.warningForeground#442900
  • editorOverviewRuler.wordHighlightForeground#604d66b8
  • editorOverviewRuler.wordHighlightStrongForeground#604d66c7
  • editorPane.background#969696
  • editorRuler.foreground#666666
  • editorStickyScroll.background#969696
  • editorStickyScrollGutter.background#969696
  • editorUnicodeHighlight.background#9a854c
  • editorUnicodeHighlight.border#505050
  • editorWarning.background#11111100
  • editorWarning.border#505050
  • editorWarning.foreground#442900
  • editorWhitespace.foreground#666666
  • editorWidget.background#9f9f9f
  • editorWidget.border#505050
  • editorWidget.foreground#111111
  • editorWidget.resizeBorder#505050
  • errorForeground#5e0241
  • focusBorder#11111100
  • foreground#111111
  • gitDecoration.addedResourceForeground#002b00
  • gitDecoration.conflictingResourceForeground#442900
  • gitDecoration.deletedResourceForeground#5e0241
  • gitDecoration.ignoredResourceForeground#202020
  • gitDecoration.modifiedResourceForeground#000d5a
  • gitDecoration.renamedResourceForeground#002b00
  • gitDecoration.stageDeletedResourceForeground#5e0241
  • gitDecoration.stageModifiedResourceForeground#000d5a
  • gitDecoration.submoduleResourceForeground#000d5a
  • gitDecoration.untrackedResourceForeground#002b00
  • icon.foreground#202020
  • input.background#969696
  • input.border#505050
  • input.foreground#111111
  • input.placeholderForeground#181818
  • inputOption.activeBackground#898989
  • inputOption.activeBorder#11111100
  • inputOption.activeForeground#111111
  • inputOption.hoverBackground#808080
  • inputValidation.errorBackground#a37083
  • inputValidation.errorBorder#505050
  • inputValidation.errorForeground#111111
  • inputValidation.infoBackground#7490a6
  • inputValidation.infoBorder#505050
  • inputValidation.infoForeground#111111
  • inputValidation.warningBackground#9a854c
  • inputValidation.warningBorder#505050
  • inputValidation.warningForeground#111111
  • list.activeSelectionBackground#7490a6
  • list.activeSelectionForeground#111111
  • list.dropBackground#7490a6
  • list.errorForeground#5e0241
  • list.focusBackground#7490a6
  • list.focusForeground#111111
  • list.focusOutline#11111100
  • list.highlightForeground#000d5a
  • list.hoverBackground#898989
  • list.inactiveFocusBackground#898989
  • list.inactiveSelectionBackground#898989
  • list.inactiveSelectionForeground#111111
  • list.invalidItemForeground#5e0241
  • list.warningForeground#442900
  • menu.background#9f9f9f
  • menu.border#505050
  • menu.foreground#111111
  • menu.selectionBackground#898989
  • menu.selectionBorder#11111100
  • menu.selectionForeground#111111
  • menu.separatorBackground#505050
  • menubar.selectionBackground#898989
  • menubar.selectionBorder#11111100
  • menubar.selectionForeground#111111
  • minimap.background#969696
  • minimap.errorHighlight#5e0241
  • minimap.findMatchHighlight#604d66b8
  • minimap.foregroundOpacity#11111138
  • minimap.infoHighlight#000d5a
  • minimap.selectionHighlight#7490a6c2
  • minimap.warningHighlight#442900
  • minimapGutter.addedBackground#78976e
  • minimapGutter.deletedBackground#a37083
  • minimapGutter.modifiedBackground#7490a6
  • minimapSlider.activeBackground#202020
  • minimapSlider.background#666666
  • minimapSlider.hoverBackground#202020
  • multiDiffEditor.background#969696
  • notebook.cellEditorBackground#969696
  • notebook.editorBackground#969696
  • notificationCenter.border#505050
  • notificationCenterHeader.background#8f8f8f
  • notificationCenterHeader.foreground#111111
  • notifications.background#9f9f9f
  • notifications.border#505050
  • notifications.foreground#111111
  • notificationsErrorIcon.foreground#5e0241
  • notificationsInfoIcon.foreground#000d5a
  • notificationsWarningIcon.foreground#442900
  • notificationToast.border#505050
  • outputView.background#969696
  • panel.background#8f8f8f
  • panel.border#505050
  • panelInput.border#505050
  • panelTitle.activeBorder#11111100
  • panelTitle.activeForeground#111111
  • panelTitle.inactiveForeground#202020
  • peekView.border#505050
  • peekViewEditor.background#969696
  • peekViewEditor.matchHighlightBackground#604d66d1
  • peekViewEditorGutter.background#969696
  • peekViewEditorStickyScroll.background#969696
  • peekViewEditorStickyScrollGutter.background#969696
  • peekViewResult.background#969696
  • peekViewResult.fileForeground#111111
  • peekViewResult.lineForeground#202020
  • peekViewResult.matchHighlightBackground#604d66d1
  • peekViewResult.selectionBackground#7490a6
  • peekViewResult.selectionForeground#111111
  • peekViewTitle.background#9f9f9f
  • peekViewTitleDescription.foreground#202020
  • peekViewTitleLabel.foreground#111111
  • pickerGroup.border#505050
  • pickerGroup.foreground#202020
  • problemsErrorIcon.foreground#5e0241
  • problemsInfoIcon.foreground#000d5a
  • problemsWarningIcon.foreground#442900
  • progressBar.background#7490a6
  • quickInput.background#9f9f9f
  • quickInput.foreground#111111
  • quickInputList.focusBackground#7490a6
  • quickInputList.focusForeground#111111
  • quickInputTitle.background#8f8f8f
  • sash.hoverBorder#11111100
  • scmGraph.foreground1#442900
  • scmGraph.foreground2#5e0241
  • scmGraph.foreground3#460001
  • scmGraph.foreground4#002b00
  • scmGraph.foreground5#2d0036
  • scmGraph.historyItemBaseRefColor#460001
  • scmGraph.historyItemHoverAdditionsForeground#002b00
  • scmGraph.historyItemHoverDefaultLabelBackground#808080
  • scmGraph.historyItemHoverDefaultLabelForeground#111111
  • scmGraph.historyItemHoverDeletionsForeground#5e0241
  • scmGraph.historyItemHoverLabelForeground#969696
  • scmGraph.historyItemRefColor#000d5a
  • scmGraph.historyItemRemoteRefColor#2d0036
  • scrollbar.background#11111100
  • scrollbar.shadow#11111100
  • scrollbarSlider.activeBackground#26008bd6
  • scrollbarSlider.background#6666669e
  • scrollbarSlider.hoverBackground#181818b8
  • selection.background#7490a6
  • settings.checkboxBackground#969696
  • settings.checkboxBorder#505050
  • settings.dropdownBackground#969696
  • settings.dropdownBorder#505050
  • settings.headerForeground#111111
  • settings.modifiedItemIndicator#442900
  • settings.numberInputBackground#969696
  • settings.numberInputBorder#505050
  • settings.rowHoverBackground#898989
  • settings.sashBorder#505050
  • settings.textInputBackground#969696
  • settings.textInputBorder#505050
  • sideBar.background#8f8f8f
  • sideBar.border#505050
  • sideBar.foreground#111111
  • sideBarSectionHeader.background#9f9f9f
  • sideBarSectionHeader.border#505050
  • sideBarSectionHeader.foreground#111111
  • sideBarStickyScroll.background#8f8f8f
  • sideBarTitle.background#8f8f8f
  • sideBarTitle.foreground#111111
  • statusBar.background#8f8f8f
  • statusBar.border#505050
  • statusBar.debuggingBackground#7490a6
  • statusBar.debuggingForeground#111111
  • statusBar.foreground#202020
  • statusBar.noFolderBackground#8f8f8f
  • statusBar.noFolderForeground#202020
  • statusBarItem.activeBackground#808080
  • statusBarItem.errorBackground#a37083
  • statusBarItem.errorForeground#111111
  • statusBarItem.hoverBackground#898989
  • statusBarItem.prominentBackground#898989
  • statusBarItem.prominentForeground#111111
  • statusBarItem.remoteBackground#7490a6
  • statusBarItem.remoteForeground#111111
  • statusBarItem.warningBackground#9a854c
  • statusBarItem.warningForeground#111111
  • tab.activeBackground#969696
  • tab.activeBorder#11111100
  • tab.activeBorderTop#11111100
  • tab.activeForeground#111111
  • tab.border#505050
  • tab.hoverBackground#898989
  • tab.hoverForeground#111111
  • tab.inactiveBackground#8f8f8f
  • tab.inactiveForeground#202020
  • tab.unfocusedActiveForeground#111111
  • tab.unfocusedInactiveForeground#202020
  • terminal.ansiBlack#202020
  • terminal.ansiBlue#000d5a
  • terminal.ansiBrightBlack#202020
  • terminal.ansiBrightBlue#000d5a
  • terminal.ansiBrightCyan#000d5a
  • terminal.ansiBrightGreen#002b00
  • terminal.ansiBrightMagenta#2d0036
  • terminal.ansiBrightRed#5e0241
  • terminal.ansiBrightWhite#111111
  • terminal.ansiBrightYellow#442900
  • terminal.ansiCyan#000d5a
  • terminal.ansiGreen#002b00
  • terminal.ansiMagenta#2d0036
  • terminal.ansiRed#5e0241
  • terminal.ansiWhite#111111
  • terminal.ansiYellow#442900
  • terminal.background#969696
  • terminal.border#505050
  • terminal.foreground#111111
  • terminal.selectionBackground#7490a6
  • terminal.selectionForeground#111111
  • terminalCursor.background#969696
  • terminalCursor.foreground#000d5a
  • terminalStickyScroll.background#969696
  • testing.iconErrored#5e0241
  • testing.iconFailed#5e0241
  • testing.iconPassed#002b00
  • testing.iconQueued#202020
  • testing.iconSkipped#202020
  • testing.iconUnset#202020
  • textBlockQuote.background#8f8f8f
  • textBlockQuote.border#505050
  • textCodeBlock.background#9f9f9f
  • textLink.activeForeground#000d5a
  • textLink.foreground#000d5a
  • textPreformat.background#9f9f9f
  • textPreformat.foreground#111111
  • textSeparator.foreground#505050
  • titleBar.activeBackground#8f8f8f
  • titleBar.activeForeground#111111
  • titleBar.border#505050
  • titleBar.inactiveBackground#969696
  • titleBar.inactiveForeground#202020
  • toolbar.activeBackground#808080
  • toolbar.hoverBackground#898989
  • toolbar.hoverOutline#11111100
  • walkThrough.embeddedEditorBackground#969696
  • welcomePage.background#969696
  • welcomePage.tileBackground#9f9f9f
  • welcomePage.tileBorder#505050
  • welcomePage.tileHoverBackground#898989
  • widget.border#505050
  • widget.shadow#11111138
  • window.activeBorder#505050
  • window.inactiveBorder#505050

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, meta.embedded, text.html.markdown, meta.jsx.children#111111
comment, punctuation.definition.comment#181818
comment.block.documentation, storage.type.class.jsdoc, entity.name.type.instance.jsdoc#181818
keyword, keyword.control, keyword.operator.expression, storage.modifier#460001
keyword.control.import, keyword.control.export, storage.modifier.async, keyword.control.from#460001
storage.type, storage.type.function, storage.type.class, storage.type.interface, storage.type.type#442900
keyword.operator, punctuation.accessor, punctuation.separator.key-value, keyword.operator.type#26008b
string, constant.other.symbol#002b00
string.template, punctuation.definition.template-expression#002b00
string.regexp, constant.character.escape#002b00
constant.numeric, constant.language, constant.character, constant.other.enum#442900
constant.language.boolean, constant.language.null, constant.language.undefined#442900
entity.name.function, support.function, variable.function, support.function.console#000d5a
entity.name.function.member, support.function.dom#000d5a
entity.name.type.class, entity.name.class, support.class, support.type#2d0036
entity.name.type.interface, entity.name.type.alias, entity.name.type, entity.name.type.module, entity.name.type.namespace, support.type.primitive#2d0036
meta.object-literal.key, support.type.property-name, variable.other.property, variable.other.member, meta.property.object, support.variable.property#111111
variable.parameter, entity.name.variable.parameter#111111
variable, variable.other.readwrite, variable.other.constant, entity.name.variable, variable.language.this#111111
meta.decorator, entity.name.function.decorator, punctuation.decorator#2d0036
entity.name.tag.tsx, support.class.component.tsx#2d0036
entity.other.attribute-name#442900
punctuation.definition.tag, punctuation.definition.tag.begin, punctuation.definition.tag.end#26008b
entity.name.tag#000d5a
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.name.tag.css#002b00
support.type.property-name.css, support.type.vendored.property-name.css#111111
markup.heading, entity.name.section.markdown#460001
markup.underline.link, string.other.link#000d5a
markup.italic#111111
markup.bold#111111
markup.inserted, meta.diff.header.to-file#002b00
markup.deleted, meta.diff.header.from-file#5e0241
markup.changed#442900
invalid, invalid.illegal#5e0241
punctuation, meta.brace, punctuation.definition.block#26008b