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#a3a3a3
  • activityBar.background#282828
  • activityBar.border#1e1e1e
  • activityBar.foreground#505050
  • activityBar.inactiveForeground#717171
  • activityBarBadge.background#545454
  • activityBarBadge.foreground#000000
  • badge.background#373737
  • badge.foreground#dcdcdc
  • breadcrumb.activeSelectionForeground#7d7d7d
  • breadcrumb.focusForeground#505050
  • breadcrumb.foreground#9b9b9b
  • breadcrumbPicker.background#2f2f2f
  • button.background#4d4d4d
  • button.foreground#3e3e3e
  • button.hoverBackground#5f5f5f
  • checkbox.background#4b4b4b
  • checkbox.border#1e1e1e
  • debugToolBar.background#2f2f2f
  • descriptionForeground#9b9b9b
  • diffEditor.insertedTextBackground#76767630
  • diffEditor.removedTextBackground#6a6a6a30
  • dropdown.background#343434
  • dropdown.border#1e1e1e
  • dropdown.foreground#505050
  • dropdown.listBackground#282828
  • editor.background#282828
  • editor.findMatchBackground#cfcfcf44
  • editor.findMatchHighlightBackground#cfcfcf22
  • editor.focusedStackFrameHighlightBackground#8888888
  • editor.foldBackground#2c2c2c
  • editor.foreground#505050
  • editor.inactiveSelectionBackground#81818122
  • editor.lineHighlightBackground#2f2f2f
  • editor.selectionBackground#81818144
  • editor.selectionHighlightBackground#a7a7a733
  • editor.selectionHighlightBorder#a7a7a700
  • editor.stackFrameHighlightBackground#7979797
  • editor.wordHighlightBackground#a7a7a700
  • editor.wordHighlightBorder#a7a7a799
  • editor.wordHighlightStrongBackground#a7a7a700
  • editor.wordHighlightStrongBorder#a7a7a766
  • editorBracketMatch.background#a7a7a750
  • editorBracketMatch.border#a7a7a700
  • editorCursor.foreground#dcdcdc
  • editorGroup.border#1e1e1e
  • editorGroupHeader.tabsBackground#222222
  • editorGroupHeader.tabsBorder#1e1e1e
  • editorGutter.addedBackground#767676
  • editorGutter.deletedBackground#7b7b7b
  • editorGutter.modifiedBackground#767676
  • editorIndentGuide.activeBackground#4b4b4b
  • editorIndentGuide.background#343434
  • editorLineNumber.activeForeground#505050
  • editorLineNumber.foreground#4b4b4b
  • editorOverviewRuler.border#1e1e1e
  • editorWhitespace.foreground#4b4b4b
  • editorWidget.background#222222
  • errorForeground#9e9e9e
  • focusBorder#4b4b4b
  • foreground#7d7d7d
  • gitDecoration.addedResourceForeground#949494
  • gitDecoration.conflictingResourceForeground#bdbdbd
  • gitDecoration.deletedResourceForeground#7b7b7b
  • gitDecoration.ignoredResourceForeground#717171
  • gitDecoration.modifiedResourceForeground#acacac
  • gitDecoration.submoduleResourceForeground#717171
  • gitDecoration.untrackedResourceForeground#949494
  • input.background#343434
  • input.border#1e1e1e
  • input.foreground#505050
  • input.placeholderForeground#9b9b9b
  • list.activeSelectionBackground#3f3f3f
  • list.activeSelectionForeground#505050
  • list.focusBackground#373737
  • list.hoverBackground#2c2c2c
  • list.hoverForeground#505050
  • list.inactiveFocusBackground#2a2a2a
  • list.inactiveSelectionBackground#2c2c2c
  • list.inactiveSelectionForeground#505050
  • notificationCenterHeader.background#282828
  • notificationCenterHeader.foreground#9b9b9b
  • notifications.background#343434
  • notifications.border#1e1e1e
  • notifications.foreground#505050
  • notificationsErrorIcon.foreground#7b7b7b
  • notificationsInfoIcon.foreground#acacac
  • notificationsWarningIcon.foreground#bdbdbd
  • panel.background#222222
  • panel.border#1e1e1e
  • panelInput.border#343434
  • panelTitle.activeBorder#a3a3a3
  • panelTitle.activeForeground#505050
  • panelTitle.inactiveForeground#9b9b9b
  • peekViewEditor.background#22222288
  • peekViewEditor.matchHighlightBackground#cfcfcf33
  • peekViewResult.background#222222
  • peekViewResult.matchHighlightBackground#cfcfcf33
  • pickerGroup.border#4b4b4b
  • pickerGroup.foreground#505050
  • progressBar.background#545454
  • quickInput.background#282828
  • quickInput.foreground#505050
  • scrollbar.shadow#0000008
  • scrollbarSlider.activeBackground#71717188
  • scrollbarSlider.background#71717133
  • scrollbarSlider.hoverBackground#71717144
  • settings.headerForeground#505050
  • settings.modifiedItemIndicator#545454
  • sideBar.background#222222
  • sideBar.border#1e1e1e
  • sideBar.foreground#7d7d7d
  • sideBarSectionHeader.background#222222
  • sideBarSectionHeader.border#1e1e1e
  • sideBarSectionHeader.foreground#505050
  • sideBarTitle.foreground#505050
  • statusBar.background#282828
  • statusBar.border#1e1e1e
  • statusBar.debuggingBackground#3d3d3d
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#7d7d7d
  • statusBar.noFolderBackground#282828
  • statusBarItem.prominentBackground#2c2c2c
  • tab.activeBackground#282828
  • tab.activeBorder#282828
  • tab.activeBorderTop#a3a3a3
  • tab.activeForeground#505050
  • tab.border#1e1e1e
  • tab.hoverBackground#282828
  • tab.inactiveBackground#222222
  • tab.inactiveForeground#9b9b9b
  • tab.unfocusedActiveBorder#282828
  • tab.unfocusedActiveBorderTop#1e1e1e
  • tab.unfocusedHoverBackground#282828
  • terminal.foreground#7d7d7d
  • textBlockQuote.background#282828
  • textBlockQuote.border#4b4b4b
  • textCodeBlock.background#343434
  • textLink.activeForeground#dcdcdc
  • textLink.foreground#acacac
  • textPreformat.foreground#7d7d7d
  • textSeparator.foreground#5e5e5e
  • titleBar.activeBackground#282828
  • titleBar.activeForeground#505050
  • titleBar.border#1e1e1e
  • titleBar.inactiveBackground#222222
  • titleBar.inactiveForeground#9b9b9b
  • tree.indentGuidesStroke#343434
  • welcomePage.buttonBackground#343434
  • welcomePage.buttonHoverBackground#4b4b4b

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#717171
constant, entity.name.constant, variable.other.constant, variable.language#acacac
entity, entity.name#a6a6a6
variable.parameter.function#505050
entity.name.tag#c2c2c2
keyword#9e9e9e
storage, storage.type#9e9e9e
storage.modifier.package, storage.modifier.import, storage.type.java#505050
string, punctuation.definition.string, string punctuation.section.embedded source#c3c3c3
support#acacac
meta.property-name#acacac
variable#bdbdbd
variable.other#505050
invalid.broken#c6c6c6italic
invalid.deprecated#c6c6c6italic
invalid.illegal#c6c6c6italic
invalid.unimplemented#c6c6c6italic
carriage-return#282828italic underline
message.error#c6c6c6
string source#505050
string variable#acacac
source.regexp, string.regexp#363636
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#363636
string.regexp constant.character.escape#c2c2c2bold
support.constant#acacac
support.variable#acacac
meta.module-reference#acacac
punctuation.definition.list.begin.markdown#bdbdbd
markup.heading, markup.heading entity.name#acacacbold
markup.quote#c2c2c2
markup.italic#505050italic
markup.bold#505050bold
markup.raw#acacac
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#c6c6c6
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#c2c2c2
markup.changed, punctuation.definition.changed#bdbdbd
markup.ignored, markup.untracked#343434
meta.diff.range#a6a6a6bold
meta.diff.header#acacac
meta.separator#acacacbold
meta.output#acacac
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#7d7d7d
brackethighlighter.unmatched#c6c6c6
constant.other.reference.link, string.other.link#363636underline