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.activeBackground#383838
  • activityBar.activeBorder#0070e0
  • activityBar.background#242424
  • activityBarBadge.background#0070e0
  • button.background#0070e0
  • debugIcon.breakpointForeground#f63c40
  • diffEditor.insertedTextBackground#8dc15322
  • diffEditor.removedLineBackground#f63c4022
  • editor.background#171717
  • editor.lineHighlightBackground#242424
  • editor.wordHighlightBackground#303030
  • editor.wordHighlightStrongBackground#303030
  • editorGroupHeader.tabsBackground#151515
  • editorGutter.addedBackground#8dc153
  • editorGutter.deletedBackground#f63c40
  • editorGutter.modifiedBackground#f7991e
  • gitDecoration.addedResourceForeground#8dc153
  • gitDecoration.deletedResourceForeground#f63c40
  • gitDecoration.modifiedResourceForeground#f7991e
  • gitDecoration.renamedResourceForeground#f7991e
  • gitDecoration.stageDeletedResourceForeground#f63c40
  • gitDecoration.stageModifiedResourceForeground#f7991e
  • gitDecoration.untrackedResourceForeground#8dc153
  • input.background#0f0f0f
  • list.activeSelectionBackground#0070e0BB
  • list.errorForeground#f6585b
  • list.inactiveSelectionBackground#2d323a
  • list.warningForeground#e78c45
  • menu.background#383838
  • menu.selectionBackground#3274dd
  • panel.background#171717
  • panelTitle.activeBorder#2f6dc8
  • problemsErrorIcon.foreground#f63c40
  • problemsInfoIcon.foreground#2f6dc8
  • problemsWarningIcon.foreground#f7991e
  • quickInput.background#242424
  • sideBar.background#1a1a1a
  • sideBar.border#242424
  • sideBarSectionHeader.background#242424
  • statusBar.background#0070e0BB
  • tab.activeBackground#242424
  • tab.activeBorder#0070e0
  • tab.hoverBackground#303030
  • tab.inactiveBackground#151515
  • testing.iconErrored#f63c40
  • testing.iconFailed#f63c40
  • testing.iconPassed#8dc153
  • testing.iconQueued#f0f
  • testing.iconSkipped#f7991e
  • titleBar.activeBackground#151515
  • titleBar.inactiveBackground#151515

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis, markup.italicitalic
strong, markup.bold, markup.headingbold
markup.underlineunderline
comment#969896
keyword.operator.class, constant.other, source.php.embedded.line#CED1CF
variable, support.other.variable, string.other.link, string.regexp, entity.name.tag, meta.tag, declaration.tag#CC6666
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, punctuation.section.embedded, keyword.other.unit#DE935F
entity.name.class, entity.name.type.class, support.type, support.class#F0C674
string, constant.other.symbol, entity.other.inherited-class, markup.heading#B5BD68
keyword.operator, constant.other.color#8ABEB7
entity.name.function, meta.function-call, support.function, keyword.other.special-method, meta.block-level#81A2BE
keyword, storage, storage.type, entity.name.tag.css, entity.other.attribute-name#B294BB
invalid#CED2CF
meta.separator#CED2CF
invalid.deprecated#CED2CF

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Tomorrow Night Darker - Coding Theme