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#0f0f23
  • activityBarBadge.background#7fdfff
  • button.hoverBackground#1a1a2e
  • dropdown.background#0f0f23
  • editor.background#0f0f23
  • editor.foreground#e0e6ed
  • editor.lineHighlightBackground#1a1a2e
  • editor.selectionBackground#ff008055
  • editor.selectionHighlightBackground#ff008022
  • editorCursor.foreground#ff0080
  • editorGroupHeader.tabsBackground#0f0f23
  • editorSuggestWidget.background#0f0f23
  • editorSuggestWidget.border#19243a
  • editorSuggestWidget.foreground#e0e6ed
  • editorSuggestWidget.highlightForeground#7fdfff
  • editorSuggestWidget.selectedBackground#1a1a2e
  • editorWidget.background#0f0f23
  • editorWidget.foreground#e0e6ed
  • input.background#0a0a0f
  • input.foreground#e0e6ed
  • list.activeSelectionBackground#19243a
  • list.hoverBackground#1a1a2e
  • list.inactiveSelectionBackground#0a0a0f
  • menu.background#0f0f23
  • panel.background#0f0f23
  • pickerGroup.border#19243a
  • pickerGroup.foreground#00eaff
  • quickInput.background#0f0f23
  • quickInput.foreground#e0e6ed
  • scrollbarSlider.activeBackground#19243a
  • scrollbarSlider.background#1a1a2e
  • scrollbarSlider.hoverBackground#ff008022
  • sideBar.background#0f0f23
  • sideBar.foreground#e0e6ed
  • sideBarTitle.foreground#b2ccd6
  • statusBar.background#0f0f23
  • statusBar.border#000000
  • statusBar.debuggingBackground#ff0040
  • statusBar.foreground#7fdfff
  • statusBar.noFolderBackground#0f0f23
  • tab.activeBackground#0f0f23
  • tab.inactiveBackground#0f0f23
  • tab.unfocusedActiveBackground#0f0f23
  • tab.unfocusedInactiveBackground#0f0f23
  • terminal.ansiBrightBlue#0080ff
  • terminal.ansiBrightCyan#b2f7ef
  • terminal.ansiBrightGreen#aee6e6
  • terminal.ansiBrightMagenta#ff0080
  • terminal.ansiBrightRed#ff0040
  • terminal.ansiBrightWhite#ffffff
  • terminal.background#0f0f23
  • terminal.foreground#7fdfff
  • terminalCursor.background#ff0080
  • terminalCursor.foreground#ff0080
  • titleBar.activeBackground#0f0f23
  • titleBar.inactiveBackground#0f0f23

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#a0aab8italic
variable, identifier#7fdfff—
constant.other.color#ffffff—
invalid, invalid.illegal#ff0040—
keyword, storage.type, storage.modifier#ff0080bold
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#b2f7ef—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#7ba7d9—
function, entity.name.function#4FC3F7—
meta.block variable.other#aee6e6—
support.other.variable, string.other.link#aee6e6—
number, constant.numeric#B2FF59—
string, constant.other.symbol#F06292—
type, entity.name.type, class, entity.name.class#0080ff—
support.type#b2f7ef—
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#b2f7ef—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#aee6e6—
variable.language#aee6e6italic
entity.name.method.js#ff8000italic
meta.class-method.js entity.name.function.js, variable.function.constructor#ff8000—
entity.other.attribute-name#F06292—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffb366italic
string.quoted.double.html, string.quoted.single.html, string.quoted.other.html#a8e6cf—
entity.other.attribute-name.class#ff8000—
source.sass keyword.control#0080ff—
markup.inserted#b2ccd6—
markup.deleted#ff0040—
markup.changed#ff00ff—
string.regexp#b2f7ef—
constant.character.escape#b2f7ef—
*url*, *link*, *uri*—underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#0080ffitalic
source.js constant.other.object.key.js string.unquoted.label.js#ff0040italic
source.json meta.structure.dictionary.json support.type.property-name.json#ff00ff—
source.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 support.type.property-name.json#ff4080—
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#ff0040—
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#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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#0080ff—
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#ff4080—
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#ff00ff—
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#00ff40—
text.html.markdown, punctuation.definition.list_item.markdown#7fdfff—
text.html.markdown markup.inline.raw.markdown#ff00ff—
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#0080ff—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#00ff40—
markup.italic#ff4080italic
markup.bold, markup.bold string#ff4080bold
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#ff4080bold
markup.underline#ff8000underline
markup.quote punctuation.definition.blockquote.markdown#0080ff—
markup.quote—italic
string.other.link.title.markdown#0080ff—
string.other.link.description.title.markdown#ff00ff—
constant.other.reference.link.markdown#ff8000—
markup.raw.block#ff00ff—
markup.raw.block.fenced.markdown#00000050—
punctuation.definition.fenced.markdown#00000050—
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#7fdfff—
variable.language.fenced.markdown#0080ff—
meta.separator#0080ffbold
markup.table#7fdfff—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff0080bold
support.type.property-name.css, support.type.property-name.sass, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.stylus, support.type.property-name.postcss#00eaff—
support.constant.property-value.css#0080ff—
entity.name.function, support.function, meta.function-call#2bb3b3bold
constant.numeric, number#bfcfff—
entity.name.type, support.type#66b3ff—
keyword, storage.type, storage.modifier#ff66b3bold
string, constant.other.symbol#f0ff66—
variable, identifier#b3e6ff—
class, entity.name.class#66b3ff—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ff66b3bold
support.type.property-name.css, support.type.property-name.sass, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.stylus, support.type.property-name.postcss#66e6ff—
support.constant.property-value.css#66b3ff—
meta.object-literal.key, meta.object-literal.key.ts#ffb366—
support.class.console, variable.language.console, entity.name.function.console, support.function.console, variable.other.console#8a7bb8—
variable.parameter, meta.function.parameters variable, meta.parameters variable, variable.parameter.function, variable.parameter.js, variable.parameter.ts, meta.function.parameter.js, meta.function.parameter.ts, meta.lambda.parameters variable, meta.function.argument, meta.function.arguments variable, meta.method.parameters variable, meta.class.method.parameters variable#F8BBD0—