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#202442
  • activityBar.foreground#356BDE
  • activityBarBadge.background#356BDE
  • badge.background#38A169
  • badge.foreground#fff
  • button.background#4299E1
  • dropdown.background#f5f5f5
  • editor.background#f0f0f0
  • editor.findMatchBackground#fef935
  • editor.findMatchHighlightBackground#356BDE33
  • editor.findRangeHighlightBackground#dcdcdc55
  • editor.foreground#666
  • editor.inactiveSelectionBackground#dcdcdcaa
  • editor.lineHighlightBackground#fafafa
  • editor.selectionBackground#3182CE44
  • editor.selectionHighlightBackground#3182CE44
  • editor.selectionHighlightBorder#3182CE
  • editor.wordHighlightBackground#3182CE44
  • editor.wordHighlightStrongBackground#3182CE44
  • editorCursor.foreground#aaa
  • editorGroup.dropBackground#c9d0d988
  • editorIndentGuide.activeBackground#dcdcdc
  • editorIndentGuide.background#ebebeb
  • editorLineNumber.activeForeground#333
  • editorLineNumber.foreground#aaa
  • editorLink.activeForeground#4b83cd
  • editorRuler.foreground#ebebeb
  • editorWhitespace.foreground#ebebeb
  • errorForeground#600
  • focusBorder#a6b39b
  • gitDecoration.addedResourceForeground#19905b
  • gitDecoration.conflictingResourceForeground#F99192
  • gitDecoration.deletedResourceForeground#C64D56
  • gitDecoration.ignoredResourceForeground#aaa
  • gitDecoration.modifiedResourceForeground#4299E1
  • gitDecoration.submoduleResourceForeground#aaa
  • gitDecoration.untrackedResourceForeground#19905b
  • 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#fff
  • list.focusBackground#91b3e0
  • list.highlightForeground#3182CE
  • list.hoverBackground#e0e0e0
  • list.inactiveFocusBackground#91b3e0
  • list.inactiveSelectionBackground#91b3e0
  • list.inactiveSelectionForeground#fff
  • 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#e4e4e4
  • sideBar.foreground#4A5568
  • sideBarSectionHeader.background#202442
  • sideBarSectionHeader.foreground#356BDE
  • statusBar.background#4b83cd
  • statusBar.debuggingBackground#aa3731
  • statusBar.noFolderBackground#aa3731
  • tab.modifiedBorder#f1897f
  • 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#4299E1italic
punctuation.definition.keyword, keyword.control.at-rule.css punctuation#91b3e0
keyword.operator.new#3182CE
storage, storage.type, storage.modifier, support.type#3182CE
constant.language, support.constant, variable.language, variable.language.this#FF6A66bold
variable, support.variable#666
punctuation.definition.variable#3182CE
entity.name.function, entity.name.class, entity.method.name, support.function, meta.function-call#9E45AF
entity.name.function, entity.name.class, entity.method.name
meta.function-call.arguments#333333
entity.name.type, entity.other.inherited-class, support.class#C64D56
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#19905b
string, string.quoted, punctuation.definition.string, string.regexp, storage.type.string#19905b
constant.character.escape#234E52
string.regex#333333
string.regexp keyword, string.regexp keyword.operator, string.regexp constant, string.regexp constant.character, string.regexp punctuation#9E45AF
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#7AA5F0
entity.name.tag#356BDE
meta.tag string.quoted, meta.tag punctuation.definition.string#19905b
constant.character.entity, punctuation.definition.entity#C64D56
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#C64D56
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#4A5568
meta.property-name, support.type.property-name#3182CE
meta.property-value, source.css keyword.other, source.css constant, source.css constant.numeric, source.css constant.numeric punctuation, meta.property-value support.constant#19905b
support.constant.property-value.cssnormal
source.css variable, source.css.less variable, source.css.scss variable#C64D56
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
constant.other.class.php#C64D56
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#C64D56
string.other.link.description.markdown, string.other.link.title.markdown#19905b
meta.diff.range, meta.diff.index, meta.separator
meta.diff.header.from-file
meta.diff.header.to-file