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#e5e9f0
  • activityBar.border#cdd5e0
  • activityBar.foreground#ff003c
  • activityBar.inactiveForeground#5a6270
  • activityBarBadge.background#ff003c
  • activityBarBadge.foreground#ffffff
  • badge.background#ff003c
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ff003c
  • breadcrumb.focusForeground#ff003c
  • breadcrumb.foreground#5a6270
  • button.background#ff003c
  • button.foreground#ffffff
  • button.hoverBackground#d60032
  • dropdown.background#ffffff
  • dropdown.border#cdd5e0
  • dropdown.foreground#111318
  • editor.background#f2f4f8
  • editor.findMatchBackground#ffe50060
  • editor.findMatchHighlightBackground#ffe50030
  • editor.foreground#111318
  • editor.inactiveSelectionBackground#cdd5e050
  • editor.selectionBackground#ff003c2e
  • editor.selectionHighlightBackground#ff003c18
  • editor.wordHighlightBackground#00b4d825
  • editorCursor.foreground#ff003c
  • editorGroupHeader.border#cdd5e0
  • editorGroupHeader.tabsBackground#e5e9f0
  • editorLineNumber.activeForeground#ff003c
  • editorLineNumber.foreground#5a6270
  • focusBorder#ff003c
  • foreground#111318
  • gitDecoration.deletedResourceForeground#ff003c
  • gitDecoration.modifiedResourceForeground#e5a000
  • gitDecoration.untrackedResourceForeground#00b86b
  • input.background#ffffff
  • input.border#cdd5e0
  • input.foreground#111318
  • input.placeholderForeground#5a6270
  • list.activeSelectionBackground#cdd5e060
  • list.activeSelectionForeground#ff003c
  • list.hoverBackground#d8dee9
  • list.inactiveSelectionBackground#d8dee9
  • sideBar.background#e5e9f0
  • sideBar.border#cdd5e0
  • sideBar.foreground#111318
  • sideBarSectionHeader.background#e5e9f0
  • sideBarSectionHeader.foreground#ff003c
  • sideBarTitle.foreground#111318
  • statusBar.background#d8dee9
  • statusBar.debuggingBackground#ff6f00
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ff003c
  • statusBar.noFolderBackground#e5e9f0
  • statusBarItem.hoverBackground#d8dee9
  • tab.activeBackground#f2f4f8
  • tab.activeBorder#ff003c
  • tab.activeForeground#111318
  • tab.border#cdd5e0
  • tab.hoverBackground#d8dee9
  • tab.inactiveBackground#e5e9f0
  • tab.inactiveForeground#5a6270
  • terminal.ansiBlack#111318
  • terminal.ansiBlue#0055ff
  • terminal.ansiBrightBlack#5a6270
  • terminal.ansiBrightBlue#0055ff
  • terminal.ansiBrightCyan#00b4d8
  • terminal.ansiBrightGreen#00b86b
  • terminal.ansiBrightMagenta#ff007a
  • terminal.ansiBrightRed#ff003c
  • terminal.ansiBrightWhite#111318
  • terminal.ansiBrightYellow#e5a000
  • terminal.ansiCyan#00b4d8
  • terminal.ansiGreen#00b86b
  • terminal.ansiMagenta#ff007a
  • terminal.ansiRed#ff003c
  • terminal.ansiWhite#7b8494
  • terminal.ansiYellow#e5a000
  • terminal.background#f2f4f8
  • terminal.foreground#111318
  • terminalCursor.foreground#ff003c
  • titleBar.activeBackground#e5e9f0
  • titleBar.activeForeground#111318
  • titleBar.border#cdd5e0
  • titleBar.inactiveBackground#f2f4f8
  • titleBar.inactiveForeground#5a6270

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7b8494italic
variable, string constant.other.placeholder#7928ca
constant.other.color#111318
invalid, invalid.illegal#ff003c
keyword, storage.type, storage.modifier#ff007a
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#ff6f00
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ff003c
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#0055ff
meta.block variable.other#111318
support.other.variable, string.other.link#ff0055
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ff6f00
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#00b86b
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#e5a000
support.type#00b4d8
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#7928ca
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#0055ff
variable.language#7928caitalic
entity.name.method.js#0055ffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#0055ff
entity.other.attribute-name#7928ca
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ff6f00italic
entity.other.attribute-name.class#7928ca
source.sass keyword.control#0055ff
markup.inserted#00b86b
markup.deleted#ff003c
markup.changed#0055ff
string.regexp#00b4d8
constant.character.escape#00b4d8
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ff007aitalic
source.js constant.other.object.key.js string.unquoted.label.js#ff6f00italic
source.json meta.structure.dictionary.json support.type.property-name.json#0055ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff007a
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#ff003c
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#ff6f00
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#00b86b
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#00b4d8
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#7928ca
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#e5a000
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#0288d1
text.html.markdown, punctuation.definition.list_item.markdown#111318
text.html.markdown markup.inline.raw.markdown#ff0055
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#7b8494
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ff007a
markup.italic#ff0055italic
markup.bold, markup.bold string#ff007abold
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#ff0055bold
markup.underline#0055ffunderline
markup.quote punctuation.definition.blockquote.markdown#7b8494
markup.quoteitalic
string.other.link.title.markdown#0055ff
string.other.link.description.title.markdown#ff007a
constant.other.reference.link.markdown#ff6f00
markup.raw.block#ff0055
markup.raw.block.fenced.markdown#11131815
punctuation.definition.fenced.markdown#11131815
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#111318
variable.language.fenced.markdown#7b8494
meta.separator#7b8494bold
markup.table#111318
BearTheme by GabrielTeles - VS Code Theme