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#151422
  • activityBar.foreground#edebe6
  • activityBarBadge.background#fd8a25
  • activityBarBadge.foreground#ffffff
  • badge.background#fd8a25
  • badge.foreground#ffffff
  • button.background#b133dc
  • button.foreground#ffffff
  • dropdown.background#0d0c15
  • dropdown.border#0d0c15
  • dropdown.foreground#edebe6
  • editor.background#11101c
  • editor.foreground#edebe6
  • editor.hoverHighlightBackground#fd8a2522
  • editor.lineHighlightBackground#171626
  • editor.selectionBackground#b133dc55
  • editor.wordHighlightBackground#fed23022
  • editor.wordHighlightStrongBackground#b133dc22
  • editorBracketMatch.background#fd8a2544
  • editorBracketMatch.border#b133dc
  • editorCursor.foreground#f8f8f0
  • editorGroup.background#171626
  • editorGroupHeader.tabsBackground#171626
  • editorGutter.addedBackground#a7da1e
  • editorGutter.background#0d0c15
  • editorGutter.deletedBackground#e61f44
  • editorGutter.modifiedBackground#f7b83d
  • editorIndentGuide.background#25233c
  • editorLineNumber.foreground#38355d
  • editorLink.activeForeground#fd8a25
  • editorOverviewRuler.addedForeground#a7da1e
  • editorOverviewRuler.deletedForeground#e61f44
  • editorOverviewRuler.errorForeground#e61f44
  • editorOverviewRuler.findMatchForeground#b133dc55
  • editorOverviewRuler.infoForeground#9d37fc
  • editorOverviewRuler.modifiedForeground#f7b83d
  • editorOverviewRuler.warningForeground#f7b83d
  • editorRuler.foreground#25233c
  • editorSuggestWidget.foreground#edebe6
  • editorSuggestWidget.highlightForeground#fd8a25
  • editorSuggestWidget.selectedBackground#38355d
  • editorWhitespace.foreground#25233c
  • editorWidget.background#25233c
  • editorWidget.border#38355d
  • extensionButton.prominentBackground#fd8a25
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#fda558
  • focusBorder#fd8a25
  • foreground#edebe6
  • gitDecoration.conflictingResourceForeground#9d37fc
  • gitDecoration.deletedResourceForeground#e61f44
  • gitDecoration.ignoredResourceForeground#4c487d
  • gitDecoration.modifiedResourceForeground#f7b83d
  • gitDecoration.untrackedResourceForeground#a7da1e
  • input.activeBorder#fd8a25
  • input.background#07070c
  • input.border#2f2c4d
  • input.foreground#edebe6
  • input.placeholderForeground#343156
  • inputOption.activeBorder#b133dc
  • list.activeSelectionBackground#b133dc
  • list.activeSelectionForeground#11101c
  • list.focusBackground#2f2c4d
  • list.hoverBackground#171626
  • list.inactiveSelectionBackground#11101c
  • notification.background#1b192c
  • notification.buttonBackground#fd8a25
  • notification.buttonForeground#ffffff
  • notification.errorBackground#e61f44
  • notification.errorForeground#ffffff
  • notification.foreground#edebe6
  • notification.infoBackground#9d37fc
  • notification.infoForeground#ffffff
  • notification.warningBackground#f7b83d
  • notification.warningForeground#ffffff
  • panel.background#25233c
  • panel.border#38355d
  • panelTitle.activeBorder#fd8a25
  • panelTitle.inactiveForeground#56518e
  • peekView.border#fd8a25
  • peekViewEditor.background#09090f
  • peekViewEditor.matchHighlightBackground#b133dc55
  • peekViewEditorGutter.background#0d0c15
  • peekViewResult.background#1b192c
  • peekViewResult.fileForeground#e4e1da
  • peekViewResult.lineForeground#d8d3c8
  • peekViewResult.matchHighlightBackground#b133dc55
  • peekViewResult.selectionBackground#151422
  • peekViewResult.selectionForeground#edebe6
  • peekViewTitle.background#0d0c15
  • peekViewTitleDescription.foreground#e7e4dd
  • peekViewTitleLabel.foreground#edebe6
  • progressBar.background#fed230
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#fd8a25aa
  • scrollbarSlider.background#38355daa
  • scrollbarSlider.hoverBackground#fd8a2555
  • sideBar.background#1b192c
  • sideBar.foreground#edebe6
  • sideBarSectionHeader.background#211f36
  • sideBarSectionHeader.foreground#edebe6
  • statusBar.background#fd8a25
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#b133dc
  • tab.inactiveBackground#191729
  • tab.inactiveForeground#605a9e
  • terminal.ansiBlack#1b192c
  • terminal.ansiBlue#fed230
  • terminal.ansiBrightBlack#38355d
  • terminal.ansiBrightBlue#fee895
  • terminal.ansiBrightCyan#f07fcd
  • terminal.ansiBrightGreen#fec08a
  • terminal.ansiBrightMagenta#f07492
  • terminal.ansiBrightRed#f03e5f
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#d28aeb
  • terminal.ansiCyan#e524a9
  • terminal.ansiGreen#fd8a25
  • terminal.ansiMagenta#e5194b
  • terminal.ansiRed#ba0e2e
  • terminal.ansiWhite#f8f7f5
  • terminal.ansiYellow#b133dc
  • terminal.background#07070c
  • terminal.foreground#edebe6
  • titleBar.activeBackground#09090f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#edebe6
comment#36345a
string#fd8a25
constant.numeric#e524a9
constant.language#b133dc
constant.character, constant.other#b133dc
variable
keyword#e5194b
storage#b133dc
storage.type#fd8a25
entity.name.class#b133dcunderline
entity.other.inherited-class#b133dc
entity.name.function#fed230
variable.parameter#edebe6
entity.name.tag#fd8a25
entity.other.attribute-name#b133dc
support.function#e524a9
support.constant#b133dc
support.type, support.class#b133dc
support.other.variable
invalid#cf433e
invalid.deprecated#cf433e
meta.structure.dictionary.json string.quoted.double.json#fd8a25
meta.diff, meta.diff.header#36345a
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#53508a
meta.property-value, support.constant.property-value, constant.other.color#fd8a25
meta.structure.dictionary.json string.quoted.double.json#b133dc
meta.structure.dictionary.value.json string.quoted.double.json#fd8a25
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#edebe6
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#fd8a25
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#fd8a25normal
variable.other#edebe6normal
variable.parameter.function.coffee#e524a9
entity.name.section.markdown#b133dc
punctuation.definition.heading.markdown#e5194b
markup.raw.inline.markdown#fd8a25
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#e5194b
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#e5194b
punctuation.definition.metadata.markdown#e5194b
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#fd8a25
markup.bold.markdown, markup.italic.markdown#fd8a25
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#edebe6

Shiki preview

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

Loading...