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.activeBorder#fff
  • activityBar.background#262626
  • activityBar.border#131313
  • activityBar.foreground#d1d5da
  • activityBar.inactiveForeground#6a737d
  • activityBarBadge.background#1d5bc9
  • activityBarBadge.foreground#fff
  • badge.background#1d5bc9
  • badge.foreground#fff
  • breadcrumb.activeSelectionForeground#d1d5da
  • breadcrumb.focusForeground#d1d5da
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#313031
  • button.background#1d5bc9
  • button.foreground#fff
  • button.hoverBackground#4091c9
  • checkbox.background#4f4e4f
  • checkbox.border#131313
  • debugToolBar.background#2b3036
  • descriptionForeground#959da5
  • diffEditor.insertedTextBackground#28a74530
  • diffEditor.removedTextBackground#d73a4930
  • dropdown.background#313031
  • dropdown.border#131313
  • dropdown.foreground#d1d5da
  • dropdown.listBackground#262626
  • editor.background#262626
  • editor.findMatchBackground#ffd33d44
  • editor.findMatchHighlightBackground#ffd33d22
  • editor.foldBackground#202020
  • editor.foreground#d1d5da
  • editor.inactiveSelectionBackground#3392FF22
  • editor.lineHighlightBackground#313031
  • editor.selectionBackground#3392FF44
  • editor.selectionHighlightBackground#586069
  • editor.selectionHighlightBorder#00000000
  • editor.wordHighlightBackground#00000000
  • editor.wordHighlightBorder#d1d5da
  • editor.wordHighlightStrongBackground#00000000
  • editor.wordHighlightStrongBorder#d1d5da
  • editorBracketMatch.background#586069
  • editorBracketMatch.border#00000000
  • editorCursor.foreground#fff
  • editorError.foreground#F32E2E
  • editorGroup.border#131313
  • editorGroupHeader.tabsBackground#202020
  • editorGroupHeader.tabsBorder#131313
  • editorGutter.addedBackground#28a745
  • editorGutter.deletedBackground#d73a49
  • editorGutter.modifiedBackground#f1993b
  • editorIndentGuide.activeBackground#4f4e4f
  • editorIndentGuide.background#313031
  • editorInfo.foreground#4091c9
  • editorInlayHint.background#313031
  • editorInlayHint.foreground#586069
  • editorLineNumber.activeForeground#d1d5da
  • editorLineNumber.foreground#4f4e4f
  • editorOverviewRuler.border#131313
  • editorWarning.foreground#FFA826
  • editorWhitespace.foreground#4f4e4f
  • editorWidget.background#202020
  • errorForeground#e54468
  • focusBorder#00000000
  • foreground#d1d5da
  • gitDecoration.addedResourceForeground#85e89d
  • gitDecoration.conflictingResourceForeground#b392f0
  • gitDecoration.deletedResourceForeground#d73a49
  • gitDecoration.ignoredResourceForeground#6a737d
  • gitDecoration.modifiedResourceForeground#f1993b
  • gitDecoration.submoduleResourceForeground#6a737d
  • gitDecoration.untrackedResourceForeground#f692ce
  • input.background#262626
  • input.border#262626
  • input.foreground#d1d5da
  • input.placeholderForeground#959da5
  • list.activeSelectionBackground#1d5bc9
  • list.activeSelectionForeground#d1d5da
  • list.focusBackground#4f4e4f
  • list.hoverBackground#313031
  • list.hoverForeground#d1d5da
  • list.inactiveFocusBackground#313031
  • list.inactiveSelectionBackground#3392FF22
  • list.inactiveSelectionForeground#d1d5da
  • notificationCenterHeader.background#262626
  • notificationCenterHeader.foreground#959da5
  • notifications.background#313031
  • notifications.border#131313
  • notifications.foreground#d1d5da
  • notificationsErrorIcon.foreground#d73a49
  • notificationsInfoIcon.foreground#6a737d
  • notificationsWarningIcon.foreground#f1993b
  • panel.background#202020
  • panel.border#131313
  • panelInput.border#313031
  • panelTitle.activeBorder#fff
  • panelTitle.activeForeground#d1d5da
  • panelTitle.inactiveForeground#959da5
  • peekViewEditor.background#202020
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#202020
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#4f4e4f
  • pickerGroup.foreground#d1d5da
  • progressBar.background#4091c9
  • quickInput.background#202020
  • quickInput.foreground#d1d5da
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#6a737d88
  • scrollbarSlider.background#6a737d33
  • scrollbarSlider.hoverBackground#6a737d44
  • settings.headerForeground#d1d5da
  • settings.modifiedItemIndicator#4091c9
  • sideBar.background#202020
  • sideBar.border#131313
  • sideBar.foreground#d1d5da
  • sideBarSectionHeader.background#202020
  • sideBarSectionHeader.border#131313
  • sideBarSectionHeader.foreground#d1d5da
  • sideBarTitle.foreground#d1d5da
  • statusBar.background#202020
  • statusBar.border#131313
  • statusBar.debuggingBackground#fff
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#d1d5da
  • statusBar.noFolderBackground#262626
  • statusBarItem.prominentBackground#00000000
  • tab.activeBackground#262626
  • tab.activeBorder#262626
  • tab.activeBorderTop#fff
  • tab.activeForeground#d1d5da
  • tab.border#131313
  • tab.hoverBackground#262626
  • tab.inactiveBackground#202020
  • tab.inactiveForeground#959da5
  • tab.unfocusedActiveBorder#262626
  • tab.unfocusedActiveBorderTop#131313
  • tab.unfocusedHoverBackground#262626
  • terminal.ansiBlack#313031
  • terminal.ansiBlue#4091c9
  • terminal.ansiBrightBlack#4f4e4f
  • terminal.ansiBrightBlue#4091c9
  • terminal.ansiBrightCyan#9ecbff
  • terminal.ansiBrightGreen#85e89d
  • terminal.ansiBrightMagenta#b392f0
  • terminal.ansiBrightRed#f97583
  • terminal.ansiBrightWhite#fff
  • terminal.ansiBrightYellow#f1993b
  • terminal.ansiCyan#9ecbff
  • terminal.ansiGreen#85e89d
  • terminal.ansiMagenta#b392f0
  • terminal.ansiRed#f97583
  • terminal.ansiWhite#d1d5da
  • terminal.ansiYellow#f1993b
  • terminal.foreground#d1d5da
  • textBlockQuote.background#262626
  • textBlockQuote.border#4f4e4f
  • textCodeBlock.background#313031
  • textLink.activeForeground#fff
  • textLink.foreground#4091c9
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#262626
  • titleBar.activeForeground#d1d5da
  • titleBar.border#131313
  • titleBar.inactiveBackground#202020
  • titleBar.inactiveForeground#959da5
  • tree.indentGuidesStroke#313031
  • welcomePage.buttonBackground#313031
  • welcomePage.buttonHoverBackground#4f4e4f
  • widget.shadow#202020

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6a737d
constant, entity.name.constant, variable.other.constant, variable.language#4091c9
entity, entity.name#b392f0
variable.parameter.function#d1d5da
entity.name.tag#85e89d
keyword#D76496
storage, storage.type#D76496
storage.modifier.package, storage.modifier.import, storage.type.java#d1d5da
string, punctuation.definition.string, string punctuation.section.embedded source#9ecbff
support#4091c9
meta.property-name#4091c9
variable#f1993b
variable.other#d1d5da
invalid.broken#f97583italic
invalid.deprecated#f97583italic
invalid.illegal#f97583italic
invalid.unimplemented#f97583italic
carriage-return#262626italic underline
message.error#f97583
string source#d1d5da
string variable#4091c9
source.regexp, string.regexp#fff
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#fff
string.regexp constant.character.escape#85e89dbold
support.constant#4091c9
support.variable#4091c9
meta.module-reference#4091c9
punctuation.definition.list.begin.markdown#f1993b
markup.heading, markup.heading entity.name#4091c9bold
markup.quote#85e89d
markup.italic#d1d5daitalic
markup.bold#d1d5dabold
markup.raw#4091c9
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#f97583
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#85e89d
markup.changed, punctuation.definition.changed#f1993b
markup.ignored, markup.untracked#313031
meta.diff.range#b392f0bold
meta.diff.header#4091c9
meta.separator#4091c9bold
meta.output#4091c9
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#d1d5da
brackethighlighter.unmatched#f97583
constant.other.reference.link, string.other.link#fffunderline