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#1b2629
  • activityBar.foreground#455c67
  • activityBarBadge.background#455c67
  • button.background#455c67
  • button.hoverBackground#263238
  • dropdown.border#182328
  • editor.background#263238
  • editor.foreground#B2CCD6
  • editor.hoverHighlightBackground#182328
  • editor.lineHighlightBackground#182328
  • editor.lineHighlightBorder#182328
  • editor.selectionBackground#455c67
  • editor.wordHighlightBackground#455c67
  • editor.wordHighlightStrongBackground#455c67
  • editorCursor.foreground#FFCC00
  • editorGroup.background#263238
  • editorGroup.border#182328
  • editorGroupHeader.noTabsBackground#263238
  • editorGroupHeader.tabsBackground#1b2629
  • editorIndentGuide.activeBackground#ff9900
  • editorLineNumber.foreground#455c67
  • editorSelection#182328
  • editorSuggestWidget.background#263238
  • editorSuggestWidget.border#455c67
  • editorWidget.background#182328
  • focusBorder#455c67
  • input.background#182328
  • input.border#182328
  • list.activeSelectionBackground#182328
  • list.focusBackground#182328
  • list.hoverBackground#2d3b42
  • list.inactiveSelectionBackground#2d3b42
  • panel.background#1b2629
  • panel.border#44494e
  • panelTitle.activeBorder#fff
  • panelTitle.inactiveForeground#455c67
  • scrollbar.shadow#1b2629
  • scrollbarSlider.activeBackground#1b2629
  • scrollbarSlider.background#1b2629
  • scrollbarSlider.hoverBackground#1b2629
  • sideBar.background#202c31
  • sideBarSectionHeader.background#1b2629
  • statusBar.background#1b2629
  • statusBar.foreground#455c67
  • tab.activeBackground#263238
  • tab.border#202c31
  • tab.inactiveBackground#202c31
  • terminal.ansiBlack#263238
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#65737e
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#7FCAC3
  • terminal.ansiBrightGreen#a3be8c
  • terminal.ansiBrightMagenta#f77669
  • terminal.ansiBrightRed#bf616a
  • terminal.ansiBrightWhite#B2CCD6
  • terminal.ansiBrightYellow#FFCC00
  • terminal.ansiCyan#7FCAC3
  • terminal.ansiGreen#C3E88D
  • terminal.ansiMagenta#f77669
  • terminal.ansiRed#FA6981
  • terminal.ansiWhite#B2CCD6
  • terminal.ansiYellow#FFCC00
  • terminal.background#161f21
  • titleBar.activeBackground#1b2629
  • titleBar.inactiveBackground#263238

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#B2CCD6
string#c3ff69
constant.language.boolean#f84a3b
constant.numeric#f54030
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#ff4f6c
keyword, modifier, variable.language.this, support.type.object, constant.language#709eff
entity.name.function, support.function#7ca5ff
storage.type, storage.modifier#ffaa0b
support.module, support.node#43caff
support.type#24ebd7
entity.name.type, entity.other.inherited-class#ffc582
comment#2f5f7a
entity.name.type.class#ffbb00
variable.object.property#9fe931
meta.definition.method entity.name.function#fbc224
meta.function entity.name.function#c977ff
template.expression.begin, template.expression.end#a5ec3b
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#32e4d2
constant.language.json#a6ee39
entity.other.attribute-name.class#fdb227
entity.other.attribute-name.id#f86420
source.css entity.name.tag#fb3254
meta.tag, punctuation.definition.tag#fff
entity.name.tag#ff507c
entity.other.attribute-name#fa883c
markup.heading#B2CCD6
text.html.markdown meta.link.inline, meta.link.reference#B2CCD6
text.html.markdown markup.quote#FFCB6B
text.html.markdown beginning.punctuation.definition.list#C3E88D
markup.italic#C3E88Ditalic
markup.bold#C3E88Dbold
markup.bold markup.italic, markup.italic markup.bold#C3E88Ditalic bold