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#1A1A1A
  • badge.background#F92672
  • editor.background#1A1A1A
  • editor.foreground#F8F8F2
  • editor.lineHighlightBackground#2A2A2A
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#49483EAA
  • editorCursor.foreground#F8F8F0
  • editorGutter.addedBackground#A6E22E
  • editorGutter.background#1A1A1A
  • editorGutter.deletedBackground#F92672
  • editorGutter.modifiedBackground#FD971F
  • editorIndentGuide.activeBackground#75715E
  • editorIndentGuide.background#3B3A32
  • editorWhitespace.foreground#3B3A32
  • list.activeSelectionBackground#34342E
  • list.hoverBackground#2D2D2D
  • list.inactiveSelectionBackground#2A2A2A
  • sideBar.background#1A1A1A
  • sideBar.foreground#F8F8F2
  • statusBar.background#1A1A1A
  • statusBar.foreground#F8F8F2
  • tab.activeBackground#1F1F1F
  • tab.activeBorder#F92672
  • tab.inactiveBackground#2E2E2E
  • titleBar.activeBackground#1A1A1A
  • titleBar.inactiveBackground#2E2E2E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#75715Eitalic
keyword, storage.type, keyword.control#F92672bold
variable, meta.definition.variable.name#F8F8F2
string#E6DB74
constant.numeric#AE81FF
entity.name.function, meta.function-call#A6E22E
entity.name.tag, meta.tag, support.class.component#F92672
entity.other.attribute-name#FD971F
support.function, support.constant#66D9EF
invalid#F8F8F0
punctuation#F8F8F2
constant.language#AE81FF
markup.inserted#A6E22E
markup.deleted#F92672
markup.changed#FD971F
markup.inline.raw#66D9EF
come back to city by Saurabh sharma - VS Code Theme