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#120d12
  • activityBar.foreground#ffffff
  • activityBarBadge.background#cba0cd
  • activityBarBadge.foreground#ffffff
  • badge.background#cba0cd
  • badge.foreground#ffffff
  • button.background#765478
  • button.foreground#ffffff
  • dropdown.background#060506
  • dropdown.border#060506
  • dropdown.foreground#ffffff
  • editor.background#0c090c
  • editor.foreground#ffffff
  • editor.hoverHighlightBackground#cba0cd22
  • editor.lineHighlightBackground#151015
  • editor.selectionBackground#fc6a0f55
  • editor.wordHighlightBackground#fc6a0f22
  • editor.wordHighlightStrongBackground#76547822
  • editorBracketMatch.background#cba0cd44
  • editorBracketMatch.border#765478
  • editorCursor.foreground#f8f8f0
  • editorGroup.background#151015
  • editorGroupHeader.tabsBackground#151015
  • editorGutter.addedBackground#a7da1e
  • editorGutter.background#060506
  • editorGutter.deletedBackground#e61f44
  • editorGutter.modifiedBackground#f7b83d
  • editorIndentGuide.background#291f29
  • editorLineNumber.foreground#463546
  • editorLink.activeForeground#cba0cd
  • editorOverviewRuler.addedForeground#a7da1e
  • editorOverviewRuler.deletedForeground#e61f44
  • editorOverviewRuler.errorForeground#e61f44
  • editorOverviewRuler.findMatchForeground#76547855
  • editorOverviewRuler.infoForeground#9d37fc
  • editorOverviewRuler.modifiedForeground#f7b83d
  • editorOverviewRuler.warningForeground#f7b83d
  • editorRuler.foreground#291f29
  • editorSuggestWidget.foreground#ffffff
  • editorSuggestWidget.highlightForeground#cba0cd
  • editorSuggestWidget.selectedBackground#463546
  • editorWhitespace.foreground#291f29
  • editorWidget.background#291f29
  • editorWidget.border#463546
  • extensionButton.prominentBackground#cba0cd
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#ddc1df
  • focusBorder#cba0cd
  • foreground#ffffff
  • gitDecoration.conflictingResourceForeground#9d37fc
  • gitDecoration.deletedResourceForeground#e61f44
  • gitDecoration.ignoredResourceForeground#634b63
  • gitDecoration.modifiedResourceForeground#f7b83d
  • gitDecoration.untrackedResourceForeground#a7da1e
  • input.activeBorder#cba0cd
  • input.background#000000
  • input.border#382a38
  • input.foreground#ffffff
  • input.placeholderForeground#403040
  • inputOption.activeBorder#765478
  • list.activeSelectionBackground#765478
  • list.activeSelectionForeground#0c090c
  • list.focusBackground#382a38
  • list.hoverBackground#151015
  • list.inactiveSelectionBackground#0c090c
  • notification.background#1b141b
  • notification.buttonBackground#cba0cd
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#ffffff
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#291f29
  • panel.border#463546
  • panelTitle.activeBorder#cba0cd
  • panelTitle.inactiveForeground#725572
  • peekView.border#cba0cd
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#76547855
  • peekViewEditorGutter.background#060506
  • peekViewResult.background#1b141b
  • peekViewResult.fileForeground#f5f5f5
  • peekViewResult.lineForeground#e6e6e6
  • peekViewResult.matchHighlightBackground#76547855
  • peekViewResult.selectionBackground#120d12
  • peekViewResult.selectionForeground#ffffff
  • peekViewTitle.background#060506
  • peekViewTitleDescription.foreground#f7f7f7
  • peekViewTitleLabel.foreground#ffffff
  • progressBar.background#fc6a0f
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#cba0cdaa
  • scrollbarSlider.background#463546aa
  • scrollbarSlider.hoverBackground#cba0cd55
  • sideBar.background#1b141b
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#231a23
  • sideBarSectionHeader.foreground#ffffff
  • statusBar.background#cba0cd
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#765478
  • tab.inactiveBackground#181218
  • tab.inactiveForeground#816081
  • terminal.ansiBlack#1b141b
  • terminal.ansiBlue#fc6a0f
  • terminal.ansiBrightBlack#463546
  • terminal.ansiBrightBlue#fda974
  • terminal.ansiBrightCyan#f0e3f0
  • terminal.ansiBrightGreen#f0e3f0
  • terminal.ansiBrightMagenta#fda974
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#a987ab
  • terminal.ansiCyan#cba0cd
  • terminal.ansiGreen#cba0cd
  • terminal.ansiMagenta#fc6a0f
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#765478
  • terminal.background#000000
  • terminal.foreground#ffffff
  • titleBar.activeBackground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ffffff
comment#574457
string#fc9a0f
constant.numeric#fc9a0f
constant.language#765478
constant.character, constant.other#765478
variable
keyword#fc6a0f
storage#765478
storage.type#cba0cd
entity.name.class#765478underline
entity.other.inherited-class#765478
entity.name.function#fc6a0f
variable.parameter#ffffff
entity.name.tag#cba0cd
entity.other.attribute-name#765478
support.function#cba0cd
support.constant#765478
support.type, support.class#765478
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#fc9a0f
meta.diff, meta.diff.header#574457
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#826682
meta.property-value, support.constant.property-value, constant.other.color#fc9a0f
meta.structure.dictionary.json string.quoted.double.json#765478
meta.structure.dictionary.value.json string.quoted.double.json#fc9a0f
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#ffffff
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#cba0cd
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#cba0cdnormal
variable.other#ffffffnormal
variable.parameter.function.coffee#fc9a0f
entity.name.section.markdown#765478
punctuation.definition.heading.markdown#fc6a0f
markup.raw.inline.markdown#fc9a0f
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#fc6a0f
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#fc6a0f
punctuation.definition.metadata.markdown#fc6a0f
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#cba0cd
markup.bold.markdown, markup.italic.markdown#cba0cd
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#ffffff

Shiki preview

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

Loading...