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#000000
  • activityBar.border#000000
  • activityBar.foreground#4D4D4D
  • activityBarBadge.background#B30303
  • activityBarBadge.foreground#000000
  • badge.background#B30303
  • badge.foreground#000000
  • button.background#B30303
  • button.foreground#000000
  • debugExceptionWidget.background#000000
  • debugExceptionWidget.border#4D4D4D33
  • debugToolBar.background#000000
  • diffEditor.insertedTextBackground#BAF60233
  • diffEditor.removedTextBackground#DC490433
  • dropdown.background#000000
  • dropdown.border#4D4D4D77
  • dropdown.foreground#EAEAEA99
  • editor.background#000000
  • editor.findMatchBackground#B303030e
  • editor.findMatchBorder#B30303
  • editor.findMatchHighlightBackground#B303030e
  • editor.findMatchHighlightBorder#B3030366
  • editor.findRangeHighlightBackground#4D4D4D44
  • editor.findRangeHighlightBorder#00000000
  • editor.foreground#EAEAEA
  • editor.inactiveSelectionBackground#4D4D4D44
  • editor.lineHighlightBackground#EAEAEA22
  • editor.rangeHighlightBackground#4D4D4D33
  • editor.selectionBackground#4D4D4D77
  • editor.selectionHighlightBackground#4D4D4D44
  • editor.selectionHighlightBorder#4D4D4D
  • editor.wordHighlightBackground#4D4D4D44
  • editor.wordHighlightStrongBackground#8AB80077
  • editorBracketMatch.background#4D4D4D33
  • editorBracketMatch.border#4D4D4D55
  • editorCodeLens.foreground#4D4D4Db0
  • editorCursor.foreground#EAEAEA
  • editorError.foreground#B30303
  • editorGroup.border#4D4D4D33
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#8AB800bb
  • editorGutter.deletedBackground#2527CEbb
  • editorGutter.modifiedBackground#DC4904bb
  • editorHint.foreground#8AB800
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#4D4D4D22
  • editorIndentGuide.activeBackground#4D4D4D77
  • editorIndentGuide.background#4D4D4D44
  • editorInfo.foreground#2527CE
  • editorLineNumber.activeForeground#4D4D4D
  • editorLineNumber.foreground#4D4D4D92
  • editorLink.activeForeground#B30303
  • editorMarkerNavigation.background#000000
  • editorOverviewRuler.addedForeground#8AB800bb
  • editorOverviewRuler.border#4D4D4D33
  • editorOverviewRuler.deletedForeground#2527CEbb
  • editorOverviewRuler.errorForeground#2527CE
  • editorOverviewRuler.modifiedForeground#DC4904bb
  • editorOverviewRuler.warningForeground#B30303
  • editorRuler.foreground#4D4D4D44
  • editorStickyScroll.background#000000
  • editorStickyScrollHover.background#000000
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#4D4D4D22
  • editorSuggestWidget.highlightForeground#B30303
  • editorSuggestWidget.selectedBackground#4D4D4D33
  • editorWarning.foreground#DC4904
  • editorWhitespace.foreground#4D4D4D66
  • editorWidget.background#000000
  • extensionButton.prominentBackground#B30303
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#B30303b3
  • focusBorder#B3030377
  • foreground#EAEAEA99
  • gitDecoration.deletedResourceForeground#2527CEcc
  • gitDecoration.ignoredResourceForeground#EAEAEA66
  • gitDecoration.modifiedResourceForeground#DC4904cc
  • gitDecoration.submoduleResourceForeground#F01294b0
  • gitDecoration.untrackedResourceForeground#8AB800cc
  • input.background#000000
  • input.border#4D4D4D55
  • input.foreground#EAEAEA
  • input.placeholderForeground#4D4D4D77
  • inputOption.activeBorder#B30303
  • inputValidation.errorBackground#000000
  • inputValidation.errorBorder#2527CE
  • inputValidation.infoBackground#000000
  • inputValidation.infoBorder#8AB800
  • inputValidation.warningBackground#000000
  • inputValidation.warningBorder#DC4904
  • list.activeSelectionBackground#4D4D4D33
  • list.activeSelectionForeground#EAEAEA
  • list.focusBackground#4D4D4D33
  • list.focusForeground#EAEAEA99
  • list.highlightForeground#B30303
  • list.hoverBackground#4D4D4D33
  • list.hoverForeground#EAEAEA99
  • list.inactiveSelectionBackground#4D4D4D33
  • list.inactiveSelectionForeground#EAEAEA99
  • list.invalidItemForeground#EAEAEA77
  • panel.background#000000
  • panel.border#4D4D4D33
  • panelTitle.activeBorder#B30303
  • panelTitle.activeForeground#EAEAEA
  • panelTitle.inactiveForeground#EAEAEA99
  • peekView.border#4D4D4D33
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#B3030344
  • peekViewResult.background#000000
  • peekViewResult.fileForeground#EAEAEA99
  • peekViewResult.matchHighlightBackground#B3030344
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#EAEAEA99
  • peekViewTitleLabel.foreground#EAEAEA99
  • pickerGroup.border#4D4D4D33
  • pickerGroup.foreground#EAEAEAb3
  • progressBar.background#B30303
  • scrollbar.shadow#00000055
  • scrollbarSlider.activeBackground#EAEAEA92
  • scrollbarSlider.background#EAEAEA44
  • scrollbarSlider.hoverBackground#EAEAEA77
  • selection.background#EAEAEA77
  • settings.headerForeground#EAEAEA
  • settings.modifiedItemIndicator#8AB800
  • sideBar.background#000000
  • sideBar.border#000000
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.foreground#EAEAEA99
  • sideBarTitle.foreground#EAEAEA99
  • statusBar.background#000000
  • statusBar.border#000000
  • statusBar.debuggingBackground#DC4904
  • statusBar.debuggingForeground#000000dd
  • statusBar.foreground#EAEAEA
  • statusBar.noFolderBackground#000000
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#4D4D4D33
  • statusBarItem.prominentHoverBackground#00000030
  • tab.activeBackground#000000
  • tab.activeBorder#B30303
  • tab.activeForeground#EAEAEA
  • tab.border#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#EAEAEA99
  • tab.unfocusedActiveBorder#EAEAEA99
  • tab.unfocusedActiveForeground#EAEAEA99
  • tab.unfocusedInactiveForeground#EAEAEA99
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2527CE
  • terminal.ansiBrightBlack#4D4D4D
  • terminal.ansiBrightBlue#2E31FC
  • terminal.ansiBrightCyan#3BB1D4
  • terminal.ansiBrightGreen#BAF602
  • terminal.ansiBrightMagenta#F01294
  • terminal.ansiBrightRed#FF0100
  • terminal.ansiBrightWhite#D6D6D6
  • terminal.ansiBrightYellow#FD6C13
  • terminal.ansiCyan#277890
  • terminal.ansiGreen#8AB800
  • terminal.ansiMagenta#B20B6D
  • terminal.ansiRed#B30303
  • terminal.ansiWhite#AFAFAF
  • terminal.ansiYellow#DC4904
  • terminal.background#000000
  • terminal.foreground#EAEAEA
  • textBlockQuote.background#000000
  • textLink.activeForeground#B30303
  • textLink.foreground#B30303
  • textPreformat.foreground#EAEAEA
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#EAEAEA
  • titleBar.border#000000
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#EAEAEA
  • walkThrough.embeddedEditorBackground#000000
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#EAEAEA
comment#4D4D4Db0
string, constant.other.symbol#8AB800
string.regexp, constant.character, constant.other#3BB1D4
constant.numeric#F01294
constant.language#EAEAEA
variable.other.declaration#EAEAEA
variable.other.readwrite, variable.other.object#3BB1D4
variable.member#B30303
meta.object-literal.key, meta.object.member, entity.name.property, support.property#FD6C13
variable.language#8AB800italic
storage#FD6C13
keyword#B20B6D
keyword.operator#B30303
storage.modifier#B20B6D
punctuation.separator, punctuation.terminator#EAEAEAb0
punctuation.section#EAEAEA
punctuation.accessor#DC4904
source.java storage.type, source.haskell storage.type, source.c storage.type#2E31FC
entity.other.inherited-class#8AB800
storage.type.function#B20B6D
source.java storage.type.primitive#8AB800
entity.name.function, entity.name.function.declaration, meta.function entity.name.function, meta.function.declaration entity.name.function#EAEAEA
variable.parameter, meta.parameter#EAEAEA
variable.function, variable.annotation, meta.function-call, source.function-call, support.function.go#FD6C13
meta.function-call variable.function, meta.function-call support.function, meta.function-call entity.name.function#FD6C13
support.function, support.macro#FD6C13
entity.name.import, entity.name.package#BAF602
entity.name#2E31FC
entity.name.tag, meta.tag.sgml#8AB800
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#8AB80077
entity.other.attribute-name#FD6C13
support.constant#DC4904italic
support.type, support.class, source.go storage.type#8AB800
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#F01294
invalid#2527CE
meta.diff, meta.diff.header#F01294
source.ruby variable.other.readwrite#FD6C13
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#2E31FC
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#4D4D4Db0
support.type.property-name#8AB800normal
constant.numeric.line-number.find-in-files - match#4D4D4Db0
constant.numeric.line-number.match#FD6C13
entity.name.filename.find-in-files#BAF602
message.error#2527CE
markup.heading, markup.heading entity.name#BAF602bold
markup.underline.link, string.other.link#8AB800
markup.italic#B30303italic
markup.bold#B30303bold
markup.italic markup.bold, markup.bold markup.italicbold italic
markup.raw
markup.raw.inline
meta.separator#4D4D4Db0bold
markup.quote#3BB1D4italic
markup.list punctuation.definition.list.begin#FD6C13
markup.inserted#8AB800
markup.changed#DC4904
markup.deleted#2527CE
markup.strike#F01294
markup.table#8AB800
text.html.markdown markup.inline.raw#DC4904
text.html.markdown meta.dummy.line-break#4D4D4Db0
punctuation.definition.markdown#4D4D4Db0