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#01070d
  • activityBar.border#0f335c
  • activityBar.foreground#00ffff
  • activityBar.inactiveForeground#7da4c2
  • activityBarBadge.background#ff00a0
  • activityBarBadge.foreground#ffffff
  • badge.background#00ffff
  • badge.foreground#11111b
  • breadcrumb.activeSelectionForeground#00ffff
  • breadcrumb.focusForeground#00ffff
  • breadcrumb.foreground#7da4c2
  • button.background#00ffff
  • button.foreground#11111b
  • button.hoverBackground#00d9d9
  • dropdown.background#051324
  • dropdown.border#0f335c
  • dropdown.foreground#e0f2fe
  • editor.background#020b14
  • editor.findMatchBackground#ff00a065
  • editor.findMatchHighlightBackground#00ffa235
  • editor.foreground#e0f2fe
  • editor.inactiveSelectionBackground#0a223d50
  • editor.selectionBackground#00ffff35
  • editor.selectionHighlightBackground#00ffff18
  • editor.wordHighlightBackground#ff00a025
  • editorCursor.foreground#00ffff
  • editorGroupHeader.border#0f335c
  • editorGroupHeader.tabsBackground#051324
  • editorLineNumber.activeForeground#00ffff
  • editorLineNumber.foreground#7da4c2
  • focusBorder#00ffff
  • foreground#e0f2fe
  • gitDecoration.deletedResourceForeground#ff0077
  • gitDecoration.modifiedResourceForeground#00ffa2
  • gitDecoration.untrackedResourceForeground#00ffa2
  • input.background#051324
  • input.border#0f335c
  • input.foreground#e0f2fe
  • input.placeholderForeground#7da4c2
  • list.activeSelectionBackground#0a223d80
  • list.activeSelectionForeground#00ffff
  • list.hoverBackground#0a223d
  • list.inactiveSelectionBackground#0a223d
  • sideBar.background#051324
  • sideBar.border#0f335c
  • sideBar.foreground#e0f2fe
  • sideBarSectionHeader.background#01070d
  • sideBarSectionHeader.foreground#00ffff
  • sideBarTitle.foreground#e0f2fe
  • statusBar.background#010408
  • statusBar.debuggingBackground#ff8000
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#00ffff
  • statusBar.noFolderBackground#01070d
  • statusBarItem.hoverBackground#0a223d
  • tab.activeBackground#020b14
  • tab.activeBorder#00ffff
  • tab.activeForeground#e0f2fe
  • tab.border#0f335c
  • tab.hoverBackground#0a223d
  • tab.inactiveBackground#051324
  • tab.inactiveForeground#7da4c2
  • terminal.ansiBlack#0a223d
  • terminal.ansiBlue#0088ff
  • terminal.ansiBrightBlack#7da4c2
  • terminal.ansiBrightBlue#0088ff
  • terminal.ansiBrightCyan#00ffff
  • terminal.ansiBrightGreen#00ffa2
  • terminal.ansiBrightMagenta#ff00a0
  • terminal.ansiBrightRed#ff0077
  • terminal.ansiBrightWhite#e0f2fe
  • terminal.ansiBrightYellow#00ffa2
  • terminal.ansiCyan#00ffff
  • terminal.ansiGreen#00ffa2
  • terminal.ansiMagenta#ff00a0
  • terminal.ansiRed#ff0077
  • terminal.ansiWhite#7da4c2
  • terminal.ansiYellow#00ffa2
  • terminal.background#020b14
  • terminal.foreground#e0f2fe
  • terminalCursor.foreground#00ffff
  • titleBar.activeBackground#01070d
  • titleBar.activeForeground#e0f2fe
  • titleBar.border#0f335c
  • titleBar.inactiveBackground#020b14
  • titleBar.inactiveForeground#7da4c2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#466782italic
variable, string constant.other.placeholder#00ffff
constant.other.color#e0f2fe
invalid, invalid.illegal#ff0077
keyword, storage.type, storage.modifier#ff00a0
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#ff8000
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ff0077
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#0088ff
meta.block variable.other#e0f2fe
support.other.variable, string.other.link#ff00a0
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ff8000
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#00ffa2
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#00ffa2
support.type#00ffff
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#a855f7
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#0088ff
variable.language#00ffffitalic
entity.name.method.js#0088ffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#0088ff
entity.other.attribute-name#a855f7
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ff8000italic
entity.other.attribute-name.class#a855f7
source.sass keyword.control#0088ff
markup.inserted#00ffa2
markup.deleted#ff0077
markup.changed#0088ff
string.regexp#00ffff
constant.character.escape#00ffff
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ff00a0italic
source.js constant.other.object.key.js string.unquoted.label.js#ff8000italic
source.json meta.structure.dictionary.json support.type.property-name.json#0088ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff00a0
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#ff0077
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#ff8000
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#00ffa2
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#00ffff
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#a855f7
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#00ffa2
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#38bdf8
text.html.markdown, punctuation.definition.list_item.markdown#e0f2fe
text.html.markdown markup.inline.raw.markdown#ff00a0
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#466782
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ff00a0
markup.italic#ff00a0italic
markup.bold, markup.bold string#ff00a0bold
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#ff00a0bold
markup.underline#0088ffunderline
markup.quote punctuation.definition.blockquote.markdown#466782
markup.quoteitalic
string.other.link.title.markdown#0088ff
string.other.link.description.title.markdown#ff00a0
constant.other.reference.link.markdown#ff8000
markup.raw.block#ff00a0
markup.raw.block.fenced.markdown#e0f2fe15
punctuation.definition.fenced.markdown#e0f2fe15
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e0f2fe
variable.language.fenced.markdown#466782
meta.separator#466782bold
markup.table#e0f2fe
BearTheme by GabrielTeles - VS Code Theme