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#07050e
  • activityBar.foreground#00f0ff
  • activityBar.inactiveForeground#5b5577
  • activityBarBadge.background#ff007f
  • activityBarBadge.foreground#ffffff
  • badge.background#ff007f
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#ff007f
  • breadcrumb.focusForeground#00f0ff
  • breadcrumb.foreground#7a6f9c
  • button.background#ff007f
  • button.foreground#ffffff
  • button.hoverBackground#d9006c
  • dropdown.background#130e28
  • dropdown.border#ff007f60
  • dropdown.foreground#f5f3ff
  • editor.background#0a0714
  • editor.findMatchBackground#ff007f70
  • editor.findMatchHighlightBackground#00f0ff40
  • editor.foreground#f5f3ff
  • editor.inactiveSelectionBackground#3b1d5440
  • editor.selectionBackground#ff007f3d
  • editor.selectionHighlightBackground#00f0ff25
  • editor.wordHighlightBackground#b026ff35
  • editorCursor.foreground#ff007f
  • editorGroupHeader.border#ff007f
  • editorGroupHeader.tabsBackground#0f0b1f
  • editorLineNumber.activeForeground#00f0ff
  • editorLineNumber.foreground#4c426e
  • focusBorder#00f0ff
  • foreground#f5f3ff
  • gitDecoration.deletedResourceForeground#ff0055
  • gitDecoration.modifiedResourceForeground#00f0ff
  • gitDecoration.untrackedResourceForeground#00ff66
  • input.background#130e28
  • input.border#ff007f60
  • input.foreground#f5f3ff
  • input.placeholderForeground#7a6f9c
  • list.activeSelectionBackground#281648
  • list.activeSelectionForeground#00f0ff
  • list.hoverBackground#1a1334
  • list.inactiveSelectionBackground#1a1334
  • sideBar.background#07050e
  • sideBar.border#1a1334
  • sideBar.foreground#c4b5fd
  • sideBarSectionHeader.background#0f0b1f
  • sideBarSectionHeader.foreground#00f0ff
  • sideBarTitle.foreground#ffffff
  • statusBar.background#100a26
  • statusBar.debuggingBackground#ff007f
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#00f0ff
  • statusBar.noFolderBackground#07050e
  • statusBarItem.hoverBackground#1c1242
  • tab.activeBackground#0a0714
  • tab.activeBorder#00f0ff
  • tab.activeForeground#00f0ff
  • tab.border#1a1334
  • tab.hoverBackground#1a1334
  • tab.inactiveBackground#0f0b1f
  • tab.inactiveForeground#7a6f9c
  • terminal.ansiBlack#0a0714
  • terminal.ansiBlue#00f0ff
  • terminal.ansiBrightBlack#5b5577
  • terminal.ansiBrightBlue#01cdfe
  • terminal.ansiBrightCyan#00ffff
  • terminal.ansiBrightGreen#05ffa1
  • terminal.ansiBrightMagenta#ff71ce
  • terminal.ansiBrightRed#ff2a6d
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff33
  • terminal.ansiCyan#05d9e8
  • terminal.ansiGreen#00ff66
  • terminal.ansiMagenta#b026ff
  • terminal.ansiRed#ff0055
  • terminal.ansiWhite#f5f3ff
  • terminal.ansiYellow#ffe600
  • terminal.background#0a0714
  • terminal.foreground#f5f3ff
  • terminalCursor.foreground#00f0ff
  • titleBar.activeBackground#07050e
  • titleBar.activeForeground#c4b5fd
  • titleBar.inactiveBackground#0a0714
  • titleBar.inactiveForeground#5b5577

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#675f85italic
variable, string constant.other.placeholder#ff007f
constant.other.color#ffffff
invalid, invalid.illegal#ff0055
keyword, storage.type, storage.modifier#00f0ff
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#ffe600
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ff2a6d
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#05d9e8
meta.block variable.other#ffffff
support.other.variable, string.other.link#ff71ce
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#00ff66
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#ffe600
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#b026ff
support.type#01cdfe
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#ff71ce
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#05d9e8
variable.language#ff007fitalic
entity.name.method.js#05d9e8italic
meta.class-method.js entity.name.function.js, variable.function.constructor#05d9e8
entity.other.attribute-name#b026ff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffe600italic
entity.other.attribute-name.class#ff71ce
source.sass keyword.control#00f0ff
markup.inserted#00ff66
markup.deleted#ff0055
markup.changed#00f0ff
string.regexp#05d9e8
constant.character.escape#05d9e8
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#b026ffitalic
source.js constant.other.object.key.js string.unquoted.label.js#ff007fitalic
source.json meta.structure.dictionary.json support.type.property-name.json#00f0ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ff007f
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#ffe600
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#00ff66
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#b026ff
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#05d9e8
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#ff71ce
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#01cdfe
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#05ffa1
text.html.markdown, punctuation.definition.list_item.markdown#f5f3ff
text.html.markdown markup.inline.raw.markdown#ff71ce
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#675f85
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#00f0ff
markup.italic#ff71ceitalic
markup.bold, markup.bold string#ffe600bold
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#ff71cebold
markup.underline#00f0ffunderline
markup.quote punctuation.definition.blockquote.markdown#675f85
markup.quoteitalic
string.other.link.title.markdown#00f0ff
string.other.link.description.title.markdown#ff007f
constant.other.reference.link.markdown#ffe600
markup.raw.block#ff71ce
markup.raw.block.fenced.markdown#ffffff15
punctuation.definition.fenced.markdown#ffffff15
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#f5f3ff
variable.language.fenced.markdown#675f85
meta.separator#675f85bold
markup.table#f5f3ff
BearTheme by GabrielTeles - VS Code Theme