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
  • activityBar.border#333333
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#888888
  • activityBarBadge.background#2baeeb
  • activityBarBadge.foreground#ffffff
  • editor.background#292929
  • editor.foreground#e8e8e8
  • editor.inactiveSelectionBackground#3a3d41
  • editor.lineHighlightBackground#5454549c
  • editor.selectionBackground#264f78
  • editorBracketMatch.background#515A6B
  • editorBracketMatch.border#2c2d2eb0
  • editorCursor.foreground#FFCB6B
  • editorGroupHeader.tabsBackground#1a1a1a
  • editorGutter.background#292929
  • editorIndentGuide.activeBackground#888888
  • editorIndentGuide.background#444444
  • editorOverviewRuler.border#00000000
  • editorWhitespace.foreground#3B3A32
  • scrollbarSlider.activeBackground#6A6A6AAA
  • scrollbarSlider.background#6a6a6aa9
  • scrollbarSlider.hoverBackground#6A6A6A88
  • sideBar.background#1a1a1a
  • sideBar.border#444444
  • sideBar.foreground#ffffff
  • sideBarSectionHeader.background#1a1a1a
  • sideBarSectionHeader.foreground#ffffff
  • tab.activeBackground#2c2d2e
  • tab.activeBorderTop#53f1ff
  • tab.activeForeground#ffffff
  • tab.border#424141
  • tab.inactiveBackground#1a1a1a
  • tab.inactiveForeground#888888
  • titleBar.activeBackground#1a1a1a
  • titleBar.activeForeground#ffffff
  • titleBar.border#333333
  • titleBar.inactiveBackground#2a2a2a
  • titleBar.inactiveForeground#aaaaaa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword, storage.type, storage.modifier#FF5370bold
string, constant.other.symbol, constant.character.escape#df8063
entity.name.function, support.function, meta.function-call#82AAFF
variable, variable.parameter, entity.name.variable#FFCB6B
comment, punctuation.definition.comment#62ab0eitalic
constant.numeric, constant.language.numeric#F78C6C
keyword.operator, punctuation.separator, punctuation.terminator#89DDFF
support.type, entity.name.type#C792EA
entity.name.tag, markup.deleted.git_gutter, markup.changed.git_gutter, markup.inserted.git_gutter#FFCB6B
entity.other.attribute-name, entity.name.attribute#82AAFF
constant.language, constant.character#FF5370bold
markup.heading.markdown, markup.heading entity.name#C3E88Dbold
markup.bold, markup.bold string#FF5370bold
markup.italic#F78C6Citalic
markup.quote#65737Eitalic
string.other.link.title.markdown#82AAFFunderline
markup.raw.block.fenced.markdown#FFCB6Bbold
support.type.property-name.json#FFCB6B
punctuation.definition.array.begin.json, punctuation.definition.array.end.json, punctuation.definition.object.begin.json, punctuation.definition.object.end.json, punctuation.separator.key-value.json, punctuation.separator.array.json#89DDFF
support.type.property-name.css#FFCB6B
entity.name.tag.css#FF5370
entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#C792EA
Dark Night Theme by Tanay by Tanay Panchal - VS Code Theme