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#080304
  • activityBar.border#3d161e
  • activityBar.foreground#ff1744
  • activityBar.inactiveForeground#a38a8e
  • activityBarBadge.background#ff1744
  • activityBarBadge.foreground#ffffff
  • badge.background#ff1744
  • badge.foreground#11111b
  • breadcrumb.activeSelectionForeground#ff1744
  • breadcrumb.focusForeground#ff1744
  • breadcrumb.foreground#a38a8e
  • button.background#ff1744
  • button.foreground#11111b
  • button.hoverBackground#d50000
  • dropdown.background#16080b
  • dropdown.border#3d161e
  • dropdown.foreground#f5f5f7
  • editor.background#0d0507
  • editor.findMatchBackground#ff174470
  • editor.findMatchHighlightBackground#ffd70035
  • editor.foreground#f5f5f7
  • editor.inactiveSelectionBackground#280f1450
  • editor.selectionBackground#ff174445
  • editor.selectionHighlightBackground#ff174420
  • editor.wordHighlightBackground#ffd70025
  • editorCursor.foreground#ff1744
  • editorGroupHeader.border#3d161e
  • editorGroupHeader.tabsBackground#16080b
  • editorLineNumber.activeForeground#ff1744
  • editorLineNumber.foreground#a38a8e
  • focusBorder#ff1744
  • foreground#f5f5f7
  • gitDecoration.deletedResourceForeground#ff1744
  • gitDecoration.modifiedResourceForeground#ffd700
  • gitDecoration.untrackedResourceForeground#00e676
  • input.background#16080b
  • input.border#3d161e
  • input.foreground#f5f5f7
  • input.placeholderForeground#a38a8e
  • list.activeSelectionBackground#280f1480
  • list.activeSelectionForeground#ff1744
  • list.hoverBackground#280f14
  • list.inactiveSelectionBackground#280f14
  • sideBar.background#16080b
  • sideBar.border#3d161e
  • sideBar.foreground#f5f5f7
  • sideBarSectionHeader.background#080304
  • sideBarSectionHeader.foreground#ff1744
  • sideBarTitle.foreground#f5f5f7
  • statusBar.background#050202
  • statusBar.debuggingBackground#ff5252
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#ff1744
  • statusBar.noFolderBackground#080304
  • statusBarItem.hoverBackground#280f14
  • tab.activeBackground#0d0507
  • tab.activeBorder#ff1744
  • tab.activeForeground#f5f5f7
  • tab.border#3d161e
  • tab.hoverBackground#280f14
  • tab.inactiveBackground#16080b
  • tab.inactiveForeground#a38a8e
  • terminal.ansiBlack#280f14
  • terminal.ansiBlue#82b1ff
  • terminal.ansiBrightBlack#a38a8e
  • terminal.ansiBrightBlue#82b1ff
  • terminal.ansiBrightCyan#1de9b6
  • terminal.ansiBrightGreen#00e676
  • terminal.ansiBrightMagenta#ff4081
  • terminal.ansiBrightRed#ff1744
  • terminal.ansiBrightWhite#f5f5f7
  • terminal.ansiBrightYellow#ffd700
  • terminal.ansiCyan#1de9b6
  • terminal.ansiGreen#00e676
  • terminal.ansiMagenta#ff4081
  • terminal.ansiRed#ff1744
  • terminal.ansiWhite#a38a8e
  • terminal.ansiYellow#ffd700
  • terminal.background#0d0507
  • terminal.foreground#f5f5f7
  • terminalCursor.foreground#ff1744
  • titleBar.activeBackground#080304
  • titleBar.activeForeground#f5f5f7
  • titleBar.border#3d161e
  • titleBar.inactiveBackground#0d0507
  • titleBar.inactiveForeground#a38a8e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6e5559italic
variable, string constant.other.placeholder#ffd700
constant.other.color#f5f5f7
invalid, invalid.illegal#ff1744
keyword, storage.type, storage.modifier#ff4081
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#ff5252
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ff1744
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#82b1ff
meta.block variable.other#f5f5f7
support.other.variable, string.other.link#ff1744
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ff5252
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#00e676
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#ffd700
support.type#1de9b6
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#b388ff
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#82b1ff
variable.language#ffd700italic
entity.name.method.js#82b1ffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#82b1ff
entity.other.attribute-name#b388ff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ff5252italic
entity.other.attribute-name.class#b388ff
source.sass keyword.control#82b1ff
markup.inserted#00e676
markup.deleted#ff1744
markup.changed#82b1ff
string.regexp#1de9b6
constant.character.escape#1de9b6
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ff4081italic
source.js constant.other.object.key.js string.unquoted.label.js#ff5252italic
source.json meta.structure.dictionary.json support.type.property-name.json#82b1ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff4081
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#ff1744
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#ff5252
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#00e676
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#1de9b6
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#b388ff
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#ffd700
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#80d8ff
text.html.markdown, punctuation.definition.list_item.markdown#f5f5f7
text.html.markdown markup.inline.raw.markdown#ff1744
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6e5559
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ff4081
markup.italic#ff1744italic
markup.bold, markup.bold string#ff4081bold
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#ff1744bold
markup.underline#82b1ffunderline
markup.quote punctuation.definition.blockquote.markdown#6e5559
markup.quoteitalic
string.other.link.title.markdown#82b1ff
string.other.link.description.title.markdown#ff4081
constant.other.reference.link.markdown#ff5252
markup.raw.block#ff1744
markup.raw.block.fenced.markdown#f5f5f715
punctuation.definition.fenced.markdown#f5f5f715
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#f5f5f7
variable.language.fenced.markdown#6e5559
meta.separator#6e5559bold
markup.table#f5f5f7
BearTheme by GabrielTeles - VS Code Theme