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#d6e4f0
  • activityBar.foreground#4b83cd
  • activityBarBadge.background#a494c0
  • badge.background#a494c0
  • badge.foreground#a494c0
  • button.background#4b83cd
  • dropdown.background#f5f5f5
  • editor.background#f5f5f5
  • editor.findMatchBackground#fef935
  • editor.findMatchHighlightBackground#fef93533
  • editor.findRangeHighlightBackground#dcdcdc55
  • editor.foreground#333
  • editor.inactiveSelectionBackground#d6cfe2
  • editor.lineHighlightBackground#00000008
  • editor.selectionBackground#d6cfe2
  • editor.selectionHighlightBackground#d6cfe2
  • editor.selectionHighlightBorder#d6cfe2
  • editor.wordHighlightBackground#d6cfe2
  • editor.wordHighlightStrongBackground#d6cfe2
  • editorCursor.foreground#333
  • editorGroup.dropBackground#c9d0d988
  • editorGroupHeader.tabsBackground#eaeaea
  • editorIndentGuide.activeBackground#dcdcdc
  • editorIndentGuide.background#ebebeb
  • editorLineNumber.activeForeground#333
  • editorLineNumber.foreground#aaa
  • editorLink.activeForeground#4b83cd
  • editorRuler.foreground#ebebeb
  • editorWhitespace.foreground#ebebeb
  • errorForeground#d32f2f
  • focusBorder#4b83cd
  • inputOption.activeBorder#adafb7
  • inputValidation.errorBackground#ffeaea
  • inputValidation.errorBorder#f1897f
  • inputValidation.infoBackground#f2fcff
  • inputValidation.infoBorder#4ec1e5
  • inputValidation.warningBackground#fffee2
  • inputValidation.warningBorder#ffe055
  • list.activeSelectionBackground#4b83cd
  • list.activeSelectionForeground#a494c0
  • list.focusBackground#d6cfe2
  • list.focusHighlightForeground#a494c0
  • list.highlightForeground#a494c0
  • list.hoverBackground#a494c0
  • list.inactiveFocusBackground#d6cfe2
  • list.inactiveSelectionBackground#d6cfe2
  • list.inactiveSelectionForeground#a494c0
  • panel.background#eaeaea
  • peekView.border#705697
  • peekViewEditor.background#f2f8fc
  • peekViewEditor.matchHighlightBackground#c2dfe3
  • peekViewResult.background#f2f8fc
  • peekViewResult.matchHighlightBackground#93c6d6
  • peekViewTitle.background#f2f8fc
  • pickerGroup.border#749351
  • pickerGroup.foreground#a6b39b
  • progressBar.background#705697
  • quickInput.background#f5f5f5
  • quickInput.foreground#333
  • quickInputList.focusBackground#d6cfe2
  • quickInputList.focusForeground#a494c0
  • quickInputList.focusHighlightForeground#e0e0e0
  • quickInputList.highlightForeground#a494c0
  • quickInputList.hoverBackground#e0e0e0
  • quickInputList.hoverForeground#333
  • quickInputList.inactiveFocusBackground#d6cfe2
  • quickInputList.inactiveSelectionBackground#d6cfe2
  • selection.background#d6cfe2
  • sideBar.background#eaeaea
  • sideBarSectionHeader.background#e0e9f6
  • statusBar.background#3f6fb5
  • statusBar.debuggingBackground#aa3731
  • statusBar.noFolderBackground#aa3731
  • tab.activeBackground#f5f5f5
  • tab.inactiveBackground#eaeaea
  • tab.modifiedBorder#f1897f
  • terminal.background#f5f5f5
  • titleBar.activeBackground#eaeaea
  • walkThrough.embeddedEditorBackground#00000014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.control, keyword.operator.expression, keyword.operator.new, keyword.control.new, storage.type, storage.modifier, keyword.other.use, keyword.other.namespace, storage.modifier.extends, entity.other.inherited-class, variable.language, variable.language.this, variable.language.self, variable.language.super, variable.language.parent, variable.language punctuation.definition.variable.php, punctuation.definition.variable.php, keyword.control.php, keyword.control.flow, keyword.control.async-modifier, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.returnitalic
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#d6cfe2
keyword.operator.new#7a3e9d
storage, storage.type, storage.modifier, support.type#7a3e9d
constant.language, support.constant, variable.language, variable.language.this#ab6526
variable, support.variable#7a3e9d
punctuation.definition.variable#b19bbd
entity.name.function, entity.name.class, entity.method.name, support.function, meta.function-call#aa3731
entity.name.function, entity.name.class, entity.method.namebold
meta.function-call.arguments#333333
entity.name.type, entity.other.inherited-class, support.class#aa3731bold italic
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#ab6526
string, string.quoted, punctuation.definition.string, string.regexp, storage.type.string#d6cfe2
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.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html, meta.tag.preprocessor, meta.tag.preprocessor entity.name.tag, meta.tag.preprocessor entity.other.attribute-name#aaaaaa
meta.tag, entity.attribute-name, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.other.attribute-name.html, punctuation.separator.key-value.html#d6cfe2
entity.name.tag#4b83cd
meta.tag string.quoted, meta.tag punctuation.definition.string#d6cfe2
constant.character.entity, punctuation.definition.entity#ab6526
meta.selector, selector.css, entity.name.selector, entity.other.attribute-name.id.css, source.css entity.name.tag, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.parent-selector, entity.other.attribute-name.pseudo-element, punctuation.definition.entity.css, entity.id.scss, entity.tag.scss, entity.class.scss, entity.pseudo-class.scss, entity.parent-selector.scss, entity.pseudo-element.scss, punctuation.separator.list.css, meta.property-list keyword.operator.less, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.attribute.scss, entity.other.attribute-name.scss, entity.name.function.scss#7a3e9d
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#d6cfe2
source.css variable, source.css.less variable, source.css.scss variable#aa3731
keyword.other.importantbold
variable.js, source.js variable, source.js support.variable, source.js support.type#333333
entity.name.function.js
source.embedded
punctuation.support.type.property-name#ab6526
source.php
punctuation.section.embedded.metatag.php#aa3731bold
entity.name.function.decorator, meta.function.decorator punctuation.definition, meta.function.decorator string.quoted, meta.function.decorator punctuation.definition.string, meta.function.decorator meta.function-call.arguments, meta.function.decorator variable.parameter, meta.function.decorator keyword.operator#aaaaaa
source.python variable.parameter#333333
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#d6cfe2
string.other.link.description.markdown, string.other.link.title.markdown#7a3e9d
meta.diff.range, meta.diff.index, meta.separator
meta.diff.header.from-file
meta.diff.header.to-file