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
keyword.operator#777777
keyword, keyword.operator.expression, keyword.control.at-rule.css, source.php storage.modifier, source.php storage.type#4B83CD
punctuation.definition.keyword, keyword.control.at-rule.css punctuation#91B3E0
keyword.operator.new#7A3E9D
storage, storage.type, storage.modifier, support.type#7A3E9D
constant.language, support.constant#AB6526
constant.numeric, constant.character, constant#AB6526
string, string.quoted, punctuation.definition.string, string.regexp, storage.type.string#448C27
constant.character.escape#AB6526
string.regex#333333
string.regexp keyword, string.regexp keyword.operator, string.regexp constant, string.regexp constant.character, string.regexp punctuation#7A3E9D
constant.other.symbol#AB6526
punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts#AB6526
punctuation, punctuation.separator#777777
meta.tag string.quoted, meta.tag punctuation.definition.string#448C27
constant.character.entity, punctuation.definition.entity#AB6526
meta.property-name, support.type.property-name#AB6526
meta.property-value, source.css keyword.other, source.css constant, source.css constant.numeric, source.css constant.numeric punctuation, meta.property-value support.constant#448C27
keyword.other.importantbold
source.embedded
punctuation.support.type.property-name#AB6526
source.php
punctuation.section.embedded.metatag.php#AA3731bold
source.python support.type#333333
source.python meta.function-call support.type#AA3731
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