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#448c27
  • badge.foreground#ffffff
  • button.background#4b83cd
  • dropdown.background#f5f5f5
  • editor.background#f5f5f5
  • editor.findMatchBackground#fef935
  • editor.findMatchHighlightBackground#fef93533
  • editor.findRangeHighlightBackground#dcdcdc55
  • editor.foreground#333333
  • editor.inactiveSelectionBackground#dcdcdcaa
  • editor.lineHighlightBackground#e4f6d4
  • editor.selectionBackground#c1f5b0
  • editor.selectionHighlightBackground#c1f5b044
  • editor.selectionHighlightBorder#c1f5b0
  • editor.wordHighlightBackground#c1f5b044
  • editor.wordHighlightStrongBackground#c1f5b044
  • editorCursor.foreground#aaaaaa
  • editorGroup.dropBackground#c9d0d988
  • editorIndentGuide.activeBackground#dcdcdc
  • editorIndentGuide.background#ebebeb
  • editorLineNumber.activeForeground#333333
  • editorLineNumber.foreground#aaaaaa
  • editorLink.activeForeground#4b83cd
  • editorRuler.foreground#ebebeb
  • editorWhitespace.foreground#ebebeb
  • errorForeground#660000
  • focusBorder#a6b39b
  • 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#ffffff
  • list.focusBackground#91b3e0
  • list.highlightForeground#7a3e9d
  • list.hoverBackground#e0e0e0
  • list.inactiveFocusBackground#91b3e0
  • list.inactiveSelectionBackground#91b3e0
  • list.inactiveSelectionForeground#ffffff
  • 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
  • progressBar.background#705697
  • selection.background#c1f5b0
  • sideBar.background#f2f2f2
  • sideBarSectionHeader.background#e0e9f6
  • statusBar.background#705697
  • statusBar.debuggingBackground#705697
  • statusBar.noFolderBackground#705697
  • statusBarItem.remoteBackground#4e3c69
  • titleBar.activeBackground#c4b7d7
  • walkThrough.embeddedEditorBackground#00000014

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, 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#AA3731 bold
entity.name.exception#660000
entity.name.sectionbold
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.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#91B3E0
entity.name.tag#4B83CD
meta.tag string.quoted, meta.tag punctuation.definition.string#448C27
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#448C27
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#448C27
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
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080