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#111111
  • activityBar.border#18181a
  • button.background#9d4edd
  • button.foreground#ffffff
  • contrastActiveBorder#18181a
  • contrastBorder#18181a
  • debugIcon.breakpointForeground#4cd137
  • debugIcon.startForeground#4cd137
  • editor.background#0a0a0a
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#111111
  • editor.selectionBackground#2c2c2c
  • editor.selectionHighlightBackground#1c1c1c
  • editor.wordHighlightBackground#202020
  • editorCursor.foreground#4cd137
  • editorGroup.border#18181a
  • editorGutter.addedBackground#1b1b1b
  • editorGutter.background#0a0a0a
  • editorGutter.deletedBackground#1b1b1b
  • editorGutter.modifiedBackground#1b1b1b
  • editorIndentGuide.activeBackground#4cd137
  • editorIndentGuide.background#333333
  • editorRuler.foreground#2e2e2e
  • editorWhitespace.foreground#303030
  • focusBorder#18181a
  • icon.foreground#268a9e
  • panel.border#18181a
  • sideBar.background#111111
  • sideBar.border#18181a
  • statusBar.background#222222
  • statusBar.border#18181a
  • statusBar.foreground#ffffff
  • tab.activeBorder#18181a
  • tab.inactiveBorder#18181a
  • titleBar.activeBackground#0a0a0a
  • titleBar.activeForeground#ffffff
  • titleBar.border#18181a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.type, entity.name.type.c, storage.type, storage.type.c, storage.type.struct, entity.name.struct, entity.name.struct.c, support.type, support.class, meta.type, meta.type.identifier, meta.type.struct, variable.other, variable.other.c#8a2be2italic
comment#ff4f97italic
keyword#e3ff00bold
variable#ffffffnormal
string#8be9fdnormal
constant.numeric#f1fa8cnormal
constant.language#ff5555normal
support.function#43afffbold
punctuation#f8f8f2