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.section—bold
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.css—normal
source.css variable, source.css.less variable, source.css.scss variable#C64D56—
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—
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.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.boldbold
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#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——