Skip to main content
Coding Theme

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
R3 Visual Studio Code Theme by Reginaldo Morais - VS Code Theme