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#FF0100
  • activityBarBadge.foreground#000000
  • badge.background#FF0100
  • badge.foreground#000000
  • button.background#FF0100
  • button.foreground#000000
  • debugExceptionWidget.background#000000
  • debugExceptionWidget.border#4D4D4D33
  • debugToolBar.background#000000
  • diffEditor.insertedTextBackground#BAF60233
  • diffEditor.removedTextBackground#FD6C1333
  • dropdown.background#000000
  • dropdown.border#4D4D4D77
  • dropdown.foreground#EAEAEA99
  • editor.background#000000
  • editor.findMatchBackground#FF01000e
  • editor.findMatchBorder#FF0100
  • editor.findMatchHighlightBackground#FF01000e
  • editor.findMatchHighlightBorder#FF010066
  • 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#BAF60277
  • editorBracketMatch.background#4D4D4D33
  • editorBracketMatch.border#4D4D4D55
  • editorCodeLens.foreground#4D4D4Db0
  • editorCursor.foreground#EAEAEA
  • editorError.foreground#FF0100
  • editorGroup.border#4D4D4D33
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#BAF602bb
  • editorGutter.deletedBackground#2E31FCbb
  • editorGutter.modifiedBackground#FD6C13bb
  • editorHint.foreground#BAF602
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#4D4D4D22
  • editorIndentGuide.activeBackground#4D4D4D77
  • editorIndentGuide.background#4D4D4D44
  • editorInfo.foreground#2E31FC
  • editorLineNumber.activeForeground#4D4D4D
  • editorLineNumber.foreground#4D4D4D92
  • editorLink.activeForeground#FF0100
  • editorMarkerNavigation.background#000000
  • editorOverviewRuler.addedForeground#BAF602bb
  • editorOverviewRuler.border#4D4D4D33
  • editorOverviewRuler.deletedForeground#2E31FCbb
  • editorOverviewRuler.errorForeground#2E31FC
  • editorOverviewRuler.modifiedForeground#FD6C13bb
  • editorOverviewRuler.warningForeground#FF0100
  • editorRuler.foreground#4D4D4D44
  • editorStickyScroll.background#000000
  • editorStickyScrollHover.background#000000
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#4D4D4D22
  • editorSuggestWidget.highlightForeground#FF0100
  • editorSuggestWidget.selectedBackground#4D4D4D33
  • editorWarning.foreground#FD6C13
  • editorWhitespace.foreground#4D4D4D66
  • editorWidget.background#000000
  • extensionButton.prominentBackground#FF0100
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#FF0100b3
  • focusBorder#FF010077
  • foreground#EAEAEA99
  • gitDecoration.deletedResourceForeground#2E31FCcc
  • gitDecoration.ignoredResourceForeground#EAEAEA66
  • gitDecoration.modifiedResourceForeground#FD6C13cc
  • gitDecoration.submoduleResourceForeground#F01294b0
  • gitDecoration.untrackedResourceForeground#BAF602cc
  • input.background#000000
  • input.border#4D4D4D55
  • input.foreground#EAEAEA
  • input.placeholderForeground#4D4D4D77
  • inputOption.activeBorder#FF0100
  • inputValidation.errorBackground#000000
  • inputValidation.errorBorder#2E31FC
  • inputValidation.infoBackground#000000
  • inputValidation.infoBorder#BAF602
  • inputValidation.warningBackground#000000
  • inputValidation.warningBorder#FD6C13
  • list.activeSelectionBackground#4D4D4D33
  • list.activeSelectionForeground#EAEAEA
  • list.focusBackground#4D4D4D33
  • list.focusForeground#EAEAEA99
  • list.highlightForeground#FF0100
  • list.hoverBackground#4D4D4D33
  • list.hoverForeground#EAEAEA99
  • list.inactiveSelectionBackground#4D4D4D33
  • list.inactiveSelectionForeground#EAEAEA99
  • list.invalidItemForeground#EAEAEA77
  • panel.background#000000
  • panel.border#4D4D4D33
  • panelTitle.activeBorder#FF0100
  • panelTitle.activeForeground#EAEAEA
  • panelTitle.inactiveForeground#EAEAEA99
  • peekView.border#4D4D4D33
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#FF010044
  • peekViewResult.background#000000
  • peekViewResult.fileForeground#EAEAEA99
  • peekViewResult.matchHighlightBackground#FF010044
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#EAEAEA99
  • peekViewTitleLabel.foreground#EAEAEA99
  • pickerGroup.border#4D4D4D33
  • pickerGroup.foreground#EAEAEAb3
  • progressBar.background#FF0100
  • scrollbar.shadow#00000055
  • scrollbarSlider.activeBackground#EAEAEA92
  • scrollbarSlider.background#EAEAEA44
  • scrollbarSlider.hoverBackground#EAEAEA77
  • selection.background#EAEAEA77
  • settings.headerForeground#EAEAEA
  • settings.modifiedItemIndicator#BAF602
  • sideBar.background#000000
  • sideBar.border#000000
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.foreground#EAEAEA99
  • sideBarTitle.foreground#EAEAEA99
  • statusBar.background#000000
  • statusBar.border#000000
  • statusBar.debuggingBackground#FD6C13
  • 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#FF0100
  • tab.activeForeground#EAEAEA
  • tab.border#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#EAEAEA99
  • tab.unfocusedActiveBorder#EAEAEA99
  • tab.unfocusedActiveForeground#EAEAEA99
  • tab.unfocusedInactiveForeground#EAEAEA99
  • terminal.ansiBlack#232323
  • 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#FF0100
  • textLink.foreground#FF0100
  • 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#BAF602
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#FF0100
meta.object-literal.key, meta.object.member, entity.name.property, support.property#FD6C13
variable.language#BAF602italic
storage#FD6C13
keyword#F01294
keyword.operator#FF0100
storage.modifier#F01294
punctuation.separator, punctuation.terminator#EAEAEAb0
punctuation.section#EAEAEA
punctuation.accessor#FD6C13
source.java storage.type, source.haskell storage.type, source.c storage.type#2E31FC
entity.other.inherited-class#BAF602
storage.type.function#F01294
source.java storage.type.primitive#BAF602
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#BAF602
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#BAF60277
entity.other.attribute-name#FD6C13
support.constant#FD6C13italic
support.type, support.class, source.go storage.type#BAF602
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#F01294
invalid#2E31FC
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#BAF602normal
constant.numeric.line-number.find-in-files - match#4D4D4Db0
constant.numeric.line-number.match#FD6C13
entity.name.filename.find-in-files#BAF602
message.error#2E31FC
markup.heading, markup.heading entity.name#BAF602bold
markup.underline.link, string.other.link#BAF602
markup.italic#FF0100italic
markup.bold#FF0100bold
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#BAF602
markup.changed#FD6C13
markup.deleted#2E31FC
markup.strike#F01294
markup.table#BAF602
text.html.markdown markup.inline.raw#FD6C13
text.html.markdown meta.dummy.line-break#4D4D4Db0
punctuation.definition.markdown#4D4D4Db0