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#23232333
  • activityBar.foreground#232323
  • activityBarBadge.background#B30303
  • activityBarBadge.foreground#000000
  • badge.background#B30303
  • badge.foreground#000000
  • button.background#B30303
  • button.foreground#000000
  • debugExceptionWidget.background#000000
  • debugExceptionWidget.border#23232333
  • debugToolBar.background#000000
  • diffEditor.insertedTextBackground#8AB80033
  • diffEditor.removedTextBackground#DC490433
  • dropdown.background#000000
  • dropdown.border#23232377
  • dropdown.foreground#EAEAEA99
  • editor.background#000000
  • editor.findMatchBackground#B303030e
  • editor.findMatchBorder#B30303
  • editor.findMatchHighlightBackground#B303030e
  • editor.findMatchHighlightBorder#B3030366
  • editor.findRangeHighlightBackground#23232344
  • editor.findRangeHighlightBorder#00000000
  • editor.foreground#EAEAEA
  • editor.inactiveSelectionBackground#23232344
  • editor.lineHighlightBackground#EAEAEA22
  • editor.rangeHighlightBackground#23232333
  • editor.selectionBackground#23232377
  • editor.selectionHighlightBackground#23232344
  • editor.selectionHighlightBorder#232323
  • editor.wordHighlightBackground#23232344
  • editor.wordHighlightStrongBackground#8AB80077
  • editorBracketMatch.background#23232333
  • editorBracketMatch.border#23232355
  • editorCodeLens.foreground#232323b0
  • editorCursor.foreground#EAEAEA
  • editorError.foreground#B30303
  • editorGroup.border#23232333
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#23232333
  • editorGutter.addedBackground#8AB800bb
  • editorGutter.deletedBackground#2527CEbb
  • editorGutter.modifiedBackground#DC4904bb
  • editorHint.foreground#8AB800
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#23232322
  • editorIndentGuide.activeBackground#23232377
  • editorIndentGuide.background#23232344
  • editorInfo.foreground#2527CE
  • editorLineNumber.activeForeground#232323
  • editorLineNumber.foreground#23232392
  • editorLink.activeForeground#B30303
  • editorMarkerNavigation.background#000000
  • editorOverviewRuler.addedForeground#8AB800bb
  • editorOverviewRuler.border#23232333
  • editorOverviewRuler.deletedForeground#2527CEbb
  • editorOverviewRuler.errorForeground#2527CE
  • editorOverviewRuler.modifiedForeground#DC4904bb
  • editorOverviewRuler.warningForeground#B30303
  • editorRuler.foreground#23232344
  • editorStickyScroll.background#000000
  • editorStickyScrollHover.background#000000
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#23232322
  • editorSuggestWidget.highlightForeground#B30303
  • editorSuggestWidget.selectedBackground#23232333
  • editorWarning.foreground#DC4904
  • editorWhitespace.foreground#23232366
  • 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#B20B6Db0
  • gitDecoration.untrackedResourceForeground#8AB800cc
  • input.background#000000
  • input.border#23232355
  • input.foreground#EAEAEA
  • input.placeholderForeground#23232377
  • inputOption.activeBorder#B30303
  • inputValidation.errorBackground#000000
  • inputValidation.errorBorder#2527CE
  • inputValidation.infoBackground#000000
  • inputValidation.infoBorder#8AB800
  • inputValidation.warningBackground#000000
  • inputValidation.warningBorder#DC4904
  • list.activeSelectionBackground#23232333
  • list.activeSelectionForeground#EAEAEA
  • list.focusBackground#23232333
  • list.focusForeground#EAEAEA99
  • list.highlightForeground#B30303
  • list.hoverBackground#23232333
  • list.hoverForeground#EAEAEA99
  • list.inactiveSelectionBackground#23232333
  • list.inactiveSelectionForeground#EAEAEA99
  • list.invalidItemForeground#EAEAEA77
  • panel.background#000000
  • panel.border#23232333
  • panelTitle.activeBorder#B30303
  • panelTitle.activeForeground#EAEAEA
  • panelTitle.inactiveForeground#EAEAEA99
  • peekView.border#23232333
  • 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#23232333
  • 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#23232333
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.foreground#EAEAEA99
  • sideBarTitle.foreground#EAEAEA99
  • statusBar.background#000000
  • statusBar.border#23232333
  • statusBar.debuggingBackground#DC4904
  • statusBar.debuggingForeground#000000dd
  • statusBar.foreground#EAEAEA
  • statusBar.noFolderBackground#000000
  • statusBarItem.activeBackground#00000050
  • statusBarItem.hoverBackground#00000030
  • statusBarItem.prominentBackground#23232333
  • statusBarItem.prominentHoverBackground#00000030
  • tab.activeBackground#000000
  • tab.activeBorderTop#B30303
  • tab.activeForeground#EAEAEA
  • tab.border#23232333
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#EAEAEA99
  • tab.unfocusedActiveBorderTop#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#B30303
  • textLink.foreground#B30303
  • textPreformat.foreground#EAEAEA
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#EAEAEA
  • titleBar.border#23232333
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#EAEAEA
  • walkThrough.embeddedEditorBackground#000000
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#EAEAEA
comment#232323b0
string, constant.other.symbol#8AB800
string.regexp, constant.character, constant.other#277890
constant.numeric#B20B6D
constant.language#EAEAEA
variable.other.declaration#EAEAEA
variable.other.readwrite, variable.other.object#277890
variable.member#B30303
meta.object-literal.key, meta.object.member, entity.name.property, support.property#DC4904
variable.language#8AB800italic
storage#DC4904
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#2527CE
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#DC4904
meta.function-call variable.function, meta.function-call support.function, meta.function-call entity.name.function#DC4904
support.function, support.macro#DC4904
entity.name.import, entity.name.package#8AB800
entity.name#2527CE
entity.name.tag, meta.tag.sgml#8AB800
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#8AB80077
entity.other.attribute-name#DC4904
support.constant#DC4904italic
support.type, support.class, source.go storage.type#8AB800
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#B20B6D
invalid#2527CE
meta.diff, meta.diff.header#B20B6D
source.ruby variable.other.readwrite#DC4904
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#2527CE
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#232323b0
support.type.property-name#8AB800normal
constant.numeric.line-number.find-in-files - match#232323b0
constant.numeric.line-number.match#DC4904
entity.name.filename.find-in-files#8AB800
message.error#2527CE
markup.heading, markup.heading entity.name#8AB800bold
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#232323b0bold
markup.quote#277890italic
markup.list punctuation.definition.list.begin#DC4904
markup.inserted#8AB800
markup.changed#DC4904
markup.deleted#2527CE
markup.strike#B20B6D
markup.table#8AB800
text.html.markdown markup.inline.raw#DC4904
text.html.markdown meta.dummy.line-break#232323b0
punctuation.definition.markdown#232323b0
Xresources Theme plus by NekkiNeks - VS Code Theme