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#ededf5
  • activityBar.foreground#705697
  • activityBarBadge.background#705697
  • badge.background#705697aa
  • button.background#705697
  • dropdown.background#f5f5f5
  • editor.background#f5f5f5
  • editor.findMatchBackground#bf9cac
  • editor.findMatchHighlightBackground#edc9d899
  • editor.lineHighlightBackground#e4f6d4
  • editor.selectionBackground#c9d0d9
  • editorCursor.foreground#54494b
  • editorGroup.dropBackground#c9d0d988
  • editorLineNumber.activeForeground#9769dc
  • editorLineNumber.foreground#6d705b
  • editorWhitespace.foreground#aaaaaa
  • errorForeground#f1897f
  • focusBorder#9769dc
  • inputOption.activeBorder#adafb7
  • inputValidation.errorBackground#ffeaea
  • inputValidation.errorBorder#f1897f
  • inputValidation.infoBackground#f2fcff
  • inputValidation.infoBorder#4ec1e5
  • inputValidation.warningBackground#fffee2
  • inputValidation.warningBorder#ffe055
  • list.activeSelectionBackground#c4d9b1
  • list.activeSelectionForeground#6c6c6c
  • list.highlightForeground#9769dc
  • list.hoverBackground#e0e0e0
  • list.inactiveSelectionBackground#d3dbcd
  • minimap.selectionHighlight#c9d0d9
  • panel.background#f5f5f5
  • peekView.border#705697
  • peekViewEditor.background#f2f8fc
  • peekViewEditor.matchHighlightBackground#c2dfe3
  • peekViewResult.background#f2f8fc
  • peekViewResult.matchHighlightBackground#93c6d6
  • peekViewTitle.background#f2f8fc
  • pickerGroup.border#749351
  • pickerGroup.foreground#a6b39b
  • ports.iconRunningProcessForeground#749351
  • progressBar.background#705697
  • quickInputList.focusBackground#cadeb9
  • selection.background#c9d0d9
  • sideBar.background#f2f2f2
  • sideBarSectionHeader.background#ede8ef
  • statusBar.background#705697
  • statusBar.debuggingBackground#705697
  • statusBar.noFolderBackground#705697
  • statusBarItem.remoteBackground#4e3c69
  • tab.lastPinnedBorder#c9d0d9
  • titleBar.activeBackground#c4b7d7
  • walkThrough.embeddedEditorBackground#00000014
  • welcomePage.tileBackground#f0f0f7

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AAAAAA
comment.keyword, keyword.codetag, keyword.phpdoc#AAAAAAbold
invalid.deprecated
invalid.illegal#660000
string, string.quoted, punctuation.definition.string, string.regexp, storage.type.string#448C27
string.regex#333333
string.regexp keyword, string.regexp keyword.operator, string.regexp constant, string.regexp constant.character, string.regexp punctuation#7A3E9D
meta.tag string.quoted, meta.tag punctuation.definition.string#448C27
markup.changed
markup.deleted
markup.italicitalic
markup.error#660000
markup.inserted
meta.link, meta.image.inline#4B83CD
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#333333 bold
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.inline.raw#777777
markdown.punctuation, markdown.link punctuation, punctuation.definition.raw.markdown, punctuation.definition.heading.markdown, beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.bold.markdown, punctuation.definition.italic.markdown, punctuation.definition.metadata.markdown#448C27
string.other.link.description.markdown, string.other.link.title.markdown#7A3E9D
meta.template.expression#000000
meta.diff.range, meta.diff.index, meta.separator
meta.diff.header.from-file
meta.diff.header.to-file
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080