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.name—bold
meta.function-call.arguments#333333—
entity.name.type, entity.other.inherited-class, support.class#AA3731 bold
entity.name.exception#660000—
entity.name.section—bold
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.important—bold
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.italic—italic
markup.error#660000—
markup.inserted——
meta.link, meta.image.inline#4B83CD—
markup.output, markup.raw#777777—
markup.prompt#777777—
markup.heading#333333 bold
markup.bold—bold
markup.traceback#660000—
markup.underline—underline
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—