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#E9F2FA
  • activityBar.dropBackground#BA55D844
  • activityBar.foreground#454D53
  • activityBarBadge.background#E9F2FA
  • activityBarBadge.foreground#454d63
  • badge.background#C4CDD5
  • badge.foreground#E1BD09
  • button.background#C4CDD5
  • button.foreground#454d63
  • button.hoverBackground#C4CDD5
  • editor.background#E9F2FA
  • editor.foreground#454d63
  • editor.hoverHighlightBackground#F7FFFF
  • editor.inactiveSelectionBackground#F7FFFF
  • editor.lineHighlightBackground#F7FFFF
  • editor.selectionBackground#F7FFFF
  • editor.selectionForeground#C4CDD5
  • editor.selectionHighlightBackground#C4CDD544
  • editor.wordHighlightBackground#F7FFFF
  • editorGroup.border#00000000
  • editorGroup.dropBackground#F7FFFF
  • editorGroup.emptyBackground#E9F2FA
  • editorGroupHeader.noTabsBackground#E9F2FA
  • editorGroupHeader.tabsBackground#E9F2FA
  • editorIndentGuide.activeBackground#C4CDD5
  • editorIndentGuide.background#F7FFFF
  • editorLineNumber.activeForeground#454d63
  • editorLineNumber.foreground#454D53
  • focusBorder#BA55D8
  • gitDecoration.addedResourceForeground#7B92C9
  • gitDecoration.conflictingResourceForeground#E1BD09
  • gitDecoration.deletedResourceForeground#E32636
  • gitDecoration.ignoredResourceForeground#454D53
  • gitDecoration.modifiedResourceForeground#8BA66A
  • gitDecoration.submoduleResourceForeground#454D53
  • gitDecoration.untrackedResourceForeground#454D53
  • list.activeSelectionBackground#F7FFFF
  • list.inactiveSelectionBackground#F7FFFF
  • panel.background#E9F2FA
  • panel.border#00000000
  • panel.dropBackground#BA55D844
  • panelTitle.activeForeground#454d63
  • panelTitle.inactiveForeground#454D53
  • selection.background#C4CDD5
  • sideBar.background#E9F2FA
  • sideBar.foreground#454d63
  • sideBarSectionHeader.background#E9F2FA
  • sideBarTitle.foreground#454d63
  • statusBar.background#E9F2FA
  • statusBar.debuggingBackground#FF5B35
  • statusBar.foreground#454d63
  • statusBar.noFolderBackground#E9F2FA
  • statusBarItem.prominentBackground#C4CDD5
  • tab.activeBackground#F7FFFF
  • tab.activeBorder#BA55D8
  • tab.activeForeground#454d63
  • tab.inactiveBackground#E9F2FA
  • tab.inactiveForeground#454D53
  • tab.unfocusedActiveBorder#BA55D8
  • terminal.ansiBlack#E9F2FA
  • terminal.ansiBlue#7B92C9
  • terminal.ansiBrightBlack#454D53
  • terminal.ansiBrightWhite#C4CDD5
  • terminal.ansiCyan#649AA2
  • terminal.ansiGreen#8BA66A
  • terminal.ansiMagenta#DF3D8B
  • terminal.ansiRed#E32636
  • terminal.ansiWhite#454d63
  • terminal.ansiYellow#E1BD09
  • titleBar.activeBackground#E9F2FA
  • titleBar.inactiveBackground#E9F2FA
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#454d63
comment, punctuation.definition.comment#454D53italic
variable, string constant.other.placeholder#454d63
constant.other.color#C4CDD5
invalid, invalid.illegal#454D53
keyword, storage.type, storage.modifier#7B92C9bold
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#454d63
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#FF5B35
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#7B92C9
meta.block variable.other#f07178
support.other.variable, string.other.link#f07178
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#649AA2
string#2E363C
constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#FF5B35
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#8BA66A
support.type#649AA2
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#649AA2
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#7B92C9
variable.language#DF3D8Bitalic
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#7B92C9
entity.other.attribute-name#7B92C9
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#DF3D8Bitalic
entity.other.attribute-name.class#DF3D8B
source.sass keyword.control#7B92C9
markup.inserted#E32636
markup.deleted#454D53
markup.changed#7B92C9
string.regexp#89DDFF
constant.character.escape#89DDFF
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#C792EA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E1BD09
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF5B35
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8BA66A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#649AA2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7B92C9
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#DF3D8B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#E1BD09
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#8BA66A
text.html.markdown, punctuation.definition.list_item.markdown#454d63
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#DF3D8B
markup.italic#2E363Citalic
markup.bold, markup.bold string#2E363Cbold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#2E363Citalic bold
markup.underline#2E363Cunderline
markup.strike#454D53strike
markup.quote punctuation.definition.blockquote.markdown#2E363C
markup.quote#2E363Citalic
string.other.link.title.markdown#DF3D8B
string.other.link.description.title.markdown#7B92C9
constant.other.reference.link.markdown#DF3D8B
markup.underline.link#7B92C9
markup.raw.block#C792EA
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#7B92C9
variable.language.fenced.markdown#8BA66A
meta.separator#BA55D8bold
markup.table#454d63
token.info-token#7B92C9
token.warn-token#E1BD09
token.error-token#E32636
token.debug-token#DF3D8B
mihari by rynco - VS Code Theme