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.activeBorder#F5BDDA
  • activityBar.background#222121
  • activityBar.border#F5BDDA
  • activityBar.foreground#B63958
  • activityBar.inactiveForeground#D8DEE9
  • activityBarBadge.background#B63958
  • breadcrumb.foreground#F5BDDA
  • button.background#A5BDD6
  • button.foreground#2D6187
  • button.hoverBackground#759AB4
  • editor.selectionBackground#A5BDD62f
  • editorCursor.foreground#F5BDDA
  • editorGroupHeader.tabsBackground#242222
  • editorHoverWidget.border#5E81AC
  • editorHoverWidget.foreground#F5BDDA
  • editorLineNumber.activeForeground#5E81AC
  • editorLineNumber.foreground#F5BDDA
  • editorSuggestWidget.foreground#F5BDDA
  • focusBorder#F5BDDA
  • foreground#F5BDDA
  • icon.foreground#B63958
  • input.foreground#F5BDDA
  • input.placeholderForeground#F5BDDA
  • list.activeSelectionBackground#F5BDDA4D
  • list.activeSelectionForeground#B63958
  • list.focusBackground#9590BD
  • list.highlightForeground#F5BDDA
  • list.hoverBackground#F5BDDA4D
  • notifications.border#5E81AC
  • notifications.foreground#F5BDDA
  • panel.border#F5BDDA
  • panelTitle.activeBorder#F5BDDA
  • panelTitle.activeForeground#F5BDDA
  • progressBar.background#A5BDD6
  • scrollbar.shadow#A5BDD6
  • selection.background#5E81AC
  • sideBar.background#222121
  • sideBar.border#F5BDDA
  • sideBar.foreground#F5BDDA
  • sideBarSectionHeader.background#222121
  • sideBarSectionHeader.border#F5BDDA
  • sideBarSectionHeader.foreground#F5AD43
  • sideBarTitle.foreground#F5AD43
  • statusBar.background#D8DEE9
  • statusBar.border#A5BDD6
  • statusBar.debuggingBackground#F5BDDA
  • statusBar.debuggingForeground#2D6187
  • statusBar.foreground#B63958
  • statusBarItem.hoverBackground#9590BD
  • statusBarItem.remoteBackground#B63958
  • statusBarItem.remoteForeground#222121
  • tab.activeBorder#F5BDDA
  • tab.activeForeground#F5BDDA
  • terminal.background#1B1A1A
  • terminal.border#F5BDDA
  • terminal.foreground#F5BDDA
  • terminal.selectionBackground#A5BDD662
  • terminalCursor.background#5E81AC
  • terminalCursor.foreground#F5BDDA
  • textLink.foreground#B63958
  • tree.indentGuidesStroke#F5BDDA
  • widget.shadow#1B1A1A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#81A1C1
variable, string constant.other.placeholder#CBD6D7
constant.other.color#ECEFF4
invalid, invalid.illegal#BF616A
keyword, storage.type, storage.modifier#F5BDDA
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#88C0D0
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#CBD6D7
Others#D8DEE9
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#88C0D0
meta.block variable.other#BF616A
support.other.variable, string.other.link#BF616A
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#B48EAD
string, 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#A3BE8C
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#CBD6D7
support.type#CBD6D7
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#A5BDD6
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#F5BDDA
variable.language#F5BDDAitalic
entity.name.method.js#B48EADitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#B48EAD
entity.other.attribute-name#F5BDDA
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#F5BDDAitalic
entity.other.attribute-name.class#81A1C1
source.sass keyword.control#B48EAD
markup.inserted#CBD6D7
markup.deleted#81A1C1
markup.changed#B48EAD
string.regexp#CBD6D7
constant.character.escape#CBD6D7
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#D8DEE9italic
source.js constant.other.object.key.js string.unquoted.label.js#81A1C1italic
source.json meta.structure.dictionary.json support.type.property-name.json#81A1C1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ECEFF4
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#B48EAD
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#81A1C1
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#B48EAD
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#81A1C1
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#B48EAD
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#81A1C1
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#B48EAD
text.html.markdown, punctuation.definition.list_item.markdown#D8DEE9
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#F4D0FF
markup.italic#F5AD43italic
markup.bold, markup.bold string#F5AD43bold
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#F07178bold
markup.underline#9590BDunderline
EVASCode: The End of Development by TecnoMazov - VS Code Theme