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#000000
  • activityBar.foreground#7a7a8a
  • activityBar.inactiveForeground#4a4a5a
  • activityBarBadge.background#a088b8
  • activityBarBadge.foreground#000000
  • breadcrumb.activeSelectionForeground#ffffff
  • breadcrumb.focusForeground#e0e0e8
  • breadcrumb.foreground#9090a0
  • button.background#dc5aff
  • button.foreground#ffffff
  • button.hoverBackground#ec7aff
  • diffEditor.insertedTextBackground#5aff9d20
  • diffEditor.removedTextBackground#ff5a7c20
  • dropdown.background#15151f
  • dropdown.border#2a2a3a
  • dropdown.foreground#e0e0e8
  • editor.background#000000
  • editor.findMatchBackground#2a2a35
  • editor.findMatchHighlightBackground#1a1a25
  • editor.foreground#d4d4dc
  • editor.inactiveSelectionBackground#1f152a
  • editor.lineHighlightBackground#0a0a0a
  • editor.selectionBackground#2a1a35
  • editor.wordHighlightBackground#1a1a25
  • editor.wordHighlightStrongBackground#20202a
  • editorBracketMatch.background#1a1a25
  • editorBracketMatch.border#a088b8
  • editorCursor.foreground#b8a0d0
  • editorLineNumber.activeForeground#7a7a8a
  • editorLineNumber.foreground#4a4a5a
  • editorWidget.background#15151f
  • editorWidget.border#2a2a3a
  • gitDecoration.conflictingResourceForeground#dc5aff
  • gitDecoration.deletedResourceForeground#ff5a7c
  • gitDecoration.modifiedResourceForeground#ffdc5a
  • gitDecoration.untrackedResourceForeground#5aff9d
  • input.background#15151f
  • input.border#2a2a3a
  • input.foreground#e0e0e8
  • input.placeholderForeground#6a6a7a
  • inputOption.activeBorder#dc5aff
  • list.activeSelectionBackground#1a1a2a
  • list.activeSelectionForeground#ffffff
  • list.highlightForeground#dc5aff
  • list.hoverBackground#1a1a2a
  • list.inactiveSelectionBackground#15151f
  • peekView.border#dc5aff
  • peekViewEditor.background#15151f
  • peekViewResult.background#0a0a0a
  • peekViewTitle.background#1a1a2a
  • scrollbar.shadow#00000050
  • scrollbarSlider.activeBackground#4a4a5a
  • scrollbarSlider.background#2a2a3a
  • scrollbarSlider.hoverBackground#3a3a4a
  • sideBar.background#000000
  • sideBar.foreground#b0b0c0
  • sideBarSectionHeader.background#15151f
  • sideBarSectionHeader.foreground#c0c0d0
  • sideBarTitle.foreground#d0d0e0
  • statusBar.background#000000
  • statusBar.debuggingBackground#dc5aff
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#a0a0b0
  • statusBar.noFolderBackground#000000
  • tab.activeBackground#000000
  • tab.activeBorderTop#dc5aff
  • tab.activeForeground#ffffff
  • tab.border#000000
  • tab.inactiveBackground#0a0a0a
  • tab.inactiveForeground#a0a0b0
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#5a9dff
  • terminal.ansiBrightBlack#4a4a5a
  • terminal.ansiBrightBlue#7abdff
  • terminal.ansiBrightCyan#7affec
  • terminal.ansiBrightGreen#7affbd
  • terminal.ansiBrightMagenta#ec7aff
  • terminal.ansiBrightRed#ff7a9c
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffec7a
  • terminal.ansiCyan#5affdc
  • terminal.ansiGreen#5aff9d
  • terminal.ansiMagenta#dc5aff
  • terminal.ansiRed#ff5a7c
  • terminal.ansiWhite#e0e0e8
  • terminal.ansiYellow#ffdc5a
  • terminal.background#000000
  • terminal.foreground#e8e8f0
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#d8d8e0
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#9090a0
  • widget.shadow#00000050

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a5a6aitalic
variable, string constant.other.placeholder#c8c8d0
constant.other.color#d0d0d8
invalid, invalid.illegal#c07080
keyword, storage.type, storage.modifier#a088b8
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#ff5adc
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#5affdc
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#9d5aff
meta.block variable.other#ff9ddc
support.other.variable, string.other.link#ff9ddc
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ffdc5a
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#ec7aff
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#bf7aff
support.type#b0b0c0
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#b0b0c0
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ff5a9d
variable.language#ff5a9ditalic
entity.name.method.js#9d5affitalic
meta.class-method.js entity.name.function.js, variable.function.constructor#9d5aff
entity.other.attribute-name#dc5aff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#bf7affitalic
entity.other.attribute-name.class#bf7aff
source.sass keyword.control#9d5aff
markup.inserted#5aff9d
markup.deleted#ff5a7c
markup.changed#dc5aff
string.regexp#5affdc
constant.character.escape#5affdc
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#9d5affitalic
source.js constant.other.object.key.js string.unquoted.label.js#ff5a9ditalic
source.json meta.structure.dictionary.json support.type.property-name.json#dc5aff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#bf7aff
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#ff9ddc
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#ff5a9d
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#ffdc5a
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#9d5aff
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#ec7aff
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#dc5aff
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#5affdc
text.html.markdown, punctuation.definition.list_item.markdown#e0e0e8
text.html.markdown markup.inline.raw.markdown#dc5aff
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#6a6a7a
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#ec7aff
markup.italic#ff9ddcitalic
markup.bold, markup.bold string#ff9ddcbold
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#ff9ddcbold
markup.underline#ffdc5aunderline
markup.quote punctuation.definition.blockquote.markdown#6a6a7a
markup.quoteitalic
string.other.link.title.markdown#9d5aff
string.other.link.description.title.markdown#dc5aff
constant.other.reference.link.markdown#bf7aff
markup.raw.block#dc5aff
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#e0e0e8
variable.language.fenced.markdown#6a6a7a
meta.separator#6a6a7abold
markup.table#e0e0e8
Lubasiverse by lubasiverse - VS Code Theme