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.

  • editor.background#0f1117
  • editor.findMatchBackground#4f46e5
  • editor.findMatchHighlightBackground#4f46e580
  • editor.findRangeHighlightBackground#4f46e540
  • editor.foreground#d4d4d4
  • editor.inactiveSelectionBackground#3b3b4a
  • editor.lineHighlightBackground#1e1e2a
  • editor.selectionBackground#4f46e5
  • editorBracketMatch.background#4f46e5
  • editorBracketMatch.border#4f46e5
  • editorCursor.foreground#4f46e5
  • editorGutter.addedBackground#2e7d32
  • editorGutter.background#0f1117
  • editorGutter.deletedBackground#c62828
  • editorGutter.modifiedBackground#4f46e5
  • editorIndentGuide.activeBackground#4f46e5
  • editorIndentGuide.background#2a2a3a
  • editorLineNumber.activeForeground#d4d4d4
  • editorLineNumber.foreground#5a5a7a
  • editorWhitespace.foreground#2a2a3a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#6a6a8aitalic
keyword#c792ea
string#c3e88d
constant.numeric#f78c6c
entity.name.function#82aaff
variable#eeffff
entity.name.class#ffcb6b
entity.name.tag#f07178
entity.other.attribute-name#c792ea
source.ynor meta.script.ynor#d4d4d4
source.ynor meta.template.ynor#d4d4d4
source.ynor meta.style.ynor#d4d4d4
source.ynor meta.template.ynor variable.other.ynor-bind#82aaffitalic
source.ynor meta.template.ynor support.function.ynor-event#c792ea
.ynor Framework by .ynor - VS Code Theme