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#04081a
  • activityBar.foreground#00e5ff
  • activityBar.inactiveForeground#3b4a78
  • activityBarBadge.background#ff2bd6
  • activityBarBadge.foreground#04081a
  • badge.background#ff2bd6
  • badge.foreground#04081a
  • button.background#00e5ff
  • button.foreground#04081a
  • button.hoverBackground#7df9ff
  • contrastBorder#0f1a3d
  • editor.background#070b1c
  • editor.foreground#9af7ff
  • editor.lineHighlightBackground#0a1130
  • editor.selectionBackground#00e5ff33
  • editorBracketHighlight.foreground1#00e5ff
  • editorBracketHighlight.foreground2#ff2bd6
  • editorBracketHighlight.foreground3#5cffae
  • editorBracketHighlight.foreground4#a78bfa
  • editorCursor.background#070b1c
  • editorCursor.foreground#ff2bd6
  • editorGroup.border#0f1a3d
  • editorGroupHeader.tabsBackground#04081a
  • editorGroupHeader.tabsBorder#0f1a3d
  • editorLineNumber.activeForeground#00e5ff
  • editorLineNumber.foreground#2a3866
  • editorLink.activeForeground#5cffae
  • editorWidget.background#091031
  • editorWidget.border#00e5ff44
  • focusBorder#00e5ff66
  • input.background#091031
  • input.border#00e5ff66
  • input.foreground#9af7ff
  • inputOption.activeBorder#ff2bd6
  • list.activeSelectionBackground#1a0e3d
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#0d1638
  • list.inactiveSelectionBackground#0d1638
  • menu.background#091031
  • menu.foreground#9af7ff
  • menu.selectionBackground#00e5ff
  • menu.selectionForeground#04081a
  • menu.separatorBackground#0f1a3d
  • panel.background#04081a
  • panel.border#00e5ff44
  • panelTitle.activeBorder#ff2bd6
  • panelTitle.activeForeground#00e5ff
  • pickerGroup.border#0f1a3d
  • pickerGroup.foreground#ff2bd6
  • progressBar.background#00e5ff
  • quickInput.background#091031
  • quickInput.foreground#9af7ff
  • quickInputList.focusBackground#00e5ff
  • quickInputList.focusForeground#04081a
  • scrollbarSlider.background#00e5ff33
  • scrollbarSlider.hoverBackground#ff2bd688
  • sideBar.background#060a20
  • sideBar.border#0f1a3d
  • sideBar.foreground#9af7ff
  • sideBarSectionHeader.background#091031
  • sideBarSectionHeader.foreground#00e5ff
  • sideBarTitle.foreground#ff2bd6
  • statusBar.background#04081a
  • statusBar.border#0f1a3d
  • statusBar.foreground#00e5ff
  • tab.activeBackground#070b1c
  • tab.activeBorder#00e5ff
  • tab.activeBorderTop#ff2bd6
  • tab.activeForeground#ffffff
  • tab.border#0f1a3d
  • tab.hoverBackground#0d1638
  • tab.inactiveBackground#04081a
  • tab.inactiveForeground#5a6892
  • tab.unfocusedActiveBorder#00e5ff88
  • tab.unfocusedActiveBorderTop#ff2bd688
  • terminal.ansiBlue#5ec4ff
  • terminal.ansiBrightBlue#a3dbff
  • terminal.ansiBrightCyan#7df9ff
  • terminal.ansiBrightGreen#a4ffd0
  • terminal.ansiBrightMagenta#ff7ae3
  • terminal.ansiBrightRed#ff8aac
  • terminal.ansiBrightYellow#ffe19a
  • terminal.ansiCyan#00e5ff
  • terminal.ansiGreen#5cffae
  • terminal.ansiMagenta#ff2bd6
  • terminal.ansiRed#ff5c8a
  • terminal.ansiYellow#ffd166
  • terminal.background#02050f
  • terminal.foreground#9af7ff
  • textLink.activeForeground#7df9ff
  • textLink.foreground#00e5ff
  • titleBar.activeBackground#04081a
  • titleBar.activeForeground#00e5ff
  • titleBar.inactiveBackground#070b1c
  • titleBar.inactiveForeground#5a6892
  • widget.shadow#00000099

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3b4a78italic
variable, string constant.other.placeholder#9af7ff
constant.other.color#ffffff
invalid, invalid.illegal#ff5c8a
keyword, storage.type, storage.modifier#ff2bd6
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#00e5ff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#ff7ae3
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#7df9ff
meta.block variable.other#ff7ae3
support.other.variable, string.other.link#ff7ae3
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ffb86c
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#5cffae
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#ffd166
support.type#a3dbff
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#a3dbff
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff5c8a
variable.language#ff5c8aitalic
entity.name.method.js#7df9ffitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#7df9ff
entity.other.attribute-name#ff2bd6
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffd166italic
entity.other.attribute-name.class#ffd166
source.sass keyword.control#7df9ff
markup.inserted#5cffae
markup.deleted#ff5c8a
markup.changed#ff2bd6
string.regexp#00e5ff
constant.character.escape#00e5ff
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#7df9ffitalic
source.js constant.other.object.key.js string.unquoted.label.js#ff5c8aitalic
source.json meta.structure.dictionary.json support.type.property-name.json#ff2bd6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffd166
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#ffb86c
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#ff5c8a
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#a78bfa
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#7df9ff
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#ff7ae3
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#ff2bd6
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#5cffae
text.html.markdown, punctuation.definition.list_item.markdown#9af7ff
text.html.markdown markup.inline.raw.markdown#ff2bd6
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#3b4a78
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#5cffae
markup.italic#ff7ae3italic
markup.bold, markup.bold string#ff7ae3bold
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#ff7ae3bold
markup.underline#ffb86cunderline
markup.quote punctuation.definition.blockquote.markdown#3b4a78
markup.quoteitalic
string.other.link.title.markdown#00e5ff
string.other.link.description.title.markdown#ff2bd6
constant.other.reference.link.markdown#ffd166
markup.raw.block#ff2bd6
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#9af7ff
variable.language.fenced.markdown#3b4a78
meta.separator#3b4a78bold
markup.table#9af7ff