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#0d0b0f
  • activityBar.foreground#373f91
  • activityBarBadge.background#a29dfa
  • activityBarBadge.foreground#ffffff
  • badge.background#a29dfa
  • badge.foreground#ffffff
  • button.background#4a64bc
  • button.foreground#ffffff
  • dropdown.background#030303
  • dropdown.border#030303
  • dropdown.foreground#81c0e9
  • editor.background#080709
  • editor.foreground#373f91
  • editor.hoverHighlightBackground#a29dfa22
  • editor.lineHighlightBackground#100e12
  • editor.selectionBackground#4a64bc55
  • editor.wordHighlightBackground#6a85cc22
  • editor.wordHighlightStrongBackground#4a64bc22
  • editorBracketMatch.background#a29dfa44
  • editorBracketMatch.border#4a64bc
  • editorCursor.foreground#34395b
  • editorGroupHeader.tabsBackground#100e12
  • editorGutter.addedBackground#3f5dcc
  • editorGutter.background#030303
  • editorGutter.deletedBackground#4a7aa8
  • editorGutter.modifiedBackground#373f91
  • editorLineNumber.foreground#3b3442
  • editorLink.activeForeground#a29dfa
  • editorOverviewRuler.addedForeground#3b38bd
  • editorOverviewRuler.deletedForeground#4a7aa8
  • editorOverviewRuler.errorForeground#4a7aa8
  • editorOverviewRuler.findMatchForeground#4a64bc55
  • editorOverviewRuler.infoForeground#354694
  • editorOverviewRuler.modifiedForeground#373f91
  • editorOverviewRuler.warningForeground#373f91
  • editorRuler.foreground#211d26
  • editorSuggestWidget.foreground#81c0e9
  • editorSuggestWidget.highlightForeground#a29dfa
  • editorSuggestWidget.selectedBackground#3b3442
  • editorSuggestWidget.selectedForeground#81c0e9
  • editorWhitespace.foreground#2e2834
  • editorWidget.background#211d26
  • editorWidget.border#3b3442
  • extensionButton.prominentBackground#a29dfa
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#d0cefc
  • focusBorder#a29dfa
  • foreground#8581e9
  • gitDecoration.conflictingResourceForeground#354694
  • gitDecoration.deletedResourceForeground#4a7aa8
  • gitDecoration.ignoredResourceForeground#4756db
  • gitDecoration.modifiedResourceForeground#373f91
  • gitDecoration.untrackedResourceForeground#3f5dcc
  • input.background#000000
  • input.border#2e2834
  • input.foreground#81c0e9
  • input.placeholderForeground#362f3d
  • inputOption.activeBorder#4a64bc
  • list.activeSelectionBackground#4a64bc
  • list.activeSelectionForeground#080709
  • list.focusBackground#2e2834
  • list.highlightForeground#a299f7
  • list.hoverBackground#100e12
  • list.inactiveSelectionBackground#080709
  • panel.background#000000
  • panel.border#3b3442
  • panelTitle.activeBorder#a29dfa
  • panelTitle.inactiveForeground#61556d
  • peekView.border#a29dfa
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#4a64bc55
  • peekViewEditorGutter.background#030303
  • peekViewResult.background#151217
  • peekViewResult.fileForeground#7576c5
  • peekViewResult.lineForeground#7576c5
  • peekViewResult.matchHighlightBackground#4a64bc55
  • peekViewResult.selectionBackground#0d0b0f
  • peekViewResult.selectionForeground#81c0e9
  • peekViewTitle.background#030303
  • peekViewTitleDescription.foreground#6881d2
  • peekViewTitleLabel.foreground#81c0e9
  • progressBar.background#6a85cc
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#a29dfaaa
  • scrollbarSlider.background#3b3442aa
  • scrollbarSlider.hoverBackground#a29dfa55
  • sideBar.background#151217
  • sideBar.foreground#373f91
  • sideBarSectionHeader.background#1c1920
  • sideBarSectionHeader.foreground#373f91
  • statusBar.background#9D89E2
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#a299f7
  • tab.activeBorder#9D89E2
  • tab.activeModifiedBorder#9D89E2
  • tab.inactiveBackground#121014
  • tab.inactiveForeground#6e607c
  • tab.inactiveModifiedBorder#9D89E2
  • tab.unfocusedActiveModifiedBorder#9D89E2
  • tab.unfocusedInactiveModifiedBorder#9D89E2
  • terminal.ansiBlack#151217
  • terminal.ansiBlue#6a85cc
  • terminal.ansiBrightBlack#3b3442
  • terminal.ansiBrightBlue#ffffff
  • terminal.ansiBrightCyan#6881d2
  • terminal.ansiBrightGreen#fefeff
  • terminal.ansiBrightMagenta#6881d2
  • terminal.ansiBrightRed#3b38bd
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e2bdff
  • terminal.ansiCyan#8e69c9
  • terminal.ansiGreen#a29dfa
  • terminal.ansiMagenta#4b52aa
  • terminal.ansiRed#3b38bd
  • terminal.ansiWhite#ece1f4
  • terminal.ansiYellow#4a64bc
  • terminal.background#000000
  • terminal.foreground#81c0e9
  • titleBar.activeBackground#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#81c0e9
comment#54596a
string#b9bfe0
constant.numeric#4a64bc
constant.language#4a64bc
constant.character, constant.other#77a3d6
variable
keyword#4b52aa
storage#4a64bc
storage.type#a29dfa
entity.name.class#4a64bcunderline
entity.other.inherited-class#4a64bc
entity.name.function#6a85cc
variable.parameter#81c0e9
entity.name.tag#a29dfa
entity.other.attribute-name#4a64bc
support.function#07144b
support.constant#4a64bc
support.type, support.class#354694
support.other.variable
invalid#5284bd
invalid.deprecated#5284bd
meta.structure.dictionary.json string.quoted.double.json#425cc9
meta.diff, meta.diff.header#343471
markup.deleted#5284bd
markup.inserted#3b38bd
markup.changed#373f91
constant.numeric.line-number.find-in-files - match#5284bd
entity.name.filename.find-in-files#4b52aa
keyword.other#3b4dd1
meta.property-value, support.constant.property-value, constant.other.color#7a6ed7
meta.structure.dictionary.json string.quoted.double.json#4a64bc
meta.structure.dictionary.value.json string.quoted.double.json#4a64bc
meta.property-name support.type.property-namenormal
meta.property-value punctuation.separator.key-value#81c0e9
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#a29dfa
meta.use support.class.builtin, meta.other.inherited-class support.class.builtin#a29dfanormal
variable.other#81c0e9normal
variable.parameter.function.coffee#4a64bc
entity.name.section.markdown#a29dfa
punctuation.definition.heading.markdown#4b52aa
markup.raw.inline.markdown#6a85cc
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#4b52aa
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#4b52aa
punctuation.definition.metadata.markdown#4b52aa
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#a29dfa
markup.bold.markdown, markup.italic.markdown#a29dfa
markup.italic.markdownitalic
markup.bold.markdownbold
markup.raw.block.markdown#4b52aa
markup.deleted.git_gutter#4a7aa8
markup.inserted.git_gutter#3f5dcc
markup.changed.git_gutter#373f91
meta.template.expression#81c0e9