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#263238
  • 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#263238
  • 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#182328
  • list.inactiveSelectionBackground#1f292e
  • panel.border#263238
  • panelTitle.activeBorder#263238
  • panelTitle.inactiveForeground#455c67
  • scrollbar.shadow#263238
  • scrollbarSlider.activeBackground#1823287f
  • scrollbarSlider.background#1823289b
  • scrollbarSlider.hoverBackground#1823287f
  • sideBar.background#263238
  • statusBar.background#263238
  • statusBar.foreground#455c67
  • tab.border#263238
  • tab.inactiveBackground#263238
  • 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
  • titleBar.activeBackground#263238
  • titleBar.inactiveBackground#263238

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
Global settings#B2CCD6
string#C3E88D
constant.language.boolean#f77669
constant.numeric#f77669
variable, support.variable, support.class, support.constant, meta.definition.variable entity.name.function#FA6981
keyword, modifier, variable.language.this, support.type.object, constant.language#82AAFF
entity.name.function, support.function#82AAFF
storage.type, storage.modifier#FFCB6B
support.module, support.node#82AAFF
support.type#7FCAC3
entity.name.type, entity.other.inherited-class#FFCB6B
comment#405561
entity.name.type.class#FFCB6B
variable.object.property#C3E88D
meta.definition.method entity.name.function#FFCB6B
meta.function entity.name.function#BD8BDF
template.expression.begin, template.expression.end#C3E88D
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#7FCAC3
constant.language.json#C3E88D
entity.other.attribute-name.class#FFCB6B
entity.other.attribute-name.id#FFCB6B
source.css entity.name.tag#FA6981
meta.tag, punctuation.definition.tag#B2CCD6
entity.name.tag#FA6981
entity.other.attribute-name#FFCB6B
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