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#24292e
  • activityBar.foreground#ffffff
  • activityBarBadge.background#d73a49
  • activityBarBadge.foreground#ffffff
  • badge.background#d73a49
  • badge.foreground#ffffff
  • button.background#005cc5
  • button.foreground#ffffff
  • dropdown.background#fafafa
  • dropdown.border#fafafa
  • dropdown.foreground#24292e
  • editor.background#ffffff
  • editor.foreground#24292e
  • editor.hoverHighlightBackground#d73a4922
  • editor.lineHighlightBackground#fffbdd
  • editor.selectionBackground#077cf933
  • editor.wordHighlightBackground#005cc522
  • editor.wordHighlightStrongBackground#005cc522
  • editorBracketMatch.background#d73a4944
  • editorBracketMatch.border#005cc5
  • editorCursor.foreground#222222
  • editorGroup.background#f7f7f7
  • editorGroupHeader.tabsBackground#f7f7f7
  • editorGutter.addedBackground#59a50b
  • editorGutter.background#fafafa
  • editorGutter.deletedBackground#a30e29
  • editorGutter.modifiedBackground#c48405
  • editorIndentGuide.background#e6e6e6
  • editorLineNumber.foreground#cccccc
  • editorLink.activeForeground#d73a49
  • editorOverviewRuler.addedForeground#59a50b
  • editorOverviewRuler.deletedForeground#a30e29
  • editorOverviewRuler.errorForeground#a30e29
  • editorOverviewRuler.findMatchForeground#005cc555
  • editorOverviewRuler.infoForeground#6a1faf
  • editorOverviewRuler.modifiedForeground#c48405
  • editorOverviewRuler.warningForeground#c48405
  • editorRuler.foreground#e6e6e6
  • editorSuggestWidget.foreground#24292e
  • editorSuggestWidget.highlightForeground#d73a49
  • editorSuggestWidget.selectedBackground#d9d9d9
  • editorWhitespace.foreground#e6e6e6
  • editorWidget.background#f2f2f2
  • editorWidget.border#cccccc
  • extensionButton.prominentBackground#d73a49
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#e06470
  • focusBorder#d73a49
  • foreground#24292e
  • gitDecoration.conflictingResourceForeground#6a1faf
  • gitDecoration.deletedResourceForeground#a30e29
  • gitDecoration.ignoredResourceForeground#a6a6a6
  • gitDecoration.modifiedResourceForeground#c48405
  • gitDecoration.untrackedResourceForeground#59a50b
  • input.activeBorder#d73a49
  • input.background#ffffff
  • input.border#999999
  • input.foreground#24292e
  • input.placeholderForeground#cccccc
  • inputOption.activeBorder#005cc5
  • list.activeSelectionBackground#005cc5
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#d9d9d9
  • list.hoverBackground#ffffff
  • list.inactiveSelectionBackground#ffffff
  • notification.background#d9d9d9
  • notification.buttonBackground#d73a49
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#24292e
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#f5f5f5
  • panel.border#e0e0e0
  • panelTitle.activeBorder#d73a49
  • panelTitle.activeForeground#737373
  • panelTitle.inactiveForeground#bfbfbf
  • peekView.border#d73a49
  • peekViewEditor.background#fafafa
  • peekViewEditor.matchHighlightBackground#005cc555
  • peekViewEditorGutter.background#f0f0f0
  • peekViewResult.background#f2f2f2
  • peekViewResult.fileForeground#2f363c
  • peekViewResult.lineForeground#5c6975
  • peekViewResult.matchHighlightBackground#005cc555
  • peekViewResult.selectionBackground#ffffff
  • peekViewResult.selectionForeground#2f363c
  • peekViewTitle.background#fafafa
  • peekViewTitleDescription.foreground#1d2125
  • peekViewTitleLabel.foreground#24292e
  • progressBar.background#005cc5
  • scrollbar.shadow#999999
  • scrollbarSlider.activeBackground#d73a49aa
  • scrollbarSlider.background#24292e35
  • scrollbarSlider.hoverBackground#d73a4955
  • sideBar.background#f2f2f2
  • sideBar.foreground#24292e
  • sideBarSectionHeader.background#d9d9d9
  • sideBarSectionHeader.foreground#24292e
  • statusBar.background#d73a49
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#005cc5
  • tab.activeForeground#24292e
  • tab.border#e0e0e0
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#818f9d
  • terminal.ansiBlack#ffffff
  • terminal.ansiBlue#005cc5
  • terminal.ansiBrightBlack#ffffff
  • terminal.ansiBrightBlue#2c8fff
  • terminal.ansiBrightCyan#aa8fda
  • terminal.ansiBrightGreen#e88f97
  • terminal.ansiBrightMagenta#e88f97
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#515c67
  • terminal.ansiBrightYellow#2c8fff
  • terminal.ansiCyan#6f42c1
  • terminal.ansiGreen#d73a49
  • terminal.ansiMagenta#d73a49
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#2f363c
  • terminal.ansiYellow#005cc5
  • terminal.background#ffffff
  • terminal.foreground#24292e
  • titleBar.activeBackground#9ea8b3
  • titleBar.activeForeground#24292e
  • widget.shadow#cccccc55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#24292e
comment#6a737d
string#032f62
constant.numeric#032f62
constant.language#005cc5
constant.character, constant.other#005cc5
variable
keyword#d73a49
storage#005cc5
storage.type#d73a49
entity.name.class#005cc5underline
entity.other.inherited-class#005cc5
entity.name.function#005cc5
variable.parameter#24292e
entity.name.tag#d73a49
entity.other.attribute-name#005cc5
support.function#6f42c1
support.constant#005cc5
support.type, support.class#005cc5
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#032f62
meta.diff, meta.diff.header#6a737d
markup.deleted#e61f44
markup.inserted#A6E22E
markup.changed#f7b83d
constant.numeric.line-number.find-in-files - match#8FBE00A0
entity.name.filename.find-in-files#E6DB74
keyword.other#474d54
meta.property-value, support.constant.property-value, constant.other.color#032f62
meta.structure.dictionary.json string.quoted.double.json#005cc5
meta.structure.dictionary.value.json string.quoted.double.json#032f62
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#24292e
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#d73a49
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#d73a49normal
variable.other#24292enormal
variable.parameter.function.coffee#032f62
entity.name.section.markdown#005cc5
punctuation.definition.heading.markdown#d73a49
markup.raw.inline.markdown#032f62
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#d73a49
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#d73a49
punctuation.definition.metadata.markdown#d73a49
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#d73a49
markup.bold.markdown, markup.italic.markdown#d73a49
markup.italic.markdownitalic
markup.bold.markdownbold
markup.raw.block.markdown#664e4d
markup.deleted.git_gutter#e61f44
markup.inserted.git_gutter#a7da1e
markup.changed.git_gutter#f7b83d
meta.template.expression#24292e

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...