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#514242
  • activityBar.foreground#f2eded
  • activityBarBadge.background#d39452
  • activityBarBadge.foreground#ffffff
  • badge.background#d39452
  • badge.foreground#ffffff
  • button.background#bd4549
  • button.foreground#ffffff
  • dropdown.background#eee7e7
  • dropdown.border#eee7e7
  • dropdown.foreground#514242
  • editor.background#f2eded
  • editor.foreground#514242
  • editor.hoverHighlightBackground#d3945222
  • editor.lineHighlightBackground#ece4e4
  • editor.selectionBackground#bd454933
  • editor.wordHighlightBackground#cf9e5122
  • editor.wordHighlightStrongBackground#bd454922
  • editorBracketMatch.background#d3945244
  • editorBracketMatch.border#bd4549
  • editorCursor.foreground#222222
  • editorGroup.background#ece4e4
  • editorGroupHeader.tabsBackground#ece4e4
  • editorGutter.addedBackground#59a50b
  • editorGutter.background#eee7e7
  • editorGutter.deletedBackground#a30e29
  • editorGutter.modifiedBackground#c48405
  • editorIndentGuide.background#ddcfcf
  • editorLineNumber.foreground#c7b2b2
  • editorLink.activeForeground#d39452
  • editorOverviewRuler.addedForeground#59a50b
  • editorOverviewRuler.deletedForeground#a30e29
  • editorOverviewRuler.errorForeground#a30e29
  • editorOverviewRuler.findMatchForeground#bd454955
  • editorOverviewRuler.infoForeground#6a1faf
  • editorOverviewRuler.modifiedForeground#c48405
  • editorOverviewRuler.warningForeground#c48405
  • editorRuler.foreground#ddcfcf
  • editorSuggestWidget.foreground#514242
  • editorSuggestWidget.highlightForeground#d39452
  • editorSuggestWidget.selectedBackground#d2c1c1
  • editorWhitespace.foreground#ddcfcf
  • editorWidget.background#e7dede
  • editorWidget.border#c7b2b2
  • extensionButton.prominentBackground#d39452
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#ddad7b
  • focusBorder#d39452
  • foreground#514242
  • gitDecoration.conflictingResourceForeground#6a1faf
  • gitDecoration.deletedResourceForeground#a30e29
  • gitDecoration.ignoredResourceForeground#a78585
  • gitDecoration.modifiedResourceForeground#c48405
  • gitDecoration.untrackedResourceForeground#59a50b
  • input.activeBorder#d39452
  • input.background#f2eded
  • input.border#9c7777
  • input.foreground#514242
  • input.placeholderForeground#c7b2b2
  • inputOption.activeBorder#bd4549
  • list.activeSelectionBackground#bd4549
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#d2c1c1
  • list.hoverBackground#f8f6f6
  • list.inactiveSelectionBackground#f2eded
  • notification.background#d2c1c1
  • notification.buttonBackground#d39452
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#514242
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#e9e1e1
  • panel.border#d8c9c9
  • panelTitle.activeBorder#d39452
  • panelTitle.activeForeground#735353
  • panelTitle.inactiveForeground#bda3a3
  • peekView.border#d39452
  • peekViewEditor.background#eee7e7
  • peekViewEditor.matchHighlightBackground#bd454955
  • peekViewEditorGutter.background#e5dbdb
  • peekViewResult.background#e7dede
  • peekViewResult.fileForeground#5f4d4d
  • peekViewResult.lineForeground#957d7d
  • peekViewResult.matchHighlightBackground#bd454955
  • peekViewResult.selectionBackground#f6f3f3
  • peekViewResult.selectionForeground#5f4d4d
  • peekViewTitle.background#eee7e7
  • peekViewTitleDescription.foreground#493b3b
  • peekViewTitleLabel.foreground#514242
  • progressBar.background#cf9e51
  • scrollbar.shadow#9c7777
  • scrollbarSlider.activeBackground#d39452aa
  • scrollbarSlider.background#51424235
  • scrollbarSlider.hoverBackground#d3945255
  • sideBar.background#e7dede
  • sideBar.foreground#514242
  • sideBarSectionHeader.background#d2c1c1
  • sideBarSectionHeader.foreground#514242
  • statusBar.background#d39452
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#bd4549
  • tab.activeForeground#514242
  • tab.border#d8c9c9
  • tab.inactiveBackground#e9e1e1
  • tab.inactiveForeground#b8a7a7
  • terminal.ansiBlack#fdfcfc
  • terminal.ansiBlue#cf9e51
  • terminal.ansiBrightBlack#ffffff
  • terminal.ansiBrightBlue#e5cba1
  • terminal.ansiBrightCyan#f4bfb0
  • terminal.ansiBrightGreen#e8c6a3
  • terminal.ansiBrightMagenta#e0daa3
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#897070
  • terminal.ansiBrightYellow#d89093
  • terminal.ansiCyan#e77757
  • terminal.ansiGreen#d39452
  • terminal.ansiMagenta#c6bb57
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#5f4d4d
  • terminal.ansiYellow#bd4549
  • terminal.background#f2eded
  • terminal.foreground#514242
  • titleBar.activeBackground#cec3c3
  • titleBar.activeForeground#514242
  • widget.shadow#c7b2b255

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#514242
comment#63383c
string#a58163
constant.numeric#cc8f5d
constant.language#bd4549
constant.character, constant.other#bd4549
variable
keyword#c6bb57
storage#bd4549
storage.type#d39452
entity.name.class#bd4549underline
entity.other.inherited-class#bd4549
entity.name.function#cf9e51
variable.parameter#846868
entity.name.tag#d39452
entity.other.attribute-name#bd4549
support.function#e77757
support.constant#bd4549
support.type, support.class#bd4549
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#a58163
meta.diff, meta.diff.header#63383c
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#321c1e
meta.property-value, support.constant.property-value, constant.other.color#a58163
meta.structure.dictionary.json string.quoted.double.json#bd4549
meta.structure.dictionary.value.json string.quoted.double.json#a58163
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#514242
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#d39452
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#d39452normal
variable.other#846868normal
variable.parameter.function.coffee#cc8f5d
entity.name.section.markdown#bd4549
punctuation.definition.heading.markdown#c6bb57
markup.raw.inline.markdown#a58163
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#c6bb57
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#c6bb57
punctuation.definition.metadata.markdown#c6bb57
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#d39452
markup.bold.markdown, markup.italic.markdown#d39452
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#514242

Shiki preview

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

Loading...