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.activeBackground#0D141F
  • activityBar.activeBorder#FFC910
  • activityBar.background#0D141F
  • activityBar.foreground#FFC910
  • activityBar.inactiveForeground#D2CFAA
  • activityBarBadge.background#FFC910
  • activityBarBadge.foreground#090b0f
  • badge.background#090b0f
  • badge.foreground#FFC910
  • button.background#0D141F
  • button.foreground#E0DFD6
  • button.hoverBackground#111927
  • checkbox.border#FFC910
  • debugIcon.breakpointForeground#FFC910
  • debugToolBar.background#090b0f
  • dropdown.background#090b0f
  • dropdown.border#D2CFAA
  • dropdown.foreground#E0DFD6
  • dropdown.listBackground#090b0f
  • editor.background#090b0f
  • editor.foreground#E0DFD6
  • editor.selectionBackground#0D141F
  • editorCursor.background#FFC910
  • editorCursor.foreground#FFC910
  • editorGroup.dropBackground#0D141F
  • editorGroupHeader.tabsBackground#0D141F
  • editorGutter.background#090b0f
  • editorLineNumber.foreground#E0DFD6
  • editorWidget.background#090b0f
  • editorWidget.foreground#E0DFD6
  • focusBorder#111927
  • input.background#0D141F
  • input.border#0D141F
  • input.foreground#E0DFD6
  • inputOption.activeBackground#0D141F
  • inputOption.activeBorder#0D141F
  • inputOption.activeForeground#FFC910
  • list.activeSelectionBackground#111927
  • list.activeSelectionForeground#E0DFD6
  • list.hoverBackground#111927
  • list.hoverForeground#E0DFD6
  • menu.background#0D141F
  • menu.border#FFC910
  • menu.foreground#E0DFD6
  • menu.selectionBackground#090b0f
  • menu.selectionForeground#FFC910
  • menubar.selectionBackground#0D141F
  • panel.background#0D141F
  • panel.border#FFC910
  • panelTitle.activeBorder#FFC910
  • panelTitle.activeForeground#E0DFD6
  • scrollbar.shadow#0D141F
  • scrollbarSlider.activeBackground#FFC910
  • scrollbarSlider.background#0D141F
  • scrollbarSlider.hoverBackground#FFC910
  • sideBar.background#090b0f
  • sideBar.border#FFC910
  • sideBar.foreground#E0DFD6
  • sideBarSectionHeader.background#0D141F
  • sideBarSectionHeader.foreground#E0DFD6
  • sideBarTitle.foreground#FFC910
  • statusBar.background#111927
  • statusBar.debuggingBackground#FFC910
  • statusBar.debuggingForeground#090b0f
  • statusBar.foreground#E0DFD6
  • statusBar.noFolderBackground#111927
  • statusBar.noFolderForeground#E0DFD6
  • tab.activeBackground#090b0f
  • tab.activeForeground#E0DFD6
  • tab.border#0D141F
  • tab.hoverBackground#0D141F
  • tab.hoverForeground#FFC910
  • tab.inactiveBackground#0D141F
  • tab.inactiveForeground#D2CFAA
  • tab.unfocusedActiveBackground#0D141F
  • terminal.foreground#E0DFD6
  • terminal.selectionBackground#FFC910
  • terminalCursor.foreground#FFC910
  • textLink.activeForeground#FFC910
  • textLink.foreground#D2CFAA
  • titleBar.activeBackground#090b0f
  • titleBar.activeForeground#E0DFD6
  • titleBar.border#FFC910
  • titleBar.inactiveBackground#0D141F
  • titleBar.inactiveForeground#E0DFD6
  • welcomePage.background#090b0f
  • welcomePage.buttonBackground#0D141F
  • welcomePage.buttonHoverBackground#111927
  • window.activeBorder#FFC910
  • window.inactiveBorder#FFC910

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#546E7Aitalic
variable, string constant.other.placeholder#EEFFFF
constant.other.color#ffffff
invalid, invalid.illegal#ef6b73
keyword, storage.type, storage.modifier#c3a6ff
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#ffae57
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#bae67e
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#5ccfe6
meta.block variable.other#ffd580
support.other.variable, string.other.link#ffd580
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ffae57
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#D2CFAA
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#ffd580
support.type#B2CCD6
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#B2CCD6
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#ef6b73
variable.language#ef6b73italic
entity.name.method.js#5ccfe6italic
meta.class-method.js entity.name.function.js, variable.function.constructor#5ccfe6
entity.other.attribute-name#c3a6ff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffd580italic
entity.other.attribute-name.class#ffd580
source.sass keyword.control#5ccfe6
markup.inserted#D2CFAA
markup.deleted#ef6b73
markup.changed#c3a6ff
string.regexp#ffae57
constant.character.escape#ffae57
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#5ccfe6italic
source.js constant.other.object.key.js string.unquoted.label.js#ef6b73italic
source.json meta.structure.dictionary.json support.type.property-name.json#c3a6ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffd580
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#ffae57
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#ef6b73
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#c3a6ff
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#5ccfe6
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#bae67e
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#c3a6ff
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#D2CFAA
text.html.markdown, punctuation.definition.list_item.markdown#EEFFFF
text.html.markdown markup.inline.raw.markdown#c3a6ff
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#D2CFAA
markup.italic#bae67eitalic
markup.bold, markup.bold string#bae67ebold
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#bae67ebold
markup.underline#ffae57underline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#5ccfe6
string.other.link.description.title.markdown#c3a6ff
constant.other.reference.link.markdown#ffd580
markup.raw.block#c3a6ff
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#EEFFFF