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#221e2c
  • activityBar.foreground#c5bedd
  • activityBarBadge.background#7cd827
  • activityBarBadge.foreground#ffffff
  • badge.background#7cd827
  • badge.foreground#ffffff
  • button.background#a25cdb
  • button.foreground#ffffff
  • dropdown.background#181620
  • dropdown.border#181620
  • dropdown.foreground#c5bedd
  • editor.background#1d1a26
  • editor.foreground#c5bedd
  • editor.hoverHighlightBackground#7cd82722
  • editor.lineHighlightBackground#24202f
  • editor.selectionBackground#7cd82755
  • editor.wordHighlightBackground#ffffff22
  • editor.wordHighlightStrongBackground#a25cdb22
  • editorBracketMatch.background#7cd82744
  • editorBracketMatch.border#a25cdb
  • editorCursor.foreground#f8f8f0
  • editorGroup.background#24202f
  • editorGroupHeader.tabsBackground#24202f
  • editorGutter.addedBackground#a7da1e
  • editorGutter.background#181620
  • editorGutter.deletedBackground#e61f44
  • editorGutter.modifiedBackground#f7b83d
  • editorIndentGuide.background#342f44
  • editorLineNumber.foreground#4b4363
  • editorLink.activeForeground#7cd827
  • editorOverviewRuler.addedForeground#a7da1e
  • editorOverviewRuler.deletedForeground#e61f44
  • editorOverviewRuler.errorForeground#e61f44
  • editorOverviewRuler.findMatchForeground#a25cdb55
  • editorOverviewRuler.infoForeground#9d37fc
  • editorOverviewRuler.modifiedForeground#f7b83d
  • editorOverviewRuler.warningForeground#f7b83d
  • editorRuler.foreground#342f44
  • editorSuggestWidget.foreground#c5bedd
  • editorSuggestWidget.highlightForeground#7cd827
  • editorSuggestWidget.selectedBackground#4b4363
  • editorWhitespace.foreground#342f44
  • editorWidget.background#342f44
  • editorWidget.border#4b4363
  • extensionButton.prominentBackground#7cd827
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#96e052
  • focusBorder#7cd827
  • foreground#c5bedd
  • gitDecoration.conflictingResourceForeground#9d37fc
  • gitDecoration.deletedResourceForeground#e61f44
  • gitDecoration.ignoredResourceForeground#625881
  • gitDecoration.modifiedResourceForeground#f7b83d
  • gitDecoration.untrackedResourceForeground#a7da1e
  • input.activeBorder#7cd827
  • input.background#111017
  • input.border#403953
  • input.foreground#c5bedd
  • input.placeholderForeground#473f5c
  • inputOption.activeBorder#a25cdb
  • list.activeSelectionBackground#a25cdb
  • list.activeSelectionForeground#1d1a26
  • list.focusBackground#403953
  • list.hoverBackground#24202f
  • list.inactiveSelectionBackground#1d1a26
  • notification.background#292435
  • notification.buttonBackground#7cd827
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#c5bedd
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#342f44
  • panel.border#4b4363
  • panelTitle.activeBorder#7cd827
  • panelTitle.inactiveForeground#6e6290
  • peekView.border#7cd827
  • peekViewEditor.background#14121a
  • peekViewEditor.matchHighlightBackground#a25cdb55
  • peekViewEditorGutter.background#181620
  • peekViewResult.background#292435
  • peekViewResult.fileForeground#b9b1d6
  • peekViewResult.lineForeground#a79ccb
  • peekViewResult.matchHighlightBackground#a25cdb55
  • peekViewResult.selectionBackground#221e2c
  • peekViewResult.selectionForeground#c5bedd
  • peekViewTitle.background#181620
  • peekViewTitleDescription.foreground#bcb4d8
  • peekViewTitleLabel.foreground#c5bedd
  • progressBar.background#ffffff
  • scrollbar.shadow#060508
  • scrollbarSlider.activeBackground#7cd827aa
  • scrollbarSlider.background#4b4363aa
  • scrollbarSlider.hoverBackground#7cd82755
  • sideBar.background#292435
  • sideBar.foreground#c5bedd
  • sideBarSectionHeader.background#2f2b3e
  • sideBarSectionHeader.foreground#c5bedd
  • statusBar.background#7cd827
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#a25cdb
  • tab.inactiveBackground#262232
  • tab.inactiveForeground#7b6f9d
  • terminal.ansiBlack#292435
  • terminal.ansiBlue#ffffff
  • terminal.ansiBrightBlack#4b4363
  • terminal.ansiBrightBlue#ffffff
  • terminal.ansiBrightCyan#daf8be
  • terminal.ansiBrightGreen#b0e87d
  • terminal.ansiBrightMagenta#daf8be
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#d2b0ed
  • terminal.ansiCyan#a6ef61
  • terminal.ansiGreen#7cd827
  • terminal.ansiMagenta#a6ef61
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#d4cfe6
  • terminal.ansiYellow#a25cdb
  • terminal.background#111017
  • terminal.foreground#c5bedd
  • titleBar.activeBackground#14121a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...