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#EEEEEE
  • activityBar.inactiveForeground#B4B4B4
  • activityBarBadge.background#7B7B7B
  • activityBarBadge.foreground#FFFFFF
  • badge.background#3A3A3A
  • badge.foreground#EEEEEE
  • breadcrumb.activeSelectionForeground#EEEEEE
  • breadcrumb.focusForeground#EEEEEE
  • breadcrumb.foreground#B4B4B4
  • breadcrumbPicker.background#222222
  • button.background#3A3A3A
  • button.foreground#EEEEEE
  • 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#EEEEEE
  • editor.background#121212
  • editor.findMatchBackground#606060
  • editor.findMatchHighlightBackground#60606080
  • editor.foreground#EEEEEE
  • 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#EEEEEE
  • 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#EEEEEE
  • 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#EEEEEE
  • input.placeholderForeground#B4B4B4
  • inputOption.activeBorder#B4B4B4
  • keybindingLabel.background#3A3A3A
  • keybindingLabel.border#4A4A4A
  • keybindingLabel.foreground#EEEEEE
  • 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#EEEEEE
  • notificationLink.foreground#D0D0D0
  • notifications.background#222222
  • notifications.border#3A3A3A
  • notifications.foreground#EEEEEE
  • notificationsErrorIcon.foreground#F5A3A7
  • notificationsInfoIcon.foreground#89B4D4
  • notificationsWarningIcon.foreground#F0C674
  • panel.background#222222
  • panel.border#3A3A3A
  • panelTitle.activeBorder#B4B4B4
  • panelTitle.activeForeground#EEEEEE
  • panelTitle.inactiveForeground#B4B4B4
  • peekView.border#3A3A3A
  • peekViewEditor.background#222222
  • peekViewEditor.matchHighlightBackground#606060
  • peekViewResult.background#222222
  • peekViewResult.fileForeground#EEEEEE
  • peekViewResult.lineForeground#B4B4B4
  • peekViewResult.matchHighlightBackground#606060
  • peekViewResult.selectionBackground#3A3A3A
  • peekViewResult.selectionForeground#EEEEEE
  • peekViewTitle.background#222222
  • peekViewTitleDescription.foreground#B4B4B4
  • peekViewTitleLabel.foreground#EEEEEE
  • progressBar.background#B4B4B4
  • quickInput.background#222222
  • quickInput.foreground#EEEEEE
  • quickInputList.focusBackground#3A3A3A
  • quickInputList.focusForeground#EEEEEE
  • 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#EEEEEE
  • sideBarTitle.foreground#EEEEEE
  • statusBar.background#1A1A1A
  • statusBar.border#3A3A3A
  • statusBar.debuggingBackground#1A1A1A
  • statusBar.debuggingForeground#EEEEEE
  • statusBar.foreground#EEEEEE
  • statusBar.noFolderBackground#1A1A1A
  • statusBar.noFolderForeground#EEEEEE
  • tab.activeBackground#121212
  • tab.activeBorder#EEEEEE
  • tab.activeBorderTop#121212
  • tab.activeForeground#EEEEEE
  • 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#EEEEEE
  • terminalCursor.foreground#EEEEEE
  • 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#EEEEEE
  • titleBar.border#3A3A3A
  • titleBar.inactiveBackground#1A1A1A
  • titleBar.inactiveForeground#B4B4B4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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