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#e2e8f0
  • activityBar.foreground#0c0a09
  • activityBarBadge.background#fb923c
  • activityBarBadge.foreground#020617
  • badge.background#fb923c
  • badge.foreground#0c0a09
  • banner.background#e2e8f0
  • contrastBorder#1e293b
  • debugToolBar.background#e2e8f0
  • debugView.exceptionLabelBackground#e2e8f0
  • editor.background#d6d3d1
  • editor.foreground#333333
  • editor.lineHighlightBorder#a8a29e
  • editor.selectionBackground#fdba74
  • editor.selectionHighlightBackground#fdba74
  • editor.selectionHighlightBorder#0c0a09
  • editorBracketHighlight.foreground1#c2410c
  • editorBracketHighlight.foreground2#65a30d
  • editorBracketHighlight.foreground3#0e7490
  • editorBracketHighlight.foreground4#4338ca
  • editorBracketHighlight.foreground5#a21caf
  • editorBracketHighlight.foreground6#ca8a04
  • editorBracketHighlight.unexpectedBracket.foreground#be123c
  • editorBracketPairGuide.activeBackground1#c2410c
  • editorBracketPairGuide.activeBackground2#65a30d
  • editorBracketPairGuide.activeBackground3#0e7490
  • editorBracketPairGuide.activeBackground4#4338ca
  • editorBracketPairGuide.activeBackground5#a21caf
  • editorBracketPairGuide.activeBackground6#ca8a04
  • editorBracketPairGuide.background1#c2410c
  • editorBracketPairGuide.background2#65a30d
  • editorBracketPairGuide.background3#0e7490
  • editorBracketPairGuide.background4#4338ca
  • editorBracketPairGuide.background5#a21caf
  • editorBracketPairGuide.background6#ca8a04
  • editorCursor.foreground#78716c
  • editorLineNumber.activeForeground#292524
  • editorLineNumber.foreground#a8a29e
  • focusBorder#78716c
  • gitDecoration.addedResourceForeground#22c55e
  • gitDecoration.conflictingResourceForeground#ef4444
  • gitDecoration.deletedResourceForeground#4c0519
  • gitDecoration.modifiedResourceForeground#ca8a04
  • list.activeSelectionBackground#d6d3d1
  • list.activeSelectionForeground#0c0a09
  • list.activeSelectionIconForeground#fff
  • menu.background#e2e8f0
  • minimap.background#d6d3d1
  • minimap.errorHighlight#ef4444
  • minimap.findMatchHighlight#e2e8f0
  • minimap.selectionHighlight#94a3b8
  • panel.background#e2e8f0
  • sideBar.background#e2e8f0
  • sideBar.border#292524
  • sideBarStickyScroll.border#292524
  • statusBar.background#e2e8f0
  • statusBar.debuggingBackground#e2e8f0
  • statusBar.foreground#0c0a09
  • statusBar.noFolderBackground#e2e8f0
  • statusBarItem.activeBackground#e2e8f0
  • statusBarItem.offlineBackground#e2e8f0
  • statusBarItem.remoteBackground#e2e8f0
  • statusBarItem.warningBackground#e2e8f0
  • tab.activeBackground#cbd5e1
  • tab.inactiveBackground#e2e8f0
  • terminal.background#e2e8f0
  • titleBar.activeBackground#e2e8f0
  • titleBar.inactiveBackground#e2e8f0

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#64748bitalic
comment.block.preprocessor#64748b
comment.documentation, comment.block.documentation#448C27
invalid.illegal#7f1d1d
keyword.operator#d97706
keyword, storage#ef4444
storage.type, support.type#d946ef
constant.language, support.constant, variable.language#6366f1
variable, support.variable#0891b2
entity.name.function, support.function#1e40afbold
entity.name.type, entity.other.inherited-class, support.class#6d28d9bold
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#c026d3
string#4d7c0f
constant.character.escape#be123c
string.regexp#d97706
constant.other.symbol#d97706
punctuation#0c0a09
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#ea580c
entity.name.tag#ea580c
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#0891b2italic
constant.character.entity, punctuation.definition.entity#ea580c
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#db2777
meta.property-name, support.type.property-name#6d28d9
meta.property-value, meta.property-value constant.other, support.constant.property-value#be185d
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.italicitalic
markup.error#be123c
markup.inserted#000000
meta.link#1d4ed8
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#1d4ed8
markup.bold, markup.italic#448C27
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
Stoney Light by dbone - VS Code Theme