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#1A1A1A
  • activityBar.border#3A3A3A
  • activityBar.foreground#D4D4D4
  • activityBar.inactiveForeground#B4B4B4
  • activityBarBadge.background#7B7B7B
  • activityBarBadge.foreground#FFFFFF
  • badge.background#3A3A3A
  • badge.foreground#D4D4D4
  • breadcrumb.activeSelectionForeground#D4D4D4
  • breadcrumb.focusForeground#D4D4D4
  • breadcrumb.foreground#B4B4B4
  • breadcrumbPicker.background#222222
  • button.background#3A3A3A
  • button.foreground#D4D4D4
  • button.hoverBackground#4A4A4A
  • debugIcon.breakpointForeground#F5A3A7
  • debugIcon.pauseForeground#F0C674
  • debugIcon.startForeground#8BCFAC
  • debugIcon.stopForeground#F5A3A7
  • debugToolBar.background#222222
  • debugToolBar.border#3A3A3A
  • descriptionForeground#B4B4B4
  • diffEditor.insertedTextBackground#8BCFAC20
  • diffEditor.removedTextBackground#F5A3A720
  • dropdown.background#222222
  • dropdown.border#3A3A3A
  • dropdown.foreground#D4D4D4
  • editor.background#121212
  • editor.findMatchBackground#606060
  • editor.findMatchHighlightBackground#60606080
  • editor.foreground#D4D4D4
  • editor.inactiveSelectionBackground#60606080
  • editor.lineHighlightBackground#3A3A3A
  • editor.selectionBackground#606060
  • editor.selectionHighlightBackground#60606080
  • editor.wordHighlightBackground#60606080
  • editor.wordHighlightStrongBackground#60606080
  • editorBracketHighlight.foreground1#B4B4B4
  • editorBracketHighlight.foreground2#8A8A8A
  • editorBracketHighlight.foreground3#6A6A6A
  • editorBracketHighlight.foreground4#B4B4B4
  • editorBracketHighlight.foreground5#8A8A8A
  • editorBracketHighlight.foreground6#6A6A6A
  • editorBracketHighlight.unexpectedBracket.foreground#F5A3A7
  • editorBracketMatch.background#2A2A2A
  • editorBracketMatch.border#3A3A3A
  • editorCursor.foreground#FFFFFF
  • editorError.background#F5A3A715
  • editorError.foreground#F5A3A7
  • editorGroup.border#3A3A3A
  • editorGroupHeader.noTabsBackground#222222
  • editorGroupHeader.tabsBackground#222222
  • editorGutter.addedBackground#8BCFAC
  • editorGutter.background#121212
  • editorGutter.deletedBackground#F5A3A7
  • editorGutter.foldingControlForeground#B4B4B4
  • editorGutter.modifiedBackground#89B4D4
  • editorHint.foreground#8BCFAC
  • editorHoverWidget.background#222222
  • editorHoverWidget.border#3A3A3A
  • editorIndentGuide.activeBackground1#5A5A5A
  • editorIndentGuide.background1#3A3A3A
  • editorInfo.background#89B4D415
  • editorInfo.foreground#89B4D4
  • editorInlayHint.background#3A3A3A80
  • editorInlayHint.foreground#B4B4B4
  • editorInlayHint.parameterForeground#B4B4B4
  • editorInlayHint.typeForeground#B4B4B4
  • editorLineNumber.activeForeground#D4D4D4
  • editorLineNumber.foreground#7B7B7B
  • editorOverviewRuler.border#3A3A3A
  • editorOverviewRuler.errorForeground#F5A3A7
  • editorOverviewRuler.infoForeground#89B4D4
  • editorOverviewRuler.warningForeground#F0C674
  • editorStickyScroll.background#1A1A1A
  • editorStickyScrollHover.background#222222
  • editorSuggestWidget.background#222222
  • editorSuggestWidget.border#3A3A3A
  • editorSuggestWidget.selectedBackground#3A3A3A
  • editorWarning.background#F0C67415
  • editorWarning.foreground#F0C674
  • editorWhitespace.foreground#3A3A3A
  • editorWidget.background#222222
  • editorWidget.border#3A3A3A
  • editorWidget.resizeBorder#7B7B7B
  • errorForeground#F5A3A7
  • focusBorder#7B7B7B
  • foreground#D4D4D4
  • gitDecoration.addedResourceForeground#8BCFAC
  • gitDecoration.conflictingResourceForeground#E8A46D
  • gitDecoration.deletedResourceForeground#F5A3A7
  • gitDecoration.ignoredResourceForeground#959da5
  • gitDecoration.modifiedResourceForeground#89B4D4
  • gitDecoration.untrackedResourceForeground#8BCFAC
  • icon.foreground#B4B4B4
  • input.background#222222
  • input.border#3A3A3A
  • input.foreground#D4D4D4
  • input.placeholderForeground#B4B4B4
  • inputOption.activeBorder#B4B4B4
  • keybindingLabel.background#3A3A3A
  • keybindingLabel.border#4A4A4A
  • keybindingLabel.foreground#D4D4D4
  • list.activeSelectionBackground#3A3A3A
  • list.activeSelectionForeground#D0D0D0
  • list.focusBackground#3A3A3A
  • list.focusForeground#D0D0D0
  • list.highlightForeground#D0D0D0
  • list.hoverBackground#3A3A3A
  • list.hoverForeground#D0D0D0
  • list.inactiveSelectionBackground#3A3A3A
  • list.inactiveSelectionForeground#D0D0D0
  • merge.border#3A3A3A
  • merge.commonContentBackground#F0C67420
  • merge.commonHeaderBackground#F0C67440
  • merge.currentContentBackground#8BCFAC20
  • merge.currentHeaderBackground#8BCFAC40
  • merge.incomingContentBackground#89B4D420
  • merge.incomingHeaderBackground#89B4D440
  • minimap.background#1A1A1A
  • minimapGutter.addedBackground#8BCFAC
  • minimapGutter.deletedBackground#F5A3A7
  • minimapGutter.modifiedBackground#89B4D4
  • notificationCenter.border#3A3A3A
  • notificationCenterHeader.background#222222
  • notificationCenterHeader.foreground#D4D4D4
  • notificationLink.foreground#D0D0D0
  • notifications.background#222222
  • notifications.border#3A3A3A
  • notifications.foreground#D4D4D4
  • notificationsErrorIcon.foreground#F5A3A7
  • notificationsInfoIcon.foreground#89B4D4
  • notificationsWarningIcon.foreground#F0C674
  • panel.background#222222
  • panel.border#3A3A3A
  • panelTitle.activeBorder#B4B4B4
  • panelTitle.activeForeground#D4D4D4
  • panelTitle.inactiveForeground#B4B4B4
  • peekView.border#3A3A3A
  • peekViewEditor.background#222222
  • peekViewEditor.matchHighlightBackground#606060
  • peekViewResult.background#222222
  • peekViewResult.fileForeground#D4D4D4
  • peekViewResult.lineForeground#B4B4B4
  • peekViewResult.matchHighlightBackground#606060
  • peekViewResult.selectionBackground#3A3A3A
  • peekViewResult.selectionForeground#D4D4D4
  • peekViewTitle.background#222222
  • peekViewTitleDescription.foreground#B4B4B4
  • peekViewTitleLabel.foreground#D4D4D4
  • progressBar.background#B4B4B4
  • quickInput.background#222222
  • quickInput.foreground#D4D4D4
  • quickInputList.focusBackground#3A3A3A
  • quickInputList.focusForeground#D4D4D4
  • quickInputTitle.background#222222
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#959da555
  • scrollbarSlider.background#959da533
  • scrollbarSlider.hoverBackground#959da544
  • sideBar.background#222222
  • sideBar.border#3A3A3A
  • sideBar.foreground#ABABAB
  • sideBarSectionHeader.background#222222
  • sideBarSectionHeader.border#3A3A3A
  • sideBarSectionHeader.foreground#D4D4D4
  • sideBarTitle.foreground#D4D4D4
  • statusBar.background#1A1A1A
  • statusBar.border#3A3A3A
  • statusBar.debuggingBackground#1A1A1A
  • statusBar.debuggingForeground#D4D4D4
  • statusBar.foreground#D4D4D4
  • statusBar.noFolderBackground#1A1A1A
  • statusBar.noFolderForeground#D4D4D4
  • tab.activeBackground#121212
  • tab.activeBorder#D4D4D4
  • tab.activeBorderTop#121212
  • tab.activeForeground#D4D4D4
  • tab.border#3A3A3A
  • tab.inactiveBackground#222222
  • tab.inactiveForeground#B4B4B4
  • terminal.ansiBlack#1A1A1A
  • terminal.ansiBlue#89B4D4
  • terminal.ansiBrightBlack#646464
  • terminal.ansiBrightBlue#A8D1F0
  • terminal.ansiBrightCyan#9DE5E0
  • terminal.ansiBrightGreen#A8E6C3
  • terminal.ansiBrightMagenta#D9B8F0
  • terminal.ansiBrightRed#FFB8BA
  • terminal.ansiBrightWhite#FCFCFC
  • terminal.ansiBrightYellow#FFE082
  • terminal.ansiCyan#7DD4D0
  • terminal.ansiGreen#8BCFAC
  • terminal.ansiMagenta#C9A5E0
  • terminal.ansiRed#F5A3A7
  • terminal.ansiWhite#D0D0D0
  • terminal.ansiYellow#F0C674
  • terminal.background#1A1A1A
  • terminal.foreground#D4D4D4
  • terminalCursor.foreground#D4D4D4
  • testing.iconFailed#F5A3A7
  • testing.iconPassed#8BCFAC
  • testing.iconQueued#89B4D4
  • testing.iconSkipped#F0C674
  • testing.iconUnset#B4B4B4
  • textLink.activeForeground#D0D0D0
  • textLink.foreground#D0D0D0
  • titleBar.activeBackground#1A1A1A
  • titleBar.activeForeground#D4D4D4
  • titleBar.border#3A3A3A
  • titleBar.inactiveBackground#1A1A1A
  • titleBar.inactiveForeground#B4B4B4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7B7B7B
comment.block.documentation, comment.block.javadoc#7B7B7B
constant, constant.language, constant.character#D4D4D4
constant.numeric, constant.other#B4B4B4
entity.name.function, meta.function-call, support.function#D4D4D4
entity.name.type, entity.name.class, entity.name.namespace, support.type, support.class#D4D4D4
entity.name.tag#D4D4D4
entity.other.attribute-name#D4D4D4
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage.type, storage.modifier#D4D4D4
keyword.operator.assignment#9A9A9A
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison#D4D4D4
string, string.quoted, string.template#B4B4B4
string.regexp#B4B4B4
constant.character.escape, string.escape#B4B4B4
variable, variable.other#D4D4D4
variable.language, variable.parameter#D4D4D4
punctuation.bracket, punctuation.definition, punctuation.separator, punctuation.terminator#D4D4D4
constant.language.boolean#D4D4D4
meta.preprocessor, keyword.control.directive#D4D4D4
markup.heading, markup.heading.markdown, punctuation.definition.heading.markdown#D4D4D4
markup.italic#D4D4D4italic
markup.bold#D4D4D4
markup.strikethrough#7B7B7Bstrikethrough
markup.underline.link, string.other.link#7B7B7B
markup.inline.raw, markup.raw#B4B4B4
markup.quote.markdown#7B7B7Bitalic
markup.list.numbered, markup.list.unnumbered, punctuation.definition.list#B4B4B4
fenced_code.block.language.markdown#B4B4B4
entity.name.section, entity.name.label#D4D4D4
support.variable, meta.object-literal.key#D4D4D4
entity.other.inherited-class#D4D4D4
support.type.property-name.json#D4D4D4
entity.name.tag.yaml, punctuation.definition.block.sequence.item.yaml#D4D4D4
markup.inserted, punctuation.definition.inserted.diff#8BCFAC
markup.deleted, punctuation.definition.deleted.diff#F5A3A7
meta.diff.header#D4D4D4
meta.diff.range#89B4D4