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.activeBorder#6bb6ff
  • activityBar.background#0a0e14
  • activityBar.border#1e3a5f
  • activityBar.foreground#6bb6ff
  • button.background#238636
  • button.foreground#ffffff
  • button.hoverBackground#2ea043
  • editor.background#0f1419
  • editor.foreground#c9d1d9
  • editor.lineHighlightBackground#161b22
  • editor.selectionBackground#2d5aa0
  • editor.selectionHighlightBackground#3fb95040
  • input.background#0d1117
  • input.border#30363d
  • input.foreground#c9d1d9
  • list.activeSelectionBackground#264f78
  • list.focusBackground#264f78
  • list.hoverBackground#161b2240
  • panel.background#010409
  • panel.border#21262d
  • sideBar.background#0a0e14
  • sideBar.border#1e3a5f
  • sideBar.foreground#9bb3d4
  • statusBar.background#1a2332
  • statusBar.border#1e3a5f
  • statusBar.foreground#e1e8f0
  • tab.activeBackground#0f1419
  • tab.activeForeground#e1e8f0
  • tab.border#1e3a5f
  • tab.inactiveBackground#0a0e14
  • tab.inactiveForeground#9bb3d4
  • terminal.ansiBlack#2f4f4f
  • terminal.ansiBlue#6bb6ff
  • terminal.ansiBrightBlack#808080
  • terminal.ansiBrightBlue#87ceeb
  • terminal.ansiBrightCyan#7fffd4
  • terminal.ansiBrightGreen#90ee90
  • terminal.ansiBrightMagenta#dda0dd
  • terminal.ansiBrightRed#ff6b6b
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffff00
  • terminal.ansiCyan#7fffd4
  • terminal.ansiGreen#90ee90
  • terminal.ansiMagenta#dda0dd
  • terminal.ansiRed#ff6b6b
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffff00
  • terminal.background#0d1117
  • terminal.foreground#ffffff
  • titleBar.activeBackground#010409
  • titleBar.activeForeground#c9d1d9
  • titleBar.border#21262d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8b949eitalic
keyword, storage.type, storage.modifier#4a9eff
string.quoted.double.json, string.quoted.single.json, meta.structure.dictionary.value.json string#6bb6ff
string, punctuation.definition.string#87ceeb
constant.numeric#79c0ff
entity.name.function, meta.function-call, variable.function#ffffffbold
entity.name.class, entity.name.type, support.type, support.class#ffffffbold
variable, meta.definition.variable#ffffffbold
constant, constant.language#79c0ff
entity.name.tag, punctuation.definition.tag#7ee787
entity.other.attribute-name#79c0ff
support.type.property-name#79c0ff
support.constant.property-value#a5d6ff
variable.other.object.js, variable.other.object.ts#ffa657
punctuation.section.brackets.begin, punctuation.section.brackets.end, punctuation.section.parens.begin, punctuation.section.parens.end#ffff00
punctuation.section.braces.begin, punctuation.section.braces.end, punctuation.definition.block#ff69b4
punctuation.separator, punctuation.terminator, punctuation.definition.array#90ee90
support.type.property-name.json, meta.structure.dictionary.key.json#ffffffbold
meta.structure.dictionary.value.json string.quoted.double, string.quoted.double.json:not(meta.structure.dictionary.key.json)#6bb6ff
string.quoted.single, string.quoted.double, meta.path#6bb6ff
variable.other.property, meta.object-literal.key, entity.name.tag.yaml, support.type.property-name#ffffffbold
Gosthy by Miguel - VS Code Theme