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#62C9C3
  • activityBar.background#1f2428
  • activityBar.border#282e33
  • activityBar.foreground#e7e7e7
  • activityBar.inactiveForeground#6a737d
  • activityBarBadge.background#0366d6
  • activityBarBadge.foreground#fff
  • badge.background#044289
  • badge.foreground#c8e1ff
  • breadcrumb.activeSelectionForeground#d1d5da
  • breadcrumb.focusForeground#e7e7e7
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#2b2d34
  • button.background#176f2c
  • button.foreground#dcffe4
  • button.hoverBackground#22863a
  • button.secondaryBackground#444d56
  • button.secondaryForeground#fff
  • button.secondaryHoverBackground#586069
  • checkbox.background#444d56
  • checkbox.border#242a3f
  • debugToolBar.background#2b2d34
  • descriptionForeground#959da5
  • diffEditor.insertedTextBackground#28a74530
  • diffEditor.removedTextBackground#d73a4930
  • dropdown.background#1f2428
  • dropdown.border#242a3f
  • dropdown.foreground#e7e7e7
  • dropdown.listBackground#1f2428
  • editor.background#1f2428
  • editor.findMatchBackground#ffd33d44
  • editor.findMatchHighlightBackground#ffd33d22
  • editor.focusedStackFrameHighlightBackground#2b6a3033
  • editor.foldBackground#58606915
  • editor.foreground#e7e7e7
  • editor.inactiveSelectionBackground#3392FF22
  • editor.lineHighlightBackground#4c576155
  • editor.linkedEditingBackground#3392FF22
  • editor.selectionBackground#3392FF44
  • editor.selectionHighlightBackground#17E5E633
  • editor.selectionHighlightBorder#17E5E600
  • editor.stackFrameHighlightBackground#C6902625
  • editor.wordHighlightBackground#17E5E600
  • editor.wordHighlightBorder#17E5E699
  • editor.wordHighlightStrongBackground#17E5E600
  • editor.wordHighlightStrongBorder#17E5E666
  • editorBracketMatch.background#17E5E650
  • editorBracketMatch.border#17E5E600
  • editorCursor.foreground#E8F6EF
  • editorGroup.border#242a3f
  • editorGroupHeader.tabsBackground#202429
  • editorGroupHeader.tabsBorder#282e33
  • editorGutter.addedBackground#28a745
  • editorGutter.deletedBackground#ea4a5a
  • editorGutter.modifiedBackground#2188ff
  • editorIndentGuide.activeBackground#444d56
  • editorIndentGuide.background#1f2428
  • editorLineNumber.activeForeground#e7e7e7
  • editorLineNumber.foreground#444d56
  • editorOverviewRuler.border#242a3f
  • editorWhitespace.foreground#444d56
  • editorWidget.background#202429
  • errorForeground#f97583
  • focusBorder#4c5761
  • foreground#d1d5da
  • gitDecoration.addedResourceForeground#34d058
  • gitDecoration.conflictingResourceForeground#9bb1ff
  • gitDecoration.deletedResourceForeground#ea4a5a
  • gitDecoration.ignoredResourceForeground#6a737d
  • gitDecoration.modifiedResourceForeground#5CCFE6
  • gitDecoration.submoduleResourceForeground#6a737d
  • gitDecoration.untrackedResourceForeground#34d058
  • input.background#1f2428
  • input.border#242a3f
  • input.foreground#e7e7e7
  • input.placeholderForeground#959da5
  • list.activeSelectionBackground#434d56
  • list.activeSelectionForeground#e7e7e7
  • list.focusBackground#282e33
  • list.hoverBackground#434d56
  • list.hoverForeground#e7e7e7
  • list.inactiveFocusBackground#1d2d3e
  • list.inactiveSelectionBackground#1f2428
  • list.inactiveSelectionForeground#e7e7e7
  • notificationCenterHeader.background#1f2428
  • notificationCenterHeader.foreground#959da5
  • notifications.background#1f2428
  • notifications.border#242a3f
  • notifications.foreground#e7e7e7
  • notificationsErrorIcon.foreground#ea4a5a
  • notificationsInfoIcon.foreground#5CCFE6
  • notificationsWarningIcon.foreground#9bb1ff
  • panel.background#202420
  • panel.border#5e6b78
  • panelInput.border#1f2428
  • panelTitle.activeBorder#62C9C3
  • panelTitle.activeForeground#e7e7e7
  • panelTitle.inactiveForeground#959da5
  • peekViewEditor.background#20242988
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#202429
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#444d56
  • pickerGroup.foreground#e7e7e7
  • progressBar.background#0366d6
  • quickInput.background#1f2428
  • quickInput.foreground#e7e7e7
  • scrollbar.shadow#0008
  • scrollbarSlider.activeBackground#6a737d88
  • scrollbarSlider.background#4c5761a0
  • scrollbarSlider.hoverBackground#6a737d44
  • settings.headerForeground#e7e7e7
  • settings.modifiedItemIndicator#0366d6
  • sideBar.background#24292e
  • sideBar.border#242a3f
  • sideBar.foreground#d1d5da
  • sideBarSectionHeader.background#202429
  • sideBarSectionHeader.border#242a3f
  • sideBarSectionHeader.foreground#e7e7e7
  • sideBarTitle.foreground#e7e7e7
  • statusBar.background#0a53a3
  • statusBar.border#242a3f
  • statusBar.debuggingBackground#931c06
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#e7e7e7
  • statusBar.noFolderBackground#1f2428
  • statusBarItem.prominentBackground#282e34
  • tab.activeBackground#1f2428
  • tab.activeBorder#1f2428
  • tab.activeBorderTop#62C9C3
  • tab.activeForeground#e7e7e7
  • tab.border#1f2428
  • tab.hoverBackground#1f2428
  • tab.inactiveBackground#282e33
  • tab.inactiveForeground#959da5
  • tab.unfocusedActiveBorder#1f2428
  • tab.unfocusedActiveBorderTop#242a3f
  • tab.unfocusedHoverBackground#1f2428
  • terminal.foreground#d1d5da
  • textBlockQuote.background#1f2428
  • textBlockQuote.border#444d56
  • textCodeBlock.background#1f2428
  • textLink.activeForeground#c8e1ff
  • textLink.foreground#5CCFE6
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#1f2428
  • titleBar.activeForeground#e7e7e7
  • titleBar.border#282e33
  • titleBar.inactiveBackground#202429
  • titleBar.inactiveForeground#959da5
  • tree.indentGuidesStroke#1f2428
  • welcomePage.buttonBackground#1f2428
  • welcomePage.buttonHoverBackground#444d56

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#5CCFE6
entity, entity.name#b2e1e2
variable.parameter.function#ffeead
entity.name.tag#e6735c
keyword#f97583
storage, storage.type#ffaf69
storage.modifier.package, storage.modifier.import, storage.type.java#ffeead
string, punctuation.definition.string, string punctuation.section.embedded source#00e6cf
support#5CCFE6
meta.property-name#5CCFE6
variable#9bb1ff
variable.other#ffeead
invalid.broken#fdaeb7italic
invalid.deprecated#fdaeb7italic
invalid.illegal#fdaeb7italic
invalid.unimplemented#fdaeb7italic
carriage-return#1f2428italic underline
message.error#fdaeb7
string source#ffeead
string variable#5CCFE6
source.regexp, string.regexp#dbedff
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#dbedff
string.regexp constant.character.escape#e6735cbold
support.constant#5CCFE6
support.variable#5CCFE6
meta.module-reference#5CCFE6
punctuation.definition.list.begin.markdown#9bb1ff
markup.heading, markup.heading entity.name#5CCFE6bold
markup.quote#e6735c
markup.italic#ffeeaditalic
markup.bold#ffeeadbold
markup.raw#5CCFE6
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#fdaeb7
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#e6735c
markup.changed, punctuation.definition.changed#9bb1ff
markup.ignored, markup.untracked#1f2428
meta.diff.range#b2e1e2bold
meta.diff.header#5CCFE6
meta.separator#5CCFE6bold
meta.output#5CCFE6
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#d1d5da
brackethighlighter.unmatched#fdaeb7
constant.other.reference.link, string.other.link#dbedffunderline