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#f9826c
  • activityBar.background#24292e
  • activityBar.border#1b1f23
  • activityBar.foreground#959da5
  • activityBar.inactiveForeground#6a737d
  • activityBarBadge.background#0366d6
  • activityBarBadge.foreground#ffffff
  • badge.background#044289
  • badge.foreground#c8e1ff
  • breadcrumb.activeSelectionForeground#d1d5da
  • breadcrumb.focusForeground#959da5
  • breadcrumb.foreground#959da5
  • breadcrumbPicker.background#2b3036
  • button.background#176f2c
  • button.foreground#dcffe4
  • button.hoverBackground#22863a
  • checkbox.background#444d56
  • checkbox.border#1b1f23
  • debugToolBar.background#2b3036
  • descriptionForeground#959da5
  • diffEditor.insertedTextBackground#28a74530
  • diffEditor.removedTextBackground#d73a4930
  • dropdown.background#2f363d
  • dropdown.border#1b1f23
  • dropdown.foreground#959da5
  • dropdown.listBackground#24292e
  • editor.background#0d1117
  • editor.findMatchBackground#ffd33d44
  • editor.findMatchHighlightBackground#ffd33d22
  • editor.focusedStackFrameHighlightBackground#b808
  • editor.foldBackground#282e33
  • editor.foreground#f6f8fa
  • editor.inactiveSelectionBackground#3392FF22
  • editor.lineHighlightBackground#2b3036
  • editor.selectionBackground#3392FF44
  • editor.selectionHighlightBackground#17E5E633
  • editor.selectionHighlightBorder#17E5E600
  • editor.stackFrameHighlightBackground#a707
  • editor.wordHighlightBackground#17E5E600
  • editor.wordHighlightBorder#17E5E699
  • editor.wordHighlightStrongBackground#17E5E600
  • editor.wordHighlightStrongBorder#17E5E666
  • editorBracketMatch.background#17E5E650
  • editorBracketMatch.border#17E5E600
  • editorCursor.foreground#c8e1ff
  • editorGroup.border#1b1f23
  • editorGroupHeader.tabsBackground#1f2428
  • editorGroupHeader.tabsBorder#1b1f23
  • editorGutter.addedBackground#28a745
  • editorGutter.deletedBackground#ea4a5a
  • editorGutter.modifiedBackground#2188ff
  • editorIndentGuide.activeBackground#444d56
  • editorIndentGuide.background#2f363d
  • editorLineNumber.activeForeground#f6f8fa
  • editorLineNumber.foreground#444d56
  • editorOverviewRuler.border#1b1f23
  • editorWhitespace.foreground#444d56
  • editorWidget.background#1f2428
  • errorForeground#f97583
  • focusBorder#005cc5
  • foreground#d1d5da
  • gitDecoration.addedResourceForeground#34d058
  • gitDecoration.conflictingResourceForeground#ffab70
  • gitDecoration.deletedResourceForeground#ea4a5a
  • gitDecoration.ignoredResourceForeground#6a737d
  • gitDecoration.modifiedResourceForeground#79b8ff
  • gitDecoration.submoduleResourceForeground#6a737d
  • gitDecoration.untrackedResourceForeground#34d058
  • input.background#2f363d
  • input.border#1b1f23
  • input.foreground#959da5
  • input.placeholderForeground#959da5
  • list.activeSelectionBackground#39414a
  • list.activeSelectionForeground#959da5
  • list.focusBackground#044289
  • list.hoverBackground#282e34
  • list.hoverForeground#959da5
  • list.inactiveFocusBackground#1d2d3e
  • list.inactiveSelectionBackground#282e34
  • list.inactiveSelectionForeground#959da5
  • notificationCenterHeader.background#24292e
  • notificationCenterHeader.foreground#959da5
  • notifications.background#2f363d
  • notifications.border#1b1f23
  • notifications.foreground#959da5
  • notificationsErrorIcon.foreground#ea4a5a
  • notificationsInfoIcon.foreground#79b8ff
  • notificationsWarningIcon.foreground#ffab70
  • panel.background#1f2428
  • panel.border#1b1f23
  • panelInput.border#2f363d
  • panelTitle.activeBorder#f9826c
  • panelTitle.activeForeground#959da5
  • panelTitle.inactiveForeground#959da5
  • peekViewEditor.background#1f242888
  • peekViewEditor.matchHighlightBackground#ffd33d33
  • peekViewResult.background#1f2428
  • peekViewResult.matchHighlightBackground#ffd33d33
  • pickerGroup.border#444d56
  • pickerGroup.foreground#959da5
  • progressBar.background#0366d6
  • quickInput.background#24292e
  • quickInput.foreground#959da5
  • scrollbar.shadow#0008
  • scrollbarSlider.activeBackground#6a737d88
  • scrollbarSlider.background#6a737d33
  • scrollbarSlider.hoverBackground#6a737d44
  • settings.headerForeground#959da5
  • settings.modifiedItemIndicator#0366d6
  • sideBar.background#1f2428
  • sideBar.border#1b1f23
  • sideBar.foreground#d1d5da
  • sideBarSectionHeader.background#1f2428
  • sideBarSectionHeader.border#1b1f23
  • sideBarSectionHeader.foreground#959da5
  • sideBarTitle.foreground#959da5
  • statusBar.background#24292e
  • statusBar.border#1b1f23
  • statusBar.debuggingBackground#f9826c
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#d1d5da
  • statusBar.noFolderBackground#24292e
  • statusBarItem.prominentBackground#282e34
  • tab.activeBackground#24292e
  • tab.activeBorder#24292e
  • tab.activeBorderTop#f9826c
  • tab.activeForeground#959da5
  • tab.border#1b1f23
  • tab.hoverBackground#24292e
  • tab.inactiveBackground#1f2428
  • tab.inactiveForeground#959da5
  • tab.unfocusedActiveBorder#24292e
  • tab.unfocusedActiveBorderTop#1b1f23
  • tab.unfocusedHoverBackground#24292e
  • terminal.foreground#6a737d
  • textBlockQuote.background#24292e
  • textBlockQuote.border#444d56
  • textCodeBlock.background#2f363d
  • textLink.activeForeground#c8e1ff
  • textLink.foreground#032f62
  • textPreformat.foreground#d1d5da
  • textSeparator.foreground#586069
  • titleBar.activeBackground#24292e
  • titleBar.activeForeground#959da5
  • titleBar.border#1b1f23
  • titleBar.inactiveBackground#1f2428
  • titleBar.inactiveForeground#959da5
  • tree.indentGuidesStroke#2f363d
  • welcomePage.buttonBackground#2f363d
  • welcomePage.buttonHoverBackground#444d56

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#22863a
constant, entity.name.constant#79b8ff
entity, entity.name#b392f0
entity.modifires#d73a49
entity.name.tag#f97583
entity.numbers, constant.numeric.hexadecimal, punctuation.separator.constant.numeric, keyword.other.unit.hexadecimal, keyword.other.unit.exponent.hexadecimal, keyword.other.unit.suffix.floating-point, keyword.other.unit.user-defined, keyword.other.unit.exponent.decimal, keyword.operator.plus.exponent.decimal, constant.numeric.exponent.decimal, keyword.other.unit.suffix.floating-point, keyword.other.unit.binary, constant.numeric.binary, keyword.other.unit.suffix.integer, constant.numeric.decimal#d73a49
entity.name.function#f0fff4
keyword#b392f0
keyword.datatype#8a63d2italic
keyword.other#f97583
keyword.other.numbers#cb2431
keyword.control#8a63d2
keyword.constant#2188ff
keyword.function#2188ff
keyword.operator#f97583
keyword.operator.comparison#f97583
keyword.operator.assignment#d73a49
keyword.operator.other#d73a49
storage, storage.type#f97583
storage.modifier.package, storage.modifier.import, storage.type.java#f6f8fa
string, punctuation.definition.string, string punctuation.section.embedded source#ffd1ac
string.quoted.double, string.quoted.single#ffd1ac
support#79b8ff
meta.property-name#79b8ff
variable#ffab70
variable.other#fb8532
variable.parameter.function#2188ff
variable.parameter#79b8ff
variable.parameter.dotfield#ffab70
variable.parameter.trend#ffab70
variable.other.constant, variable.language#2188ff
invalid.broken#b31d28italic
invalid.deprecated#b31d28italic
invalid.illegal#b31d28italic
invalid.unimplemented#b31d28italic
carriage-return#24292eitalic underline
message.error#9e1c23
string source#f6f8fa
string variable#79b8ff
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#85e89dbold
support.constant#2188ff
support.variable#79b8ff
support.function#c8e1ff
meta.module-reference#79b8ff
punctuation.definition.list.begin.markdown#ffab70
markup.heading, markup.heading entity.name#79b8ffbold
markup.quote#85e89d
markup.italic#f6f8faitalic
markup.bold#f6f8fabold
markup.raw#79b8ff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#fdaeb7
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#85e89d
markup.changed, punctuation.definition.changed#ffab70
markup.ignored, markup.untracked#2f363d
meta.diff.range#b392f0bold
meta.diff.header#79b8ff
meta.separator#79b8ffbold
meta.output#79b8ff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#d1d5da
brackethighlighter.unmatched#fdaeb7
constant.other.reference.link, string.other.link#dbedffunderline